Сравнить диаграмму со 100% ⇐ Jquery

[Anonymous]

Я хочу сравнить данные: [40, 100], значение со 100 %, но моя диаграмма работает не так, как ожидалось.
вот как это должно выглядеть


Надеюсь, вы понимаете, чего я пытаюсь достичь
вот https://jsfiddle.net/2r1894eb/
это раздел что мне нужно сравнить результаты базы данных со 100%

Код: Выделить всё

new Chart('multiDoughnutChart', {
type: "doughnut",
data: {
labels: ['Profit', 'Income', 'Loss'],
datasets: [{
data: [40, 100],
backgroundColor: ['lightgreen', '#EFEFEF'],
borderWidth: 10,
borderRadius: [10, 0]
},
{
data: [25, 100],
backgroundColor: ['lightcoral', '#EFEFEF'],
borderWidth: 10,
borderRadius: [10, 0]
},
{
data: [50, 100],
backgroundColor: ['lightblue', '#EFEFEF'],
borderWidth: 10,
borderRadius: [10, 0]
}
]
},
options: {
cutout: '30%',
hover: {
mode: null
},
plugins: {
legend: {
position: 'bottom',
labels: {
generateLabels: chart => chart.data.labels.map((label, i) => ({
text: label,
idx: i,
fillStyle: chart.data.datasets[i].backgroundColor[0],
strokeStyle: '#fff',
hidden: !chart.isDatasetVisible(i)
}))
},
onClick: (event, legendItem, legend) => {
legend.chart.getDatasetMeta(legendItem.idx).hidden = legend.chart.isDatasetVisible(legendItem.idx);
legend.chart.update();
}
},
tooltip: {
filter: tooltipItem => tooltipItem.dataIndex == 0,
callbacks: {
label: ctx => ctx.raw + '%',
labelColor: ctx => ({
backgroundColor: ['lightgreen', 'lightcoral', 'lightblue'][ctx.datasetIndex],
borderWidth: 0,
})
}
}
}
}
});

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/782 ... t-with-100