score:0
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!)
score:3
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.
score:17
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
}
};
Source: stackoverflow.com
Related Query
- ChartJS - Donut charts with multiple rings
- How can I load multiple Chartjs charts with different data on the same page?
- Generate multiple line charts in Django with ChartJS
- multiple chartjs charts with the same configuration but different data
- Page with multiple chart.js charts to pdf
- Horizontal bar with multiple sections in ChartJs
- Add zoom event handler to charts for chartjs with chartjs-plugin-zoom
- Multiple charts in one page with chart.js
- Chart.js Multiple charts with one common legend
- Chartjs drill down issue with multiple Y-Axis Bar/Line graph
- Group Chart with multiple layers in ChartJS
- Chartjs with multiple y axes and different scales
- Impossible to render multiple charts with chart.js
- Chartjs not working with d3 from csv source
- ChartJS update chart with multiple datasets
- ChartJs - Round borders on a doughnut chart with multiple datasets
- ChartJS Version 3 - common legend for multiple line charts
- Working with multiple date axes in ChartJS
- Grouping y-axis labels on multiple lines on a ChartJS with an extra dimension
- Adding Multiple value in Tooltips in ChartJS charts
- Javascript and Chart.JS - issue with getting unique text in 3 donut hole charts - same text showing for all 3 donut holes
- How to map multiple charts with chart.js in react
- Dynamic multiple charts in chart.js with dynamic data inside them
- Chart.js - loading multiple charts with draggable datapoints into a single HTML Page
- multiple charts js in page but with same tooltips (about last chart)
- Plot Multiple Line Chart in Ionic 3 with ChartJS
- Updating Chartjs to 2.5 with custom code
- Multiple charts in background ChartJS
- Is there a way to insert multiple lines, with labels, dynamically, into a ChartJS Line chart?
- Reactive charts with Meteor : d3charts , Hightcharts , ChartJS , other?
More Query from same tag
- Radar charts for chartjs always stay filled
- Not able to add elements to an array in typescript using chart.js and bootstrat charts
- chart.js pie chart - how to update dataset with smooth transition
- ChartJS adding 3yAxes
- Label Color same as backgroundColor - ChartJS
- C# MVC5 JavaScript Chart.js Pie Chart with Realtime Updating from SQL Server Database without Refreshing
- Keep the Y axis fixed when the chart scrolls horizontally, regardless of DPI settings?
- Chart.js chart doesn't render when using Angular 2
- How to style a pie chart in chart js? I want to change the border color, border width and give them shadow
- chartjs-plugin-streaming + chartjs-plugin-zoom
- Charts JS: How to set units?
- Exporting dynamic chartjs to jspdf
- Draw line charts by days/weeks/months from a timestamp
- Display some chart.js in the popup of chrome's extensions
- Laravel Charts Refresh With Ajax
- ChartJS separate charts per JSON object, and not when hovered over
- C# How to print html Convas element in PDF document
- Pass Ajax response array to Chart.js
- Passing data from .csv (d3.js) to Chart.js, am I doing something wrong?
- Chart JS is using 1,2,3 as y values for my points for the second dataset instead of their passed in labels
- how to set chart.js grid color for line chart
- Chartjs destroy method not affecting the chart
- Chart.js: Can I change the "OriginalOptions" variable within the chartjs-zoom-plugin?
- npm chart.js is big after minimization
- Change Chart JS Bar Chart Border to Dotted Line
- ChartJS - Returning labels and data from server on different calls
- react chart js, title is not displayed
- How can i add an image as background in Chartjs?
- How can I show gridlines only of the even value ones withchartjs?
- Chartjs random colors for each part of pie chart with data dynamically from database