Chartjs-Chart.js Line chart legend label font size doesn't work

by

0👍

✅

labels is needed!

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My Chart</title>
</head>
<body>
  <canvas id="my_chart">
    Canvas not supported...
  </canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
  <script>
    (function() {
      'use strict';

      var type = 'line';

      var data = {
        labels: [2019, 2020, 2021, 2022],
        datasets: [{
          label: 'Tom',
          data: [120, 350, 250, 210],
          borderColor: 'red',
          borderWidth: 5,
          fill: false,
          lineTension: 0,
          pointStyle: 'rect'
        }, {
          label: 'Jim',
          data: [180, 200, 300, 500],
          borderColor: 'blue',
          borderWidth: 5,
          fill: false,
          backgroundColor: 'rgba(0, 0, 255, 0.3)',
          lineTension: 0,
          pointStyle: 'triangle'
        }]
      };

      var options = {
        scales: {
          yAxes: [{
            ticks: {
              suggestedMin: 0,
              suggestedMax: 400
            }
          }]
        },
        legend: {
          position: 'right',
          labels: {
            fontSize: 100,
          }
        }
      };

      var ctx = document.getElementById('my_chart').getContext('2d');
      var myChart = new Chart(ctx, {
        type: type,
        data: data,
        options: options
      });
    })();
  </script>
</body>
</html>

Leave a comment