Chartjs-How to customize Data Labels of area chart on ChartJS?

by

0👍

1 – Change all the big Squares icons labels to something else small, for example, Dots

Adding labels at legend attribute, as follow:

legend: {
            position: 'bottom',
            display: true,
            padding: 0,
            labels: {
                boxWidth: 30,
                fontSize: 11,
            }
        }

With boxWidth property it’s possible to change the thickness of legend boxes, and the fontSize naturally changes the legend font size.

To change the labels from squares to Dots, just add usePointStyle: true to labels: {}. In this case, boxWidth can be removed from the code.

2 – How to display all Datasets Labels

Change the maxTicksLimit to a number higher than your items, in my case, to maxTicksLimit: 10 is enough because I have only 7 kinds of items to show. As an example, get the example code below.

scales: {
            xAxes: [{                    
                ticks: {
                  maxTicksLimit: 10
                }
            }]
        }

Referece: chartjs legend documentation

Leave a comment