score:14
Accepted answer
I made some changes in the @potatopeeling snippet, I made compatibility with the newer (2.9.x) version of chart.js also fixed where the "startArc" should be rendered and the color from the previous segment to match this "startArc", so we can have more than 2 segments. This is the result:
Chart.defaults.RoundedDoughnut = Chart.helpers.clone(Chart.defaults.doughnut);
Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend({
draw: function(ease) {
var ctx = this.chart.ctx;
var easingDecimal = ease || 1;
var arcs = this.getMeta().data;
Chart.helpers.each(arcs, function(arc, i) {
arc.transition(easingDecimal).draw();
var pArc = arcs[i === 0 ? arcs.length - 1 : i - 1];
var pColor = pArc._view.backgroundColor;
var vm = arc._view;
var radius = (vm.outerRadius + vm.innerRadius) / 2;
var thickness = (vm.outerRadius - vm.innerRadius) / 2;
var startAngle = Math.PI - vm.startAngle - Math.PI / 2;
var angle = Math.PI - vm.endAngle - Math.PI / 2;
ctx.save();
ctx.translate(vm.x, vm.y);
ctx.fillStyle = i === 0 ? vm.backgroundColor : pColor;
ctx.beginPath();
ctx.arc(radius * Math.sin(startAngle), radius * Math.cos(startAngle), thickness, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = vm.backgroundColor;
ctx.beginPath();
ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI);
ctx.fill();
ctx.restore();
});
}
});
window.onload = function() {
new Chart(document.getElementById('usersChart'), {
type : 'RoundedDoughnut',
data : {
datasets: [
{
data : [40, 20, 20, 20],
backgroundColor: [
'#e77099',
'#5da4e7',
'#8f75e7',
'#8fe768'
],
borderWidth : 0
}]
},
options: {
cutoutPercentage: 70
}
});
};<script src="https://github.com/chartjs/Chart.js/releases/download/v2.9.3/Chart.min.js"></script>
<link rel="stylesheet" href="https://github.com/chartjs/Chart.js/releases/download/v2.9.3/Chart.min.css">
<div style="width: 200px; height: 200px;">
<canvas id="usersChart" width="1" height="1"></canvas>
</div>
score:1
[Adapted for Vue]
If you are using Vue, use the followings:
<script>
import { generateChart, mixins } from 'vue-chartjs';
import Chart from 'chart.js';
import { doughnutChartOptions } from './config';
import { centerTextPlugin } from '@/utils/doughnut-chart';
const { reactiveProp } = mixins;
Chart.defaults.RoundedDoughnut = Chart.helpers.clone(Chart.defaults.doughnut);
Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend({
draw(ease) {
const { ctx } = this.chart;
const easingDecimal = ease || 1;
const arcs = this.getMeta().data;
Chart.helpers.each(arcs, (arc, i) => {
arc.transition(easingDecimal).draw();
const pArc = arcs[i === 0 ? arcs.length - 1 : i - 1];
const pColor = pArc._view.backgroundColor;
const vm = arc._view;
const radius = (vm.outerRadius + vm.innerRadius) / 2;
const thickness = (vm.outerRadius - vm.innerRadius) / 2;
const startAngle = Math.PI - vm.startAngle - Math.PI / 2;
const angle = Math.PI - vm.endAngle - Math.PI / 2;
ctx.save();
ctx.translate(vm.x, vm.y);
ctx.fillStyle = i === 0 ? vm.backgroundColor : pColor;
ctx.beginPath();
ctx.arc(radius * Math.sin(startAngle), radius * Math.cos(startAngle), thickness, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = vm.backgroundColor;
ctx.beginPath();
ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI);
ctx.fill();
ctx.restore();
});
},
});
const RoundedDoughnut = generateChart('custom-rounded-doughnut', 'RoundedDoughnut');
export default {
extends: RoundedDoughnut,
mixins: [reactiveProp],
props: {
data: {
type: Object,
},
},
data() {
return {
options: doughnutChartOptions,
};
},
mounted() {
this.addPlugin(centerTextPlugin);
this.renderChart(this.data, this.options);
},
};
</script>
score:19
You can extend the chart to do this
Preview
Script
Chart.defaults.RoundedDoughnut = Chart.helpers.clone(Chart.defaults.doughnut);
Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend({
draw: function (ease) {
var ctx = this.chart.chart.ctx;
var easingDecimal = ease || 1;
Chart.helpers.each(this.getDataset().metaData, function (arc, index) {
arc.transition(easingDecimal).draw();
var vm = arc._view;
var radius = (vm.outerRadius + vm.innerRadius) / 2;
var thickness = (vm.outerRadius - vm.innerRadius) / 2;
var angle = Math.PI - vm.endAngle - Math.PI / 2;
ctx.save();
ctx.fillStyle = vm.backgroundColor;
ctx.translate(vm.x, vm.y);
ctx.beginPath();
ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI);
ctx.arc(radius * Math.sin(Math.PI), radius * Math.cos(Math.PI), thickness, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.restore();
});
},
});
and then
...
type: 'RoundedDoughnut',
...
Stack Snippet
Chart.defaults.RoundedDoughnut = Chart.helpers.clone(Chart.defaults.doughnut);
Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend({
draw: function (ease) {
var ctx = this.chart.chart.ctx;
var easingDecimal = ease || 1;
Chart.helpers.each(this.getDataset().metaData, function (arc, index) {
arc.transition(easingDecimal).draw();
var vm = arc._view;
var radius = (vm.outerRadius + vm.innerRadius) / 2;
var thickness = (vm.outerRadius - vm.innerRadius) / 2;
var angle = Math.PI - vm.endAngle - Math.PI / 2;
ctx.save();
ctx.fillStyle = vm.backgroundColor;
ctx.translate(vm.x, vm.y);
ctx.beginPath();
ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI);
ctx.arc(radius * Math.sin(Math.PI), radius * Math.cos(Math.PI), thickness, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.restore();
});
},
});
var deliveredData = {
labels: [
"Value"
],
datasets: [
{
data: [85, 15],
backgroundColor: [
"#3ec556",
"rgba(0,0,0,0)"
],
hoverBackgroundColor: [
"#3ec556",
"rgba(0,0,0,0)"
],
borderWidth: [
0, 0
]
}]
};
var deliveredOpt = {
cutoutPercentage: 88,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var chart = new Chart($('#openedCanvas'), {
type: 'RoundedDoughnut',
data: deliveredData,
options: deliveredOpt
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.1/Chart.bundle.min.js"></script>
<canvas id="openedCanvas" height="230" width="680"></canvas>
Source: stackoverflow.com
Related Query
- Chart.js Doughnut with rounded edges
- Chart.js Doughnut with rounded edges and text centered
- Vue Chart.js Doughnut Chart with rounded and spaced arcs (vue3-chart-v2)
- Chart.JS full-width, responsive doughnut chart with Bootstrap
- Chart.js HTML custom legend issues with doughnut chart
- Chartjs doughnut chart with gradient color
- Stacked bar chart with rounded corner of bar using Chart.js
- Responsive Chart.js Doughnut Chart with minimum height
- Vue Chart 3 - Doughnut Charts with Text in the Middle (Trouble registering a plugin)
- Create a arc like doughnut chart with Chart js plugins
- Doughnut Chart not displaying data with Chart Js and Backbone js
- Force ChartJS to show Doughnut chart with null values
- ChartJs - Round borders on a doughnut chart with multiple datasets
- Doughnut chart updates with twice the data
- Legend isnt moving to the right on my doughnut chart created with chart.js
- Chartjs doughnut chart rounded corners for half doghnut
- React with chart js, labelling problems in multiple datasets for doughnut chart
- what is wrong with my code ? java script chart position
- Modify the legend of a double doughnut with chart js
- ng2-charts doughnut chart with different data per series
- Chart.js (v3) Doughnut with rounded edges, but not everywhere
- How write the labels of the data inside a Doughnut Chart made with Chart.js?
- How to update css for doughnut chart with ng2-charts
- Is there a way to style multiple borders on Doughnut chart with Chart.js library?
- Trying to have Doughnut chart with dql result chartjs
- React js with react-chart js, does not render doughnut chart
- getting additional value fields from data source for dx.chartjs doughnut chart
- Chartjs - Doughnut chart with multi layer and running value
- How to display icon arc of doughnut chart with primeVue
- Angular chart js how to use formatter with Doughnut chart
More Query from same tag
- Chart.js not showing dynamically populated data
- How can I hide tick marks on Chart.js?
- How to make multiple horizontal bar chartjs
- Legend for only specific datasets - chart.js
- Call to undefined method App\Charts\SampleChart::labels(), chartjs
- Chart.js / Javascript How to Override Mouseout Event Listener
- How to append text or symbol to tooltip of chart.js
- ReactJS - Loading data using Axios + chartjs
- About the charts in react-native
- how to populate my chartjs piechart dynamically
- chartjs create scrolling on the x axis
- Chartjs chart with only one axis
- Missing colors in my Chart.js, my data looks fine, but no color
- how to remove duplicate data set labels in chartjs
- Using Chart.js on Laravel 5.3
- graph of an equation animated javascript (crash game)
- Chart.js set Doughnut background-color?
- How to align labels at same side chartjs React
- Show bar with zero value in ChartJs v2
- 'scales' option appears to break Chart.js graph
- Unable to resolve path to module 'chartjs-plugin-stacked100'
- How to wait for all items to load within ng-repeat before then rendering a chart for each item
- How to update chart when state changes in vue?
- Edit styles for axes in ChartJS bar chart, when gridlines are hidden
- Angular-Chart-JS - Line chart with different fill colors according to points' range
- ChartJS 2.0 - Huddle labels on pie chart
- chart does not change the values when the variable changes the value
- Single Stacked bar with three sections in Angular
- Chart.js use font awesome in labels
- How can i create a background of moving graphs like chartsjs?
