Hello how i can set default background color to dataset columns? like on image. The gray part of columns. So every columns will have gray background color from 0 to max value.
Here is the code of my data chart. I look the examples on chart.js site but there i can't find anythin about this situation
var ctx = document.getElementById("data");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Today', '12 Th', '13 Fr', '14 St', '15 Sn', '16 Mn', '17 Tu'],
datasets: [{
label: 'Capacity',
data: [20.7, 10, 40, 2, 100, 43, 34],
backgroundColor: '#43d100'
},
{
label: 'Confirmed',
data: [11.4, 100, 20, 42, 10, 20, 65],
backgroundColor: '#dc1f1f'
}
]
},
options: {
legend: {
display: false
},
layout: {
borderWidth: 0
},
scales: {
xAxes: [{
stacked: true,
gridLines: {
display: false,
borderWidth: 0,
drawBorder: false
}
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
display: false,
max: 200,
fill: "#07C"
},
gridLines: {
display: false,
borderWidth: 0,
drawBorder: false
}
}]
}
}
});
an option doesn't exist for column background color.
a third series will need to be added to represent the background.
which can easily be done by subtracting the original values from the max value.
the tooltip for the background series can be removed by using the filter
option.
see following working snippet...
$(document).ready(function() {
// original datasets
var chartData = [{
label: 'Capacity',
data: [20.7, 10, 40, 2, 100, 43, 34],
backgroundColor: '#43d100'
},
{
label: 'Confirmed',
data: [11.4, 100, 20, 42, 10, 20, 65],
backgroundColor: '#dc1f1f'
}];
// max value - background dataset
var maxValue = 200;
var maxData = {
label: 'Max',
data: [],
backgroundColor: '#cccccc'
};
// subtract each dataset value from max value
chartData.forEach(function (dataset) {
dataset.data.forEach(function (value, index) {
if (maxData.data.length <= index) {
maxData.data.push(maxValue);
}
maxData.data[index] -= value;
});
});
// add background dataset
chartData.push(maxData);
var ctx = document.getElementById("data");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Today', '12 Th', '13 Fr', '14 St', '15 Sn', '16 Mn', '17 Tu'],
datasets: chartData // <-- modified dataset
},
options: {
legend: {
display: false
},
layout: {
borderWidth: 0
},
scales: {
xAxes: [{
stacked: true,
gridLines: {
display: false,
borderWidth: 0,
drawBorder: false
}
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
display: false,
max: 200,
fill: "#07C"
},
gridLines: {
display: false,
borderWidth: 0,
drawBorder: false
}
}]
},
// remove tooltip for background dataset
tooltips: {
filter: function (tooltipItem, data) {
return (tooltipItem.datasetIndex < (chartData.length - 1));
},
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="data"></canvas>