CODEWITHSUNDEEP
highchartsreact-highcharts
Tarik Sahni
Tarik Sahni

Reputation: 168

HighCharts Polar Labels in between of sectors of circle

I am working ReactHigh charts on polar graphs, I want my labels to come in between the sectors of the circle, they are coming on points but i dont want them to come there.

JSfiddle : https://jsfiddle.net/ra73mp0c/12/

Also I want a background color on each of the labels. Graph as of now : enter image description here

Desried Outcome :

enter image description here

Please help me .

Config of graph :

    const config = {
      chart: {
       polar: true,
       type: 'line',
        width: 700,
       backgroundColor: 'transparent',
      plotBorderWidth: null,
       margin: [0, 0, 0, 0],
      spacingTop: 0,
       spacingBottom: 0,
        spacingLeft: 0,
      spacingRight: 0

  },

  title: {
    text: null
  },

  pane: {
    size: '80%'
  },

  xAxis: {
    categories: [
      'Sales',
      'Sales',
      'Sales',
      'Sales',
      'Marketing',
      'Development',
      'Customer Support',
      'Customer Support',
      'Customer Support',
      'Information Technology'
    ],
    labels: {
      style: {
        fontSize: '13px',
        fontFamily: 'Verdana, sans-serif'
      }
    },
    tickmarkPlacement: 'on'
  },

  yAxis: {
    gridLineInterpolation: 'polygon',
    min: 0,
    tickInterval: 1,
    max: 6
  },

  tooltip: {
    shared: true
  },

  legend: {
    enabled: false
  },
  credits: { enabled: false },
  series: [
    {
      name: 'Allocated Budget',
      data: [1, 2, 3, 1, 4, 3, 1, 2, 4, 1],
      pointPlacement: 'between'
    },
    {
      name: 'Actual Spending',
      data: [2, 4, 2, 1, 3, 4, 2, 2, 1, 4],
      pointPlacement: 'between'
    }
  ]
}

Thanks a lot, It would be helpful ig you can edit the fiddle Link https://jsfiddle.net/ra73mp0c/12/

Upvotes: 1

Views: 478

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

Creating that kind of background for x axis labels is not supported in Highcharts.

As a workaround you can create a phantom series that mimics their look:

{
  showInLegend: false,
  type: 'polygon',
  name: 'Labels background',
  data: [
    [1, 5],
    [2, 5],
    [2, 6],
    [1, 6]
  ],
  zIndex: -9999
}

labels.distance should be a negative value to make it work.

Demo: https://jsfiddle.net/BlackLabel/63nc1csv/

Upvotes: 1

Related Questions