[Chartjs]-How to change font size, padding of chart title only, in chart.js 3.x

by

5👍

The Title options have evolved quite a bit in v2 of Chartjs. I found that the title was hidden entirely until I added padding – for one example

options: {
      plugins: { 
        title: {
          display: true, 
          text: "Title" ,
          padding: {
              top: 10,
              bottom: 10
          },
          font: {
            size: 24,
            style: 'italic',
            family: 'Helvetica Neue'
          }
        }
      },
      ... other options here
}

0👍

The reason it didn’t help is because you are looking at the docs for version 2.8.0 as you can see in the url, the latest version is 3.6.2 and has some breaking changes against v2.

To adjust the font propertys you will need to define them in the font object in the title config like so:

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      }
    ]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Number of SS vs Number of Trucks',
        font: {
          size: 30
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>

latest V3 documentation: https://www.chartjs.org/docs/latest/

Leave a comment