AGamePlayer
AGamePlayer

Reputation: 7736

How to customize the polar chart in this way?

I am using Highcharts 4.0.

This is what I get with the default parameters.

enter image description here

I want to customize it while I can't find the docs.

This is what I expect:

  1. The background polygon can be filled at a specified color/transparency (eg. dark green in this picture)
  2. The valued polygon can be filled at a specified color/transparency (eg. blue in this picture)
  3. The value number can be displayed
  4. The unwanted scale-number (0, 2.5, 5) can be hidden

enter image description here

Upvotes: 0

Views: 273

Answers (1)

Martin Schneider
Martin Schneider

Reputation: 3268

All these options are described in the Highcharts-API-Doc: http://api.highcharts.com/highcharts

1) The background polygon can be filled at a specified color/transparency (eg. dark green in this picture)

This is tricky. You can either try to add a plotBand to the yAxis, but you need to know the max Value, otherwise it will leave a white gap. All the other options (set a background color to the pane or chart.plotBackgroundColor options do not take the shape of the polar chart into account.

yAxis: {
  plotBands: {
    from:0,
    to: 75000,
    color: '#0c0'
  }
}

2) The valued polygon can be filled at a specified color/transparency (eg. blue in this picture)

set the type of the series to 'area', you can then style it either directly in the series or via the plotOptions.series-Object

series: [{
  name: 'Whatever',
  type: 'area',
  data: [...]
}]

[...]

plotOptions: {
  area: {
    fillOpacity: 0.9
  }
}

3) The value number can be displayed

for areas, set the dataLabels.enabled property to true

plotOptions: {
  area: {
    dataLabels: {
      enabled: true
    }
  }
}

4) The unwanted scale-number (0, 2.5, 5) can be hidden

set the labels.enabled property of the yAxis to false

yAxis: {
  labels: {
    enabled: false
  }
}

Fiddle http://jsfiddle.net/doc_snyder/qnqux036/

Upvotes: 2

Related Questions