javascriptphpjquerychart.js

ChartJS hover tooltip colors not showing their correct color


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:

enter image description here

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?


Solution

  • 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.