I am trying to parse a piechart out of an json-object which I get by calling an API. I want to use a specific key-value pair for rendering of the piechart itself.
I then want to use some other key-value results in my tooltips.
Imagine the following scenario which works so far.
const labels = [
'Januar',
'Februar'
];
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: ["#0074D9", "#FF4136"],
data: [req('url').current_price.eur, req('url').current_price.eur],
}]
const config = {
type: 'pie',
data: data,
options: {
responsive: true,
plugins: {
tooltip: {
enabled: true,
usePointStyle: true,
callbacks: {
title: function(tooltipItem, data) {
console.log(tooltipItem);
return "Index " + tooltipItem[0].label;
},
label: (context) => {
console.log('context', context);
return 'test'
}
},
},
},
},
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<html>
<meta charset="UTF-8">
<div>
<canvas id="myChart"></canvas>
</div>
</html>
So what I'm trying, is calling the API in data without the keys, so that I can access the object in context and use some of this values in my label for example.
I found the
parsing: {
yAxisKey: 'current_price.eur'
}
config but this isn't working for me if I change everything according to my idea, so that it renders the current_price.eur values
For pie/doughnut charts you need to specify the key option since it doesnt use any axes. So if you make your object like (together with latest version, 3.6.0) this it should work:
parsing: {
key: 'current_price.eur'
}
Example of object pie chart:
var options = {
type: 'doughnut',
data: {
datasets: [{
label: '# of Votes',
data: [{
id: 'parent1',
key: 55
}, {
id: 'parent2',
key: 55
}, {
id: 'paren3',
key: 30
}],
},
{
label: '# of Points',
data: [{
id: 'child1',
key: 55
}, {
id: 'child2',
key: 55
}, {
id: 'child3',
key: 30
}, {
id: 'child4',
key: 55
}, {
id: 'child5',
key: 55
}, {
id: 'child6',
key: 30
}],
}
]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: (ttItem) => (`${ttItem.raw.id}: ${ttItem.raw.key}`)
}
}
},
parsing: {
key: 'key'
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>