How to customize Data Labels of area chart on ChartJS?

Question

I'm using ChartJS to show data in a Bar-Chart as shown here.

I whant to change all the big Squares icons labels to something else small, for example Dots. How to achieve that? It is possible to change it using CSS, once it's not possible to see the chart HTML in the DOM?

A second question is, how to display all Datasets Labels. As shown in the picture, only odds datasets label are printed on the screen.

Thank you in advance for any help.

Maybe [this](https://stackoverflow.com/a/54287004/863110) can help — Mosh Feu, Jul 02 '20 at 13:15
Thank you very much!! I will post the result as soon I got it. — ack2v, Jul 02 '20 at 16:33

score 0 · Answer 1 · answered Jul 23 '20 at 20:59

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

How to customize Data Labels of area chart on ChartJS?

1 Answers1