I have this chart made with ChartJS. I've gotten it to work so far, but, when adding more data such as 2 lines.. The tooltip looses it's colors. I'm talking about the white boxes to the left of the values:
As you can see theres 2 lines. One for earnings and one for deposits. The deposit is the one at the bottom and the earnings are at the top. Why is the white square white? It should be same as the line?
Here's my code:
Chart:
var ctx = document.getElementById('orders_graph').getContext('2d');
var Order_chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: [], // months
datasets: [{
label: 'Fortjenelse',
data: []
}]
},
// Configuration options go here
options:
{
responsive: true,
hover: {
mode: 'index',
intersect: false
},
spanGaps: true,
legend: {
display: false
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function(tooltipItem) {
return ' '+tooltipItem.yLabel+' DKK';
}
}
},
layout: {
// padding: { left: 0, right: 0, top: 10, bottom: 30}
},
scales:{
xAxes: [{
display: true //this will remove all the x-axis grid lines
}],
yAxes: [{
display: true, //this will remove all the x-axis grid lines
stacked: false,
ticks: {
beginAtZero: true
},
}],
}
}
});
Passing the data to the chart:
Order_chart.data.labels = order_array_parent_index;
Order_chart.data.datasets = [{
// Fortjenelse med renter
label: 'Profit',
data: order_array_parent,
fill: false,
lineTension: 0,
backgroundColor: [
'rgba(113, 217, 98, 0.2)',
],
borderColor: [
'rgba(113, 217, 98, 1)',
],
},
{
// Deposited amount
label: 'Deposit',
data: order_array_parent_deposits,
fill: false,
lineTension: 0,
backgroundColor: [
'rgba(255, 223, 82, 0.2)',
],
borderColor: [
'rgba(255, 223, 82, 1)',
],
},
]
Order_chart.update();
Any ideas on how to solve this?
Going through the Chart.js documentation, it seems like the tooltip bgColor isn't in an array, but just a color param. Try changing backgroundColor: [ the color ]
to backgroundColor: 'rgba(x,x,x,x)'
I don't have Chart.js, so I can't test, but I think that'll sort you.