Chart.js: chart.options.scales.yAxes[0].ticks.fontColor is not able to be updated v2.7.2

Created on 27 Apr 2018  ·  4Comments  ·  Source: chartjs/Chart.js

Expected Behavior



chart.options.scales.yAxes[0].ticks.fontColor is able to update bar chart y axes ticks font color.

Current Behavior



chart.options.scales.yAxes[0].ticks.fontColor = '#ffffff' and follow by calling chart.update(), doesn't update barchart font color to white color.

Possible Solution


Steps to Reproduce (for bugs)


  1. render a bar chart with blue font color.
  2. upon js trigger event, update the tick font color with chart.options.scales.yAxes[0].ticks.fontColor = '#ffffff'
  3. call chart.update();
  4. nothing happened.
  5. chart.data.datasets[0].backgroundColor works though.

Context



to render a bar chart during page load, when user clicked on change color theme button, update the bar chart with different background color and yaxes tick color

Environment

  • Chart.js version: 2.7.2
  • Browser name and version:
  • Link to your project:
bug

Most helpful comment

codepen reproducing this issue here
If ticks.fontColor is initially undefined, the update works. The same behaviour occurs with ticks.fontSize, but in this case, the layout is adjusted, even though the actual font size is not.

This seems to stem from the issue that default tick options are assigned to ticks.minor initially, but on update, these default options are overridden by the now assigned ticks.minor values. As a workaround, just using ticks.minor.fontColor seems to work.

All 4 comments

codepen reproducing this issue here
If ticks.fontColor is initially undefined, the update works. The same behaviour occurs with ticks.fontSize, but in this case, the layout is adjusted, even though the actual font size is not.

This seems to stem from the issue that default tick options are assigned to ticks.minor initially, but on update, these default options are overridden by the now assigned ticks.minor values. As a workaround, just using ticks.minor.fontColor seems to work.

@veggiesaurus Thanks for posting your code for this. A similar issue with 2.7.3 has been driving me up the wall. I had previously found about half a dozen ways to edit the tick label colors, but they would only work the FIRST time I updated the chart. The ticks.minor code was yet another way to change these colors and it actually updates EVERY time.

Is it just me -- or does the Chart.js init seem fractured and inconsistent? Other than all that confusion, though, it seems to be a decent plugin.

I see this bug is still open, is there any work around?

I tested this on master. If the minor tick formatting is not set at all, updates to the color & font size are respected. https://codepen.io/etimberg/pen/xxbPbbG

Was this page helpful?
0 / 5 - 0 ratings