0

I have created a pretty good ChartJS system but am having trouble with breaking the extra x-axis labels and title font details. They same to want to be the same for some reason.

First of all, the solution I got help with is here: SO answer

The charts look okay like so:

enter image description here

As you can see the title and addition x-axis label are both the same font size. This occurs due to the configuration options of:

        // context.xAxes.font 
        context.font = this.config.get("chart.axis.font");
        context.fontSize = 100;

        context.fillStyle = this.config.get("chart.axis.font.color");
        context.textAlign = 'center';
        context.fillText(line, x, y);

I have the configuration options setup this way:

                    title: {
                        display: true,
                        fontSize: 10,                           
                        text: this.options.title,
                        padding: titlePadding,         
                    },

I have no idea why the fillText is working for both title and extra categories.

cdub
  • 24,555
  • 57
  • 174
  • 303

1 Answers1

1

As far as I know, there's no fontSize property on the canvas rendering context. You should use its font property instead to specify weight, size, and family of the font.

Please take a look at the runnable code snippet provided in this answer.

uminder
  • 23,831
  • 5
  • 37
  • 72