Search code examples
javascripthighcharts

I want to label all the intersection points of the x-axis and y-axis with numbers in Highcharts radar chart

enter image description here
like picture

make up the number of words.make up the number of words.make up the number of words.make up the number of words.make up the number of words.make up the number of words.make up the number of words.

Solution

  • I think the easiest way to achieve that will be by using extra yAxes.

    Based on the following code example, define your yAxis and add additional axes that will be linked to them. Define the angle of each new axis as well.

    Highcharts.chart('container', {
  chart: {
    polar: true,
  },
  yAxis: [{
    tickInterval: 2,
    min: 0,
    max: 6,
  }, {
    linkedTo: 0,
    angle: 46,
  }, {
    linkedTo: 0,
    angle: 90,
  }],

  series: [{
    data: [1, 2, 3, 4]
  }]
});

    Demo: https://jsfiddle.net/BlackLabel/3n4c8msg/

    API Reference: https://api.highcharts.com/highcharts/yAxis.angle

    EDIT:

    In the case of the "spider" polar, it will be necessary to set the gridLineWidth: 0 for each additional axis.

    https://jsfiddle.net/BlackLabel/5dno4fyk/