Develop Reference

charts js, doughnut chart not rendering tooptips correctly

i have a multilevel donut chart but it is not rendering correctly here is code
the problem is, onmouseover on all green parts it says objects, on all grey parts it says products, solution i would like is, on outer ring it should say products, in middle objects, and inner most should be materials, grey areas should just show number. here is a jsfiddle of the problem
Code:
var op=93;
var ap=99;
var mp=66;
var ctx = new Chart(myChart, {
type: 'doughnut',
data: {
labels: ['Objects', 'Products', 'Materials'],
datasets: [{
label: 'Objects',
data: [op, 100 - op],
backgroundColor: ['#006a4e','#eeeeee'],
hoverOffset: 4
},{
label: 'Products',
data: [ap, 100 - ap],
backgroundColor: ['#2e856e', '#eeeeee'],
hoverOffset: 4
},
{
label: 'Materials',
data: [mp, 100 - mp],
backgroundColor: ['#5ca08e', '#eeeeee'],
hoverOffset: 4
}
]
},
options: {
//cutoutPercentage: 40,
height: 200,
width:200
}
});

You can achieve that fairly simple with Chart.JS 2.7.2. Add labels to each dataset like this:
data: {
labels: ['Existing', 'Non'],
datasets: [
{
labels: ['Objects', 'Non-objects'],
...
}, {
labels: ['Products', 'Non-products'],
...
},
{
labels: ['Materials', 'Non-materials'],
...
}
]
}
And add the following label tooltip callback:
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ": " + dataset.data[index];
}
}
}
Demo: https://jsfiddle.net/adelriosantiago/fxd6vops/3/
I am sure it is possible with Chart.JS > 3.0 too but I have no idea how since quite a few things changed in the structure.

I had a same problem which took a lot of time but what worked in the end was importing these elements and initialising them ..
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
ChartJS.register(ArcElement, Tooltip, Legend);
these are the elements that helps make the entire chart. you can't skip them

Random color selection on a pie chart Chart.JS

I have a database, and data is taken from it on request. How to set backgroundColor: rgb(144,204,244) if I don't know the number of sectors in the pie chart and it depends on the DB query. In the example on the official website, backgroundColor: rgb(144,204,244) is set 3 times because there are 3 sectors in the pie chart, but I have a different number of sectors in the pie chart.
var ctx = document.getElementById("doughnut").getContext("2d");
var chart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: expirationdates,
datasets: [{
label: 'Оплата парковочных пространств',
backgroundColor: 'rgb(144,204,244)',
borderColor: 'rgb(144,204,244)',
data: prices,
}]
},
options: {}
});
How do I set the color of the sectors if I don't know the number of these sectors in the pie chart? I read the official documentation and there the color is specified for each sector separately.

Force two Chart.js doughnut charts with legends to same size in Bootstrap columns

I have two bootstrap columns side by side in which I want to show two related Chart.js doughnut charts. I want to include the legends, so one can easily see the meaning without interactively hovering with the mouse.
The thing is, when Chart.js plots the two doughnut charts, the sizes of the actual charts differ, because the legend in one chart takes up more space comparatively.
What I'd like is to have two doughnut charts side by side, that scale responsively, and where I am certain the actual doughnut is the same size.
Link to jsfiddle here: https://jsfiddle.net/emc86oux/1/
var chart = new Chart('plot1', {
type: 'doughnut',
data: {
datasets: [{
data: [3,6,10,6,1],
}],
labels: ["Lorem","ipsum","dolor","sit","amet"]
},
options: {
legend: {
align: "end",
position: "bottom"
},
responsive: true,
aspectRatio: 1
}
});
var chart = new Chart('plot2', {
type: 'doughnut',
data: {
datasets: [{
data: [6, 5, 9, 7, 8, 4, 1, 2, 3, 10, 5],
}],
labels: ["On", "the", "other", "hand", "we", "denounce", "with", "righteous", "indignation", "and", "dislike"]
},
options: {
legend: {
align: "end",
position: "bottom"
},
responsive: true,
aspectRatio: 1
}
});

I ended up using the approach described here, where HTML legends are added in separate div's. I modified the approach for doughnut charts, which set up the chart data slightly differently than bar charts.

How do i change React Google Charts background color?

I am trying to change the background color of the charts to match my body background color.
I have tried to do the two following backgroundColor styles below but it doesn't seem to work. Any ideas on how i can get around this?
<Chart
height={'300px'}
width={'370px'}
chartType='Bar'
loader={<div>Loading Chart..</div>}
data={[
['', 'UPLIFT'],
...topSpend.map(d => [d.PRODUCT, d.UPLIFT]),
]}
options={{
chart: {
title: 'Spend Uplift',
-----> backgroundColor: 'red'
},
colors: ['#FB7A21']
}}
/>
<Chart
height={'300px'}
width={'370px'}
chartType='Bar'
loader={<div>Loading Chart..</div>}
data={[
['', 'UPLIFT'],
...topSpend.map(d => [d.PRODUCT, d.UPLIFT]),
]}
options={{
chart: {
title: 'Spend Uplift',
},
colors: ['#FB7A21'],
-----> backgroundColor: 'red'
}}
/>

You need to use chartType as BarChart. For some reason, Bar seems to cause issues. In case you want the chart bars to be vertical, change it to ColumnChart.
You can see the working fiddle here

'Bar' is considered a Material chart.
vs. 'BarChart', which is a Classic chart.
with Material charts, an options conversion method needs to be used...
google.charts.Bar.convertOptions
which means you would need to access the google.charts namespace.
options={google.charts.Bar.convertOptions({
chart: {
title: 'Spend Uplift',
},
colors: ['#FB7A21'],
backgroundColor: 'red'
})}

How to Draw a line on chart without a plot point using chart.js

I am using chart.js line chart. I can use the chart correctly but if I have only one plot point then the chart doesn't create a line from start to that point. I want to draw a line from the start of the chart to that single plot point without placing a plot point on that first day as we don't have data in the database for it.
Current chart behaviour:
Need a line like drawn here from the start of the chart:
Is this possible to draw a line on the chart from start to that point? Maybe some start point property or a hidden x-axis attribute on the chart to achieve this?
Also, any possible way to remove that space from top before that "Extreme" point on Y-Axis?
I have done hard research on it, have read the docs multiple times but unable to achieve them.

Have you tried Area charts with fill set to false? Check out the samples here https://www.chartjs.org/samples/latest/charts/area/line-boundaries.html
It's kind of a hack but you can append the data with an extra point and update its styles to keep it hidden, Refer to our fiddle https://jsfiddle.net/hpdr5jf1/
Relative code
var options = {
type: 'line',
data: {
labels: ["", "Actual Data"],
datasets: [
{
label: 'Data Point',
data: [12, 12],
pointRadius: [0],
pointHitRadius: [0],
borderWidth: 1,
fill: false,
borderColor: 'red'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var myChart = new Chart(ctx, options);