Is it possible to create a donut chart with multiple rings using ChartJS as shown below?
You can find out the solution at fiddle link
var ctx = document.getElementById("chart-area").getContext("2d");
var myDoughnut = new Chart(ctx, config);
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [
10,20,30
],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C"
],
}, {
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C"
],
}],
labels: [
"Red",
"Green",
"Yellow"
]
},
options: {
responsive: true
}
};
You need to add multiple datasets into chart. they will be displayed as you need. Please look into their own sample of pie chart. You can download and open it locally as example. There they have multiple datasets, that makes chart look like you need.
Hope that it helped.
I know it was old question, but have stuck yesterday into same, so far best that i have touch is Chart js and this is a plugin who does exactly that (and even more!)
Related
I‘m trying to create a doughnut chart with custom objects as data. I don’t know if it is a bug or am I stupid. 😩
If the type of the chart is „bar“ everything is working as expected but if I change it to doughnut the chart area is empty.
Here is the code for the bar chart:
var myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: '# of Votes',
data: [{vX:12, n:'vx'}, {vX:13, n:'vx2'}],
parsing:{
yAxisKey:'vX',
xAxisKey: 'n'
},
borderWidth: 1
}]
},
options: {
}
});
and that‘s my doughnut:
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
label: '# of Votes',
data: [{vX:12, n:'vx'}, {vX:13, n:'vx2'}],
parsing:{
yAxisKey:'vX',
},
borderWidth: 1
}]
},
options: {
}
});
Is parsing not supported for doughnut charts? I can‘t find information about this in the docs.
thanks, Christian
Regarding data structures, the Chart.js documentation says:
For a pie (and doughnut) chart, datasets need to contain an array of data points. The data points should be a number (...)
Therefore, parsing doesn't make sense and is probably not supported. The problem can be solved by mapping your data to labels and data as follows.
var data = [{vX:12, n:'vx'}, {vX:13, n:'vx2'}];
new Chart('myChart', {
type: 'doughnut',
data: {
labels: data.map(v => v.n),
datasets: [{
label: '# of Votes',
data: data.map(v => v.vX),
borderWidth: 1
}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart"></canvas>
At the moment chart.js does not support object notation with parsing for pie/doughnut charts.
There has been a pr for this a few days ago which is merged into the master so as soon as a new version of chart.js releases, anything beyond version 3.5.1 will have this change in it and then you can use your object.
Otherwise you can take the route #uminder suggested and map the data yourself
As mentioned by Christian, It's available since 3.6.0 (2021-10-24, see https://github.com/chartjs/Chart.js/issues/9440) with sth. like this:
options: {
parsing: {
key: "the-label-key',
}
}
ref official doc: https://www.chartjs.org/docs/latest/general/data-structures.html
Looking for some help here. The doughnut chart is rendering properly, but all the colors are gray. I've scoured the chartjs site and googled, but I can't seem to solve this.
Here's my code:
#app.route('/doughnut_chart')
def doughnut_chart():
values = []
labels =['good', 'mediocre','bad']
colors = ['rgba(0, 153, 0, 0.1)', 'rgba(0,153,153,0.1)','rgba(102,153,51,0.1)']
good_high = db.session.query(func.sum(Jf_Q1.highwellbeing)/func.sum(Jf_Q1.good_job)).\
filter(Jf_Q1.working==1).filter(Jf_Q1.good_job==1)
good_mod = db.session.query(func.sum(Jf_Q1.moderatewellbeing)/func.sum(Jf_Q1.good_job)).\
filter(Jf_Q1.working==1).filter(Jf_Q1.good_job==1)
good_low = db.session.query(func.sum(Jf_Q1.lowwellbeing)/func.sum(Jf_Q1.good_job)).\
filter(Jf_Q1.working==1).filter(Jf_Q1.good_job==1)
values = [0.82483097725875845114*100,0.14935464044253226798*100,0.01966810079901659496*100]
return render_template('results.html', values=values,labels=labels, colors=colors)
and my script code on the web page:
new Chart(document.getElementById("doughnut-chart"), {
type: 'doughnut',
data: {
labels : {{labels | safe}},
backgroundColor: {{colors | safe}},
datasets:
[{ data : {{values | safe}}
}]
},
options: {
title: {
display: true,
text: 'Doughnut Chart Title'
}
}
});
Here's how it looks in Chrome's inspector:
new Chart(document.getElementById("doughnut-chart"), {
type: 'doughnut',
data: {
labels : ['good', 'mediocre', 'bad'],
backgroundColor: ['rgba(0, 153, 0, 0.1)', 'rgba(0,153,153,0.1)', 'rgba(102,153,51,0.1)'],
datasets:
[{ data : [82.48309772587584, 14.935464044253226, 1.9668100799016592]
}]
},
options: {
title: {
display: true,
text: 'Doughnut Chart Title'
}
}
});
I've tried hex colors such as:
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9"]
But still no dice
This is what is looks like in Chrome and in FF:
my chart
Any assistance is greatly appreciated.
Thanks
Fixed it!. datasets is a list of objects. I needed to place the backgroundColor option inside datasets as such:
datasets:
[{ data : [82.48309772587584, 14.935464044253226, 1.9668100799016592],
backgroundColor: ['rgba(0, 153, 0, 0.1)', 'rgba(0,153,153,0.1)', 'rgba(102,153,51,0.1)'],
fill: true
}],
I had it outside. RTFM! lol
I have this radar chart in chart.js which has 5 labels. The labels are quite long so I want to show them in two lines in HTML but when I use "\n" it doesn't make a new line!
These are my labels:
labels: ["COMMUNICATION \n SKILL ", "PRODUCT AND PROCESS \n KNOWLEDGE "]
As you can see I'm trying to have "communication skill" and "product and process knowledge" both in two lines but it shows them in one line!
What's the correct way to do it?
UPDATE
The labels is in script tag:
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ["COMMUNICATION SKILL ", "PRODUCT AND PROCESS KNOWLEDGE "],
datasets: [{
label: labs,
data: dps,
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
],
borderWidth: 1
},
options: {
maintainAspectRatio: true,
scale: {
ticks:{
beginAtZero: true,
max: 4
}
}
}
});
I believe what you are looking for is answered here:
ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
The solution is to pass a nested array as an input to 'labels' - with each element in the nested array representing a new line of text in your label. So in your case the following should work:
labels: [["COMMUNICATION","SKILL"], ["PRODUCT AND PROCESS","KNOWLEDGE"]]
Just read the docs https://www.chartjs.org/docs/latest/charts/radar.html
you need your dataset to have the property data and that should be an array. The values in the array will correspond with the values in the labels by their index number.
data: {
labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
datasets: [{
data: [20, 10, 4, 2]
}]
}
I have a pie chart using chart.js 2.0. (jsfiddle)
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
datasets: [{
backgroundColor: [
"#2ecc71",
"#3498db",
"#95a5a6",
"#9b59b6",
"#f1c40f",
"#e74c3c",
"#34495e"
],
data: [12, 19, 3, 17, 28, 24, 7],
}]
},
options: {
legend: {
display: true,
position: 'top'
}
}
});
I wanna to determine the best way to place legend's labels on top-left position and each label will be on a new line:
What is the simplest way to do this? Is it possible to do this out of the box?
After reading the documentation, I found generatelabels function which generates a legend that we can use and assign to an DOM element and stylize and etc... But it seems to me that this is a difficult way and I believe that there is easier.
This is a hack but a satisfactory and dirt-cheap one, until better support is provided officially. Just append a long string of spaces eg. " " to the end of each label string.
This should successfully force the labels to be formatted one-per-line. Ideally this should be used with align: 'start' (v2.9+)
I'm using the Angular Charts to plot a Doughnut chart; my code is structured as follows:
$scope.data = [
['abc', 'def'],
['fgh', 'ijk'],
];
$scope.labels = ['Ask', 'Bid'];
$socpe.series = ['Volume Ask', 'Volume Bid'];
$scope.color = ['#66ff33', '#ffff00'];
The code above results in something as the image bellow:
https://i.stack.imgur.com/A2m2L.png
However, what I need to create is a chart where the colors would be shown as follows:
https://i.stack.imgur.com/s6F0R.png
How we can see, the code is attributing a color per serie and I need a chart with two colors per serie.
Anyone knows if is there possible to create something like this using the Angular Charts?
You can set through this,
$scope.datasetOverride = [{
fill: true,
backgroundColor: [
"#66ff33",
"#36A2EB",
"#FFCE56"
]
}, {
fill: true,
backgroundColor: [
"#ffff00",
"#46BFBD",
"#FDB45C"
]
}];
DEMO