Chart.js displays the label in a weird font in IE8

Question

How can I find the font used in Chart.js?

I have tried to look in the documentation and see a family of fonts, but I am not sure which font is exactly used.

Answer 1

The fontFamily config option is available for different components, and you can use that to change the font to something you know works in IE.

Based on the documentation, it seems like the default font is "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif".

I've created a JSFiddle that demonstrates changing the font for the three components mentioned below: https://jsfiddle.net/nva5hwLp/

Ticks

options: {
  scales: {
    xAxes: [{
      ticks: {
        fontFamily: 'Times New Roman'
      }
    }]
  }
}

See the Axes Labeling documentation for more information and font styling options. It seems like the documentation currently suggests placing the fontFamily config under a key called scaleLabel, however it only works if you put it under the ticks section.

Legend

options: {
  legend: {
    labels: {
      fontFamily: 'Times New Roman'
    }
  }
}

See the Fonts documentation for more information. Currently, the documentation says to use defaultFontFamily, however it seems to only work when you use fontFamily.

Title

options: {
  title: {
    text: 'something',
    display: true,
    fontFamily: 'Times New Roman'
  }
}

See the Title config documentation for more information.