Search code examples
angularhighchartsangular2-highcharts

Highcharts : y axis value is not binding properly

Trying to bind some defined values in Y axis of the highchart . but it's showing the first value from the array correctly . remaining are coming incorrectly .

enter image description here

 chartOptionsLine: any = {
    yAxis: {
      categories: ['1 ms', '5 ms', '10 ms', '15 ms'],
      title: {
        enabled: true,
        text: ''
      }
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false,
          states: {
            hover: {
              enabled: false
            }
          }
        }
      }
    },
    legend: {
      enabled: false
    },
    xAxis: {
      categories: ['12 am', '1 am', '2 am', '3 am'],
      title: {
        enabled: true,
        text: ''
      }
    },
    title: {
      floating: true,
      text: "",
    },
    series: [
      {
        name: 'Server',
        type: "line",
        color: '#FF0000',
        data: [9, 7, 3, 9]
      },
      {
        name: 'Success',
        type: "line",
        color: '#3f9546',
        data: [4, 2, 8, 4]
      }
    ]
  };
Solution

  • Instead of categories, use tickPositions and labels format. Categories are just strings and each next has a value of +1.

      yAxis: {
    tickPositions: [1, 5, 10, 15],
    labels: {
        format: '{value} ms'
    },
    ...
  }

    Live demo: https://jsfiddle.net/BlackLabel/xbnwtk38/

    Docs: https://www.highcharts.com/docs/chart-concepts/axes#ticks