Chart Js update legend boxes of graph with graph line style

Question

I want to update legend boxes of my graphs with graph line style.

Actual Consumption Average Use

Below is my code, but legend label image is not updating. Can anyone help me?

var ctx = document.getElementById("myChart");
this.myChart = new Chart(ctx,  {
    type: 'line',
    data: {
        labels: ["Jan", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: 'Actual Consumption',
            data:[24, 49, 6, 7, 21, 6],
            backgroundColor: [
                'rgba(225,225,225,0)'  
            ],
            borderColor: [
                'rgba(53,91,183,1)'
            ],
            borderWidth: 2.2,
            pointStyle: 'circle', 
        },{
            label: 'Average Use ',
            data:[4, 12, 2, 17, 22, 2],
            backgroundColor: [
                'rgba(225,225,225,0)'  
            ],
            borderColor: [
                'rgba(230,104,38,1)'

            ],
            borderWidth: 2.2,
            pointStyle: 'rect',

        },{
            label: 'Total Use',
            data:this.data,
            backgroundColor: [
                'rgba(225,225,225,0)'  
            ],
            borderColor: [
                'rgba(148,148,148,1)'
            ] ,
            borderWidth: 2.2,
            pointStyle: 'triangle',

        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        **legend: {
            cursor : "pointer",
            useLineStyle: true,
            labels: {
                fontColor: '#000000'
             }
        }**
    }
});

Answer 1

There's a legend option called "usePointStyle" that should match the legend style to the style of the graph point.

legend: {
  labels: {
    usePointStyle: true
  }
}

If that doesn't solve your issue, you may have to use the "legendCallback" to create a custom HTML legend.