CODEWITHSUNDEEP
fontschart.jslegend
schlebe
schlebe

Reputation: 3716

Chart.js v3: How can I grow fontsize of legend of my graph?

I migrated Chart.js HTML page from version 2.7 to 3.4 and only one problem is remaining.

The font's size of legends cannot be changed.

I tried following code

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.0.2/chartjs-plugin-annotation.min.js"></script>

            legend:
                { font: { size: 80 }
                , title: 
                    { display: true
                    , font: { size: 80 }
                    , color: 'Green'
                    }
                ,labels:
                    { font: { size: 80 }
                    , color: 'Green'
                    }             
                },

but font's size doesn't change !

What can I do so that legend font's size is bigger ?

In image below, you can see legends (k=1, k=2, ..., k=8) of my graph.

enter image description here

Upvotes: 0

Views: 1796

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31351

I assume you have your options for the legend in the wrong place:

As described in the migration guide the legend,plugin tooltip and title have been moved to the plugin section.

Example:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          font: {
            size: 30
          }
        }
      }
    }
  }
}

var 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.4.0/chart.js"></script>
</body>

Upvotes: 4

Related Questions