score:5
Accepted answer
made a few more adjustments and finally got it.this does exactly what you want:
chart.pluginservice.register({
afterupdate: function (chart) {
var a=chart.config.data.datasets.length -1;
for (let i in chart.config.data.datasets) {
for(var j = chart.config.data.datasets[i].data.length - 1; j>= 0;--j) {
if (number(j) == (chart.config.data.datasets[i].data.length - 1))
continue;
var arc = chart.getdatasetmeta(i).data[j];
arc.round = {
x: (chart.chartarea.left + chart.chartarea.right) / 2,
y: (chart.chartarea.top + chart.chartarea.bottom) / 2,
radius: chart.innerradius + chart.radiuslength / 2 + (a * chart.radiuslength),
thickness: chart.radiuslength / 2 - 1,
backgroundcolor: arc._model.backgroundcolor
}
}
a--;
}
},
afterdraw: function (chart) {
var ctx = chart.chart.ctx;
for (let i in chart.config.data.datasets) {
for(var j = chart.config.data.datasets[i].data.length - 1; j>= 0;--j) {
if (number(j) == (chart.config.data.datasets[i].data.length - 1))
continue;
var arc = chart.getdatasetmeta(i).data[j];
var startangle = math.pi / 2 - arc._view.startangle;
var endangle = math.pi / 2 - arc._view.endangle;
ctx.save();
ctx.translate(arc.round.x, arc.round.y);
console.log(arc.round.startangle)
ctx.fillstyle = arc.round.backgroundcolor;
ctx.beginpath();
//ctx.arc(arc.round.radius * math.sin(startangle), arc.round.radius * math.cos(startangle), arc.round.thickness, 0, 2 * math.pi);
ctx.arc(arc.round.radius * math.sin(endangle), arc.round.radius * math.cos(endangle), arc.round.thickness, 0, 2 * math.pi);
ctx.closepath();
ctx.fill();
ctx.restore();
}
}
},
});
fiddle - http://jsfiddle.net/tgyxmklj/1/
score:0
this is not the exact answer that you might be looking for but this was my requirement to get rounded edges for multiple datasets. this one rounds off one color in each doughnut dataset.
i used the answer at chart.js doughnut with rounded edges and text centered and made some changes. here is the code:
// round corners
chart.pluginservice.register({
afterupdate: function (chart) {
if (chart.config.options.elements.arc.roundedcornersfor !== undefined) {
var a=chart.config.data.datasets.length -1;
for (let i in chart.config.data.datasets) {
var arc = chart.getdatasetmeta(i).data[chart.config.options.elements.arc.roundedcornersfor];
arc.round = {
x: (chart.chartarea.left + chart.chartarea.right) / 2,
y: (chart.chartarea.top + chart.chartarea.bottom) / 2,
radius: chart.innerradius + chart.radiuslength / 2 + (a * chart.radiuslength),
thickness: chart.radiuslength / 2 - 1,
backgroundcolor: arc._model.backgroundcolor
}
a--;
}
}
},
afterdraw: function (chart) {
if (chart.config.options.elements.arc.roundedcornersfor !== undefined) {
var ctx = chart.chart.ctx;
for (let i in chart.config.data.datasets) {
var arc = chart.getdatasetmeta(i).data[chart.config.options.elements.arc.roundedcornersfor];
var startangle = math.pi / 2 - arc._view.startangle;
var endangle = math.pi / 2 - arc._view.endangle;
ctx.save();
ctx.translate(arc.round.x, arc.round.y);
console.log(arc.round.startangle)
ctx.fillstyle = arc.round.backgroundcolor;
ctx.beginpath();
ctx.arc(arc.round.radius * math.sin(startangle), arc.round.radius * math.cos(startangle), arc.round.thickness, 0, 2 * math.pi);
ctx.arc(arc.round.radius * math.sin(endangle), arc.round.radius * math.cos(endangle), arc.round.thickness, 0, 2 * math.pi);
ctx.closepath();
ctx.fill();
ctx.restore();
}
}
},
});
fiddle : http://jsfiddle.net/n6vlv1zv/
hope it brings you one step closer.
Source: stackoverflow.com
Related Query
- ChartJs - Round borders on a doughnut chart with multiple datasets
- ChartJS update chart with multiple datasets
- React with chart js, labelling problems in multiple datasets for doughnut chart
- Is there a way to style multiple borders on Doughnut chart with Chart.js library?
- ChartJS - Line Chart with different size datasets
- Chartjs doughnut chart with gradient color
- Group Chart with multiple layers in ChartJS
- Multiple bubble chart datasets for chartjs
- Force ChartJS to show Doughnut chart with null values
- React chart2js Line chart with multiple datasets overlapping
- How do I display two datasets on a single chart with chartjs
- Plot Multiple Line Chart in Ionic 3 with ChartJS
- Chartjs doughnut with multiple dataset issue in legend creation
- Use multiple datasets with Javascript Chart
- Trying to have Doughnut chart with dql result chartjs
- Chartjs - Doughnut chart with multi layer and running value
- ChartJS Tooltips with time axis and multiple datasets
- Multiple datasets with one data value chartjs
- combo bar line chart with multiple grouped/stacked datasets
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- ChartJS - Draw chart with label by month, data by day
- Display line chart with connected dots using chartJS
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- How to fix chart Legends width-height with overflow scroll in ChartJS
- ChartJS - Donut charts with multiple rings
- Chart.js - Draw bar chart with multiple labels
- ChartJS bar chart with legend which corresponds to each bar
- Chartjs - data format for bar chart with multi-level x-axes
- Chartjs - show elements in all datasets on hover using bar chart
More Query from same tag
- ChartJS plotting x/y in a line chart
- Chartjs custom dynamic legend overflowing
- OffsetWidth / offsetHeight is zero when template loaded by ngRoute
- Chart.js - Draw charts with opposite bars - How to set both the y-axis ends to positive number?
- ChartJs: How to pan programmatically by time values (instead of pixels)
- chart.js:4 Uncaught ReferenceError: require is not defined in ionic 2
- Position of the x-axis labels is not in sync with the line chart data points
- Call to undefined method App\Charts\SampleChart::labels(), chartjs
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- How can I give the automatically generated y-axis values on bar charts in Chart.JS commas?
- Responsive ChartJS in Bootstrap Table Cell
- Chartjs plugin label in Angular app moving unexpectedly at hover
- How to emit an event with vue-chartjs?
- Filtering labels to show user from Chart.js
- chart js bar chart add animation to change color
- Set an array to be displayed at Chart js
- Chart.js and Angular 8 - Dynamically updating Chart.js labels and data from *ngfor
- Draw horizontal line on chart in chart.js on v2
- How to add an image to a slice of a donut chart in chart.js?
- Ng2-Charts Linechart only showing first 2 two values
- Difference between DXTREME and PhoneGap
- angular-chart.js showing black color chart in Firefox, Safari, and IE
- Chartjs / ng2-charts line on hover does not work
- In react.js with chart.js, I can't access to my data in a componant
- How to change position of labels in Doughnut chart?
- Regarding stacked chart in chart.js
- generate multiple charts via loop for chart js
- ChartJS / MomentJS - Unable to remove deprecation warning. Graph not showing in firefox/opera
- Can I remove the Y-axis counter on chart.js?
- How to create vertical arbitrary line in financial chart?