Draw two plots using chartjs over one another with transparency

Question

In Chartjs I have two plots, as shown here:

        var config = {
            type: 'line',
            data: {
                labels: [
                    "2017-07-03T01:05:00+0100",
                    ....

                ],


            datasets: [


                {
                    label: "Consumption",
                    fill: 'origin',
                    pointRadius: 0,
                    borderColor: "#0000ff",
                    backgroundColor: "rgba(255,10,13,255)",
                    data: [


                    0.015625,
                    0.0199861111111,
                    ...

                    ],
                }
                ,
                {
                    fill: 'origin',   
                    label: "PV",
                    pointRadius: 0,
                    borderColor: "#ebf909",
                    backgroundColor: "rgba(29,241,13,210)", 
                    data: [

                    0.0,

                    .....

                    ],
                }




                ]
            },
            options: {

                responsive: true,
                title:{
                    display:true,
                    text:"Chart.js Line Chart - Stacked Area"
                },
                tooltips: {
                    mode: 'index',
                },
                hover: {
                    mode: 'index'
                },
                scales: {
                    xAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Time'
                        }
                    }],
                    yAxes: [{
                        stacked: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'kWh'
                        }
                    }]
                }
            }
        };



var ctx = document.getElementById("canvas").getContext("2d");
var myChart  = new Chart(ctx, config);  

Is there any way I can make the green plot show through the red one in places where the latter completely obscures the former?

Answer 1

You need to set fill property to false for the first dataset (the red one), to make it transparent.

datasets: [{
         label: "Consumption",
         fill: false,
         pointRadius: 0,
         borderColor: "#0000ff",
         backgroundColor: "rgba(255,10,13,255)",
         ...

or, you can also reduce the opacity of background color, like so ...

backgroundColor: "rgba(255, 10, 13, 0.1)"

Here is the working codepen