Wednesday, 27 January 2021

Can you change legend style for bar datasets with chart.js?

I'm using chart.js 2.9.4

I have a combined line and bar graph. The line dataset uses diamonds ('rectrot') for the points. In the legend, I wish the bar datasets to remain as the default rectangles but for the line dataset to use the diamond style.

options: {
    aspectRatio: 1.77778,
    legend: {
        display: chart.displayLegend,
        labels: {
            usePointStyle: true,
            boxWidth: 14,
            fontSize: 14,
            fontStyle: 'bold',
            fontColor: '#404040'
        },
        position: 'bottom'
    }
...

I have set usePointStyle to true, and this does set the legend to the diamond for my line dataset. However, the bar dataset legends have now become circles instead of rectangles. I have tried setting pointStyle: 'rect' for my bar datasets but this had no effect.

Is it possible to use usePointStyle for bar datasets or is this only for line datasets? If so, is it possible to use a function to set the value of usePointStyle based on the type of the dataset?



from Can you change legend style for bar datasets with chart.js?

No comments:

Post a Comment