Ticks with Min and Max

[Leah]

Hello,

I have the following chart with the min set to 0 and the max set to 5. However when I run it the y axis is going from 0 to 6?

If I turn off the endOnTick it gives me a y axis from 0 to 4, with a little space above.

Is there a way to force it to make the ticks work with the min and max, so it would give me ticks ending at 5?

I do not want to manually set the ticks as I do not know exactly what the chart will be sent from our API.

Code: Select all

    this.options = {
      chart: {
        height: 300,
      },
      title: {
        text: ''
      },
      xAxis: {
        title: {
          text: 'xAxis'
        },
        categories: ['Cat A', 'Cat B', 'Cat C', 'Cat D', 'Cat E']
      },
      yAxis: {
        min: 0,
        max: 5,
        endOnTick: true,
        title: {
          text: 'yAxis'
        }
      },
      series: [
        {
          type: 'line',
          name: '2020',
          data: [4.67, 3.5, 3.75, 3.83, 3.66]
        },
        {
          type: 'line',
          name: '2021',
          data: [2.5, 3.75, 3.3, 3.69, 3.64]
        },
        {
          type: 'line',
          name: '2022',
          data: [3.5, 4, 2.55, 2.17, 3.82]
        },
        {
          type: 'line',
          name: '2023',
          data: [3.67, 4.33, 3.25, 3.79, 4.35]
        }
      ]
    };

[Leah]

Here is another example with the y axis min/max set to 1 to 5.

On the first chart with startOnTick and endOnTick set to true it's giving me 0 to 6?

On the second chart with startOnTick and endOnTick set to false it's giving me 2 to 4?

How can I force it to give 1 to 5?

Code: Select all

    this.options1 = {
      chart: {
        height: 250,
      },
      title: {
        text: ''
      },
      xAxis: {
        title: {
          text: 'xAxis'
        },
        categories: ['Cat A', 'Cat B', 'Cat C', 'Cat D', 'Cat E']
      },
      yAxis: {
        min: 1,
        max: 5,
        startOnTick: true,
        endOnTick: true,
        title: {
          text: 'yAxis'
        }
      },
      series: [
        {
          type: 'line',
          name: '2020',
          data: [4.67, 3.5, 3.75, 3.83, 3.66]
        },
        {
          type: 'line',
          name: '2021',
          data: [2.5, 3.75, 3.3, 3.69, 3.64]
        },
        {
          type: 'line',
          name: '2022',
          data: [3.5, 4, 2.55, 2.17, 3.82]
        },
        {
          type: 'line',
          name: '2023',
          data: [3.67, 4.33, 3.25, 3.79, 4.35]
        }
      ]
    };
    this.options2 = {
      chart: {
        height: 250,
      },
      title: {
        text: ''
      },
      xAxis: {
        title: {
          text: 'xAxis'
        },
        categories: ['Cat A', 'Cat B', 'Cat C', 'Cat D', 'Cat E']
      },
      yAxis: {
        min: 1,
        max: 5,
        startOnTick: false,
        endOnTick: false,
        title: {
          text: 'yAxis'
        }
      },
      series: [
        {
          type: 'line',
          name: '2020',
          data: [4.67, 3.5, 3.75, 3.83, 3.66]
        },
        {
          type: 'line',
          name: '2021',
          data: [2.5, 3.75, 3.3, 3.69, 3.64]
        },
        {
          type: 'line',
          name: '2022',
          data: [3.5, 4, 2.55, 2.17, 3.82]
        },
        {
          type: 'line',
          name: '2023',
          data: [3.67, 4.33, 3.25, 3.79, 4.35]
        }
      ]
    };

[jakub.s]

Hi,

Thanks for the question.

In your example, tickInterval = 2 which means that each tick on the yAxis is a multiple of 2. That's why 5 doesn't show as a tick.

If you reduce tickInterval to 1 then you'll have 5 as the maximum tick.

Here's a demo: https://jsfiddle.net/BlackLabel/41gbkyad/

API: https://api.highcharts.com/highcharts/y ... ckInterval

Let me know if you have any more questions!

Best regards,
Jakub