Highcharts Polar Chart - Specify Data Series & Tooltips for each Axis

Question

I've cobbled together (fiddle: http://jsfiddle.net/quint/wjveuLL3/1/), from other forum posts, the following polar chart. It has 5 axes (Round 1, Round 2, ...) with 5 points on each axis. The manner in which the series has been specified in the code, I believe, is incorrect; however, what shows in the chart is very close to the end product. How does one specify each data series to plot points on each axis? How could I customize each point on each axis (color, size, for example)?

Primary Objective: The user is able to hover over each point which will show additional data for that point in that Round. (Assume I have a JSON object containing the data for each data point for each round)

FYI: The following is an earlier version that shows the color and size customization of the points on the chart (http://www.onlinecharttool.com/graph/image/51d9384b43aa). Everything else in the image is not relevant.

Any direction would be much appreciated. Thank you!

$(function () {

var NumIndices = 5
var Increment = Math.round(360/NumIndices)
var Axis = [0, 
             Increment, 
             2*Increment,
             3*Increment,
             4*Increment,
             ];
var Indicator1 = 'Round 1';
var Indicator2 = 'Round 2';
var Indicator3 = 'Round 3';
var Indicator4 = 'Round 4';
var Indicator5 = 'Round 5';

$('#container').highcharts({

    chart: {
        polar: true
    },

    title: {
        text: 'Highcharts Polar Chart'
    },

    pane: {
        startAngle: 0,
        endAngle: 360
    },

    xAxis: {
        tickInterval: 72,
        min: 0,
        max: 360,
        labels: {
            formatter: function () {
                switch (this.value) {
                   case Axis[0]:
                        return Indicator1;
                        break;
                   case Axis[1]:
                        return Indicator2;
                        break;
                   case Axis[2]:
                        return Indicator3;
                        break;
                   case Axis[3]:
                        return Indicator4;
                        break;
                   case Axis[4]:
                        return Indicator5;
                        break;
                                        default:
                        console.log('xAxis oops...');
                        break;
                 }
            }
        }
    },

    yAxis: {
            tickInterval: 1,
        labels: {
                enabled: false
                },
        min: 0,
        max: 5,
    },

    plotOptions: {
        series: {
            pointStart: 0,
            pointInterval: 72
        },
    },

    series: [
        {
            type: 'line',
            name: 'Line',
            lineWidth : 0,
                marker : {
                    enabled : true,
                    radius : 5
                },
            data: [1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4 , 5, 5, 5, 5, 5]
        }, 
    ]
});

});

Kacper Madej Kacper Madej · Accepted Answer · 2016-01-12T13:33:08

Data points are defined in data of a series. This is where you can customize each point. See Docs for more info: http://www.highcharts.com/docs/chart-concepts/series#point

More data in tooltip can be added using formatter. Example: http://jsfiddle.net/j86jkfvj/ API: http://api.highcharts.com/highcharts#tooltip.formatter

From the chart image you posted it seems that you might want to use a bubble chart in a polar chart. Example: http://jsfiddle.net/ZYKQG/ (Similar question: Is it possible to create a bubble polar chart with Highcharts?)

Highcharts Polar Chart - Specify Data Series & Tooltips for each Axis

1 Answers