I'm currently exploring the usage of the yAxisKey option in ChartJS while defining a dataset. However, I'm encountering difficulties in replicating this specific example from the documentation. Despite my efforts to search for issues related to yAxisKey (or xAxisKey), the parsing options, and general information on specifying datasets, I have yet to find a solution.
Here's an example:
<!doctype html>
<html>
<head>
<title>Sample Chart</title>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4979c958680da9e87b4c6daccdac4">[email protected]</a>"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const data = [{x: 'Jan', net: 100, cogs: 50, gm: 50}, {x: 'Feb', net: 120, cogs: 55, gm: 75}];
const config = {
type: 'bar',
data: {
labels: ['Jan', 'Feb'],
datasets: [{
label: 'Net sales',
data: data,
parsing: {
yAxisKey: 'net'
}
}, {
label: 'Cost of goods sold',
data: data,
parsing: {
yAxisKey: 'cogs'
}
}, {
label: 'Gross margin',
data: data,
parsing: {
yAxisKey: 'gm'
}
}]
},
};
window.onload = function() {
const ctx = document.getElementById('canvas').getContext('2d');
let chart = new Chart(ctx, config);
};
</script>
</body>
</html>
Despite following the code, I end up with a chart that appears empty.
https://i.sstatic.net/02kkA.png
Could I be overlooking something obvious or misunderstanding the syntax?
Thank you in advance!