user626920
user626920

Reputation: 55

Change text size of all point on a line chart in Chart.js 3.x version

I want to change the text size of a all point on a line chart in Chart.js. my code:

              const config = {
            type: 'line',
            pointDot: false,
            pointLabelFontSize: 20,
            data: data,
            plugins: [ChartDataLabels],
            options: {

            
                plugins: {
                        
                      legend: {
                        
                        labels: {
                          
                          font: {
                            size: 30
                          }
                        }
                      },
                      datalabels: {
                            align: 'top',
                            anchor: 'end'
                        }
                    },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Prezzo',
                            font: {
                                size: 30
                              }
                        },
                        ticks: {
                            font: {
                                size: 22,
                            }
                        }
                    },
                    y: {
                      title: {
                        display: true,
                        text: 'Capitale',
                      font: {
                          size: 30
                        }
                      },

                  ticks: {
                    font: {
                        size: 22,
                    }
                }
        
                    }
                },
          
            }
          };

const myChart = new Chart( document.getElementById('myChart'), config );

I searched this forum and read the documentation, but couldn't. I need an example. Thank you

enter image description here

Upvotes: 0

Views: 278

Answers (1)

user2057925
user2057925

Reputation: 2653

You could change the font options of DataLabels plugin.

datalabels: {
  font: {
    size: 30
  },
  align: 'top',
  anchor: 'end'
}

Upvotes: 1

Related Questions