How scale sector in doughnut chartjs on hover?
Example:
The simplest solution would be to define different borderWidth and hoverBorderWidth on your dataset as follows.
new Chart(document.getElementById('myChart'), {
type: 'doughnut',
data: {
labels: ['red', 'green', 'gray', 'blue'],
datasets: [{
label: 'My First dataset',
backgroundColor: ['red', 'green', 'gray', 'blue'],
borderColor: 'white',
data: [3, 4, 5, 3],
borderWidth: 4,
hoverBorderWidth: 0,
borderAlign: 'center'
}]
},
options: {
responsive:true,
cutoutPercentage: 65
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>
Related
I have the following chart:
How can I make sure that the the blue line isn't filled, but at the same time, stays on top of the filled red line?
Taking the line chart example from the documentation, I have tried playing around with the drawTime property, but as you can see, the blue line is on the foreground of the red one, but it is filled (I expect the blue line to be on the foreground, but not filled).
Here's what I have so far:
Data:
const data = {
labels: generateLabels(),
datasets: [
{
label: 'Dataset 1',
data: generateData(),
borderColor: Utils.CHART_COLORS.red,
backgroundColor: Utils.CHART_COLORS.red,
fill: true
},
{
label: 'Dataset 2',
data: generateData(),
borderColor: Utils.CHART_COLORS.blue,
backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue),
// changed `fill` propery from `true` to `false`
fill: false
}
]
};
Config:
const config = {
type: 'line',
data: data,
options: {
plugins: {
filler: {
propagate: false,
// added `drawTime` property here
drawTime: "beforeDraw",
},
title: {
display: true,
text: (ctx) => 'drawTime: ' + ctx.chart.options.plugins.filler.drawTime
}
},
pointBackgroundColor: '#fff',
radius: 10,
interaction: {
intersect: false,
}
},
};
Setup:
const inputs = {
min: -100,
max: 100,
count: 8,
decimals: 2,
continuity: 1
};
const generateLabels = () => {
return Utils.months({count: inputs.count});
};
Utils.srand(3);
const generateData = () => (Utils.numbers(inputs));
This seems like a bug in chart.js itself.
You have 3 options:
wait until it is fixed within chart.js itself
write your own custom plugin that does the filling
make use of the order property so the blue line gets drawn on the canvas after the red one like so:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'red',
borderColor: 'red',
fill: true,
order: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'blue',
order: 0
}
]
},
options: {}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
EDIT:
After looking at the source code it seems indeed like its a bug in chart.js, it does not check if fill has been set to false so it will always fill with the non default modes. Will put in a fix for this so it will be fixed in version 3.8.1
I have chartjs v2.9.3 in my Django app and it works great. Now I need to add a box to one of my charts using chartjs-plugin-annotation, and I've followed all the steps, but I can't get it to work.
I've used chartjs-plugin-annotation v0.5.7 which is for v2.9.3. I get no errors in the console log.
First, scripts with chart.js and plugins:
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.7.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation#0.5.7/chartjs-plugin-annotation.min.js"></script>
My code for chart (chart works, I just can't get box to appear):
<canvas id="myChart" height="250"></canvas>
<script>
function setChart12(){
$('#myChart').remove();
$('#container_glavni').append('<canvas id="myChart" height="200"></canvas>');
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: date,
datasets: [{
label: 'Number of reports',
data: data_nc
}, {
type: 'line',
label: 'Median',
data: [50],
fill: false,
borderColor: 'rgb(54, 162, 235)',
}],
},
options: {
layout: {
padding: {
top: 30
}
},
responsive: true,
legend: {
display: false
},
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
offset: 5,
},
autocolors: false,
annotation: {
annotations: {
box1: {
type: 'box',
xMin: 0,
xMax: 1,
yMin: 0,
yMax: 30,
backgroundColor: 'rgba(255, 99, 132, 0.25)'}
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});}
</script>
I've tried:
Different values for min and max
Different colors
Different code formating
This is because you putted the options in the place where they belong in V1 of the annotation plugin and the syntax too. For V0.5.7 the annotation options have to be placed in the root of the options and also all the annotations are an array instead of seperate objects:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
annotation: {
annotations: [{
id: "hline",
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: 10,
borderColor: "red",
}]
},
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation#0.5.7/chartjs-plugin-annotation.min.js"></script>
</body>
I have a stacked barchart for which I can pass a border color to each stack. Passing the same borderColor to each stack would also result in a border in the middle(yAxis=1.0) of the barchart.
I want to create a single outer border is this possible?
You can specify the borderwidth as an object and then set the with of the border to 0 where the stacks meet
Example:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
borderColor: 'red',
borderWidth: {
top: 0,
left: 1,
right: 1
}
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
borderColor: 'blue',
borderWidth: {
bottom: 0,
top: 1,
left: 1,
right: 1
}
}
]
},
options: {
scales: {
y: {
stacked: true
},
x: {
stacked: true
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
</body>
I am trying to render a line graph with two datasets
My sample chart
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
borderColor: 'rgb(255, 99, 132)',
fill: false,
data: [9000, 9020, 9010, 9004, 9011, 9040, 9050]
},
{
label: 'My Second dataset',
borderColor: 'rgb(0, 99, 132)',
fill: false,
data: [1000, 1020, 1010, 1004, 1011, 1040, 1050]
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 10
}
}]
}
}
});
</script>
This is how it looks currently current result
This the graph will be easy to read if it has axis break like this
expected result
There is no build in way to do this. The best thing you can do is use a second Y axes and link the second dataset to the other axes.
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
yAxisID: 'first'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
yAxisID: 'second'
}
]
options: {
scales: {
yAxes: [{
id: 'first'
},{
id: 'second'
}]
}
}
How can I center the X-axis of a Chart.js (v2.8.0) line chart when there is only one X-axis value?
<span style="width:50%; display:inline-block;">
<canvas id="myChart"></canvas>
</span>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan'],
datasets: [
{ borderColor: 'green', data: [5], label: 'SET1' },
{ borderColor: 'red', data: [7], label: 'SET2' },
{ borderColor: 'blue', data: [3], label: 'SET3' }
]
}
});
</script>
See Chartjs linechart with only one point - how to center
You can add dummy labels to center your single point:
{
type: 'line',
data: {
labels: ['', 'Jan', ''],
datasets: [
{ borderColor: 'green', data: [null, 5, null], label: 'SET1' },
{ borderColor: 'red', data: [null, 7, null], label: 'SET2' },
{ borderColor: 'blue', data: [null, 3, null], label: 'SET3' }
]
}
}
Or you can use the scatter chart type to manually specify the x coordinate of your points.