charts - How to change ChartJS font size with javascript? - Stack Overflow

admin管理员组

文章数量:1336120

I have an array of charts on the page called charts. This is the code I tried to run to make the font change:

for(var x in charts){
    charts[x].options.scales.yAxes[0].ticks.fontSize = 20;
    charts[x].options.scales.xAxes[0].ticks.fontSize = 20;
    charts[x].update();
}

I know that I am correctly reaching the fontSize attribute because in the console it returns the right font size to me. After I change the fontSize, it returns the correct one. For some reason, however, the actual charts aren't updating. Is the chart.update mand only made for updating data?

Note: This question is not a duplicate of the other question that exists about dynamically updating charts with JS because the ChartJS version I am using is 2.7.

I have an array of charts on the page called charts. This is the code I tried to run to make the font change:

for(var x in charts){
    charts[x].options.scales.yAxes[0].ticks.fontSize = 20;
    charts[x].options.scales.xAxes[0].ticks.fontSize = 20;
    charts[x].update();
}

I know that I am correctly reaching the fontSize attribute because in the console it returns the right font size to me. After I change the fontSize, it returns the correct one. For some reason, however, the actual charts aren't updating. Is the chart.update mand only made for updating data?

Note: This question is not a duplicate of the other question that exists about dynamically updating charts with JS because the ChartJS version I am using is 2.7.

• javascript
• charts
• chart.js

Share Follow edited Nov 20, 2017 at 2:35 shurup asked Nov 4, 2017 at 19:33 shurupshurup 88111 gold badge1414 silver badges4040 bronze badges 2

• Which version of chart.js are you using? This person was using version 1 and had your problem but it seems after updating to version 2, they could update the chart options: stackoverflow./questions/38643994/… – earthling Commented Nov 4, 2017 at 21:21
• @earthling I am using 2.7.0 – shurup Commented Nov 4, 2017 at 22:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7 +50

In ChartJS version 2.7.0 or later, changing (dynamically) the font-size of chart axis' ticks by just setting the fontSize property of ticks won't actually apply to the chart. It will only add empty spaces for newly set font-size to the axis'.

In order to change the font-size of chart axis' ticks properly (which would apply to the chart), you will need to set fontSize property for the minor object (under ticks) , like so :

for (var x in charts) {
   // set/change the actual font-size
   charts[x].options.scales.xAxes[0].ticks.minor.fontSize = 20;
   charts[x].options.scales.yAxes[0].ticks.minor.fontSize = 20;

   // set proper spacing for resized font
   charts[x].options.scales.xAxes[0].ticks.fontSize = 20;
   charts[x].options.scales.yAxes[0].ticks.fontSize = 20;

   // update chart to apply new font-size
   charts[x].update();
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var myChart1 = new Chart(ctx1, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         label: 'Profit',
         data: [30, 10, 40, 20, 50],
         backgroundColor: 'rgba(61, 208, 239, 0.2)',
         borderColor: 'rgba(61, 208, 239, 0.6)'
      }]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      }
   }
});

var myChart2 = new Chart(ctx2, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         label: 'Loss',
         data: [50, 20, 40, 10, 30],
         backgroundColor: 'rgba(239, 92, 61, 0.2)',
         borderColor: 'rgba(239, 92, 61, 0.6)'
      }]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      }
   }
});

var charts = [myChart1, myChart2];

function changeFontSize() {
   for (var x in charts) {
      // set/change the font-size
      charts[x].options.scales.xAxes[0].ticks.minor.fontSize = 20;
      charts[x].options.scales.yAxes[0].ticks.minor.fontSize = 20;

      // set proper spacing for resized font
      charts[x].options.scales.xAxes[0].ticks.fontSize = 20;
      charts[x].options.scales.yAxes[0].ticks.fontSize = 20;

      // update chart to apply new font-size
      charts[x].update();
   }
}

<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>

<button onclick="changeFontSize();">Change Font Size</button>
<canvas id="ctx1"></canvas>
<canvas id="ctx2"></canvas>

本文标签： chartsHow to change ChartJS font size with javascriptStack Overflow