0๐
โ
If your data.csv contains this type of value:
Year,Month,Country,Amount,Production
2019,6,Germany,139,level1
2019,4,Germany,111,level2
2019,2,Germany,70,level3
2019,5,Germany,69,level4
2019,6,Germany,67,level5
2019,3,Germany,65,level6
2019,1,Germany,61,level7
2019,1,Germany,39,level8
2019,1,Italy,1966,level9
2019,5,Italy,489,level10
2019,1,Italy,262,level11
then you should try this code. I think it will work.
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
</head>
<body>
<canvas id="barchart" width="100%" height="40%"></canvas>
<script>
d3.csv("data.csv").then(makechart);
function getRandomColorHex() {
var hex = "0123456789ABCDEF",
color = "#";
for (var i = 1; i <= 6; i++) {
color += hex[Math.floor(Math.random() * 16)];
}
return color;
}
function makechart(delivery) {
var prd = [],
amt = [],
alldata = {};
alldata['datasets'] = [];
alldata['labels'] = ["labels"];
delivery.forEach(element => {
prd.push(element.Production);
amt.push(element.Amount);
var sample = {};
sample['data'] = [element.Amount];
sample['backgroundColor'] = getRandomColorHex();
sample['label'] = element.Production;
alldata['datasets'].push(sample);
});
//console.log(alldata['datasets'][0]['backgroundColor']);
Chart.plugins.register({
beforeDraw: function (c) {
var legends = c.legend.legendItems;
//console.log(legends);
legends.forEach(function (e,ind) {
e.fillStyle = alldata['datasets'][ind]['backgroundColor'];
});
}
});
var barchart = new Chart('barchart', {
type: 'bar', //alldata,
data:alldata,
// {
// labels: prd,
// datasets: [{
// backgroundColor: getRandomColorHex(),
// data: amt,
// label: 'level1',
// fillStyle: '#07C'
// }]
// },
options: {
responsive: true,
legend: {
position: 'left',
fillStyle: getRandomColorHex()
},
title: {
display: true,
text: 'Example chart'
}
}
});
}
</script>
</body>
</html>
Source:stackexchange.com