I have a chart.js pie chart. When I update the dataset, I want the pie segments to adjust size smoothly to the new values (i.e. grow/shrink in size).
The pie chart does the rotate transition every time. I can turn off the rotate transition with .update('none') after setting the new data, but then the pie chart instantly changes with no transition.
Is there a way to do this?
My pie chart setup code is:
chartRegion_Emissions_ANZIC_BreakdownChart = new Chart(ctx, {
type: 'pie',
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: {
mode: 'nearest',
callbacks: {
label: function (tooltipItem, data) {
return tooltipItem.label + ': ' + addCommas(tooltipItem.raw) + 'kt';
}
}
}
}
},
data: {
labels: [],
datasets: []
}
});
and the update code (after AJAX request) is ...
chartRegion_Emissions_ANZIC_BreakdownChart.data.labels = data.labels;
chartRegion_Emissions_ANZIC_BreakdownChart.data.datasets[0] = data.data[0];
chartRegion_Emissions_ANZIC_BreakdownChart.update();//'none');
I'm using chart.js version 3.3.2... thanks for any help
Cheers
You override the entire dataset, if you instead of doing that only change the data of that dataset it will shrink/expand the segments of the data.
Example:
const options = {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
}
]
},
options: {}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
document.getElementById('update').addEventListener('click', () => {
chart.data.datasets[0].data = [10, 5, 12, 6, 8, 2];
chart.update();
})
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<button id="update">
update data
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>
Related
I have a radar chart and I'd like to display the value for the tick at the center of the chart over the center. My r scale is set up as follows, and my data is an integer ranging from 1-5.
scales: {
r: {
min: 1,
max: 5,
ticks: {
stepSize: 1,
z: 10,
},
},
},
Over the center of the radar chart, I'd like the tick value displayed, like it's displayed for all other values. Setting my min to 0 (one step size lower than my actual min) displays my ticks, but I'd like the center of my graph to be labeled instead of having a minimum size between the center and the first tick.
You will need to use a custom plugin to draw it on the canvas yourself like so:
const options = {
type: 'radar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
plugins: {
centerTick: {
//color: 'grey' // Set custom color for y
}
}
},
plugins: [{
id: 'centerTick',
afterDraw: (chart, args, opts) => {
const {
ctx
} = chart;
ctx.fillStyle = opts.color || Chart.defaults.color;
ctx.fillText(chart.scales.r.min, chart.scales.r.xCenter - (ctx.measureText(chart.scales.r.min).width / 2), chart.scales.r.yCenter)
}
}]
}
const 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.7.0/chart.js"></script>
</body>
There is an example of how to change line segment color based on point value, with a function like this
borderColor: function(context) {
if (context.p0.parsed.y == 5){
return 'transparent';
}
},
I want to set the color based on the value of the label. This doesn't work:
context.p0.parsed.x == 'February'
With the new verion of chart.js that released today (3.6.0) you can access the chart object and you get the dataIndex so you can check it in the labels array like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
segment: {
borderColor: (ctx) => (ctx.chart.data.labels[ctx.p0DataIndex] === "Green" ? "Pink" : "Orange")
}
}]
},
options: {}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.6.0/dist/chart.min.js"></script>
</body>
Now i have this chart:
https://codepen.io/UnluckySerivelha/pen/BawpPYv
const ctx = document.getElementById('graph').getContext('2d');
var bar_ctx = document.getElementById('graph').getContext('2d');
x=["14 Dec","15 Dec"];
y1={"14 Dec":0,"15 Dec":0,};
y2={"14 Dec":0,"15 Dec":0,};
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: x,
datasets: [
{
label: 'Всего за день',
data: y1
},
{
label: 'Будет начислено по вкладам',
data: y2,
},
]
},
options: {
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value, index, values) {
return '$ ' + value;
}
}
}
},
responsive: true,
maintainAspectRatio: false
},
});
I want to add background image for chart area, but not for labels. I know how to add background image, but don't know how to get size of chart area without labels for assignment size and position of image. Is it possible?
You can check the chartArea property that is available in the chart context. This property has the width and height of the area where the chart itself is being drawn.
const 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: {}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
console.log('height: ', chart.chartArea.height);
console.log('width: ', chart.chartArea.width)
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>
Your own code with the background colored pink: https://codepen.io/leelenaleee/pen/OJxWoPe
Official example on using an image as background: https://www.chartjs.org/docs/master/configuration/canvas-background.html#image
In Chartjs, is there any way to shift the line plot to the right 1 tick? Right now the line starts from the y-axis and as the result at the origin, there are labels from both x and y axis that does not look that nice. I attach the screenshot
Ideally I would like the 09-2016 to move to the right a litte. Really appreciate any help.
You can add an empty label and to the start of the labels array and a null value to the start of your dataArray to shift it a bit
Example:
var options = {
type: 'line',
data: {
labels: ["", "Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [null, 12, 19, 3, 5, 2, 3],
borderWidth: 1,
fill: false,
borderColor: 'red',
backgroundColor: 'red'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
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" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>
type: 'scatter'
Now first one is on the top. Is it possible to show different charts on the top?
picture
In your dataset array you can put a type to put a different type in there. The order of the datasets in the array decide the draw order of them.
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 13, 3, 5, 2, 3],
borderWidth: 1
},
{
type: 'bar',
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
backgroundColor: 'red'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
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" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>