0
127
ViewsChartjs background color multiple Dataset
I have a script for Chartjs like:
<script type="text/javascript">
var dataname = @Html.Raw(Json.Serialize(ViewBag.performancename));
var dataquo = @Html.Raw(Json.Serialize(ViewBag.performancequo));
var datapo = @Html.Raw(Json.Serialize(ViewBag.performancepo));
var ctx = document.getElementById('canvasx5');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: dataname,
datasets: [{
label: 'QUO',
fill: true,
backgroundColor: [
'rgba(255, 99, 132, 0.8)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 1,
data: dataquo
}
,
{
label: 'PO',
fill: true,
backgroundColor: [
'rgba(75, 192, 192, 0.8)'
],
borderColor: [
'rgba(75, 192, 192, 1)'
],
borderWidth: 1,
data: datapo
}]
},
borderWidth: 1,
options: {
legend: {
display: true,
}
,
scales: {
xAxes: [{
stacked: false,
barPercentage: 0.8,
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
stacked: false,
ticks: {
beginAtZero: true,
stepSize: 2,
min: 0
}
}]
}
}
});
</script>
The result is something like:
The value for each var are:
dataname: ['Arif','Choirul','Rexy']
dataquo: [2,2,1]
datapo: [0,0,3]
They are on Array result.
Why the second and third label is appears with different color? Is something wrong with my script? Need help and advice please.
Thank you.
·
Juan Pablo Isaza
1 answers
Answer question0
In V2 Chart.js did not support auto rollover for array collors, so if your array is shorter as the data length it will fallback to the default color for the remaining data entries.
You have 3 ways of fixing it:
- Removing the square brackets so its just a normal color (See example below)
- Providing an array full of colors with the same length as your data array
- Update to V3, although there are some major braking changes so if you want to do this please read the migration guide so you can change your code correctly
<body>
<canvas id="canvasx5" width="100" height="100"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script type="text/javascript">
var dataname = ['Arif', 'Choirul', 'Rexy'];
var dataquo = [2, 2, 1];
var datapo = [0, 0, 3];
var ctx = document.getElementById('canvasx5');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: dataname,
datasets: [{
label: 'QUO',
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.8)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
data: dataquo
},
{
label: 'PO',
fill: true,
backgroundColor: 'rgba(75, 192, 192, 0.8)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
data: datapo
}
]
},
borderWidth: 1,
options: {
legend: {
display: true,
},
scales: {
xAxes: [{
stacked: false,
barPercentage: 0.8,
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
stacked: false,
ticks: {
beginAtZero: true,
stepSize: 2,
min: 0
}
}]
}
}
});
</script>
·
Juan Pablo Isaza
Report
Answer question