Search code examples
highcharts

Can highcharts create charts like this?

enter image description here

It's very similar to polar chart with column type, like this one:

enter image description here

But the column type polar chart has gaps between each axis.

Is there any way to remove that gaps and keep the strokes just like the above image?

Update:

  1. How do I add labels to the chart (Just like the "NNE, NE, ENE" in the Wind rose example?
  2. How do I make the y-axis lines curve instead of straight? (below is my highcharts generated chart, it's straight lines) enter image description here
Solution

  • Such a chart is possible to achieve in Highcharts.

    To remove gaps you can use pointPadding and groupPadding properties. To make the ticks between points you need to set pointPlacement: 'between'. And to make the ticks appear above the points, you need to set a larger gridZIndex:

    Highcharts.chart('container', {
  chart: {
    type: 'column',
    polar: true
  },
  title: {
    text: ''
  },
  legend: {
    enabled: false
  },
  pane: {
    startAngle: 0,
    endAngle: 360
  },
  xAxis: {
    min: 0,
    gridZIndex: 4,
    gridLineColor: 'black',
    gridLineWidth: 2,
    lineColor: 'black',
    lineWidth: 2,
    labels: {
      enabled: false
    }
  },
  yAxis: {
    min: 0,
    max: 5,
    tickInterval: 1,
    gridZIndex: 4,
    gridLineColor: 'black',
    gridLineWidth: 2,
    labels: {
      enabled: false
    }
  },
  plotOptions: {
    series: {
      pointPadding: 0,
      groupPadding: 0,
      colorByPoint: true,
      pointPlacement: 'between'
    }
  },
  series: [{
    data: [3, 5, 3, 0, 2, 0, 0, 0, 5, 2]
  }]
});
    <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

    Demo: https://jsfiddle.net/BlackLabel/dsqhno8m/
    API: https://api.highcharts.com/highcharts/series.column.pointPadding
    https://api.highcharts.com/highcharts/series.column.groupPadding
    https://api.highcharts.com/highcharts/series.column.pointPlacement
    https://api.highcharts.com/highcharts/xAxis.gridZIndex