Highchart Scatter plot

Using categories at xAxis

by Black Label

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 700px; height: 400px; margin: 0 auto"></div>

JavaScript

var H = Highcharts;

H.wrap(H.Tick.prototype, 'getMarkPath', function(
    proceed,
    x,
    y,
    tickLength,
    tickWidth,
    horiz,
    renderer
) {
    var axis = this.axis,
        endPoint,
        ret;

    if (axis.isRadial) {
        endPoint = axis.getPosition(
            this.pos,
            axis.center[2] / 2 + tickLength
        );

        ret = [
            'M',
            x,
            y,
            'L',
            endPoint.x,
            endPoint.y - 5
        ];
    } else {
        ret = proceed.call(
            this,
            x,
            y,
            tickLength,
            tickWidth,
            horiz,
            renderer
        );
    }
    return ret;
});




Highcharts.chart('container', {

    chart: {
        polar: true,
        type: 'scatter'
    },

    title: {
        text: 'Hight Charts Example',
        x: -80
    },

    pane: {
        size: '80%',
        background: [{
            backgroundColor: '#ECF4F9',
            outerRadius: '100%'
        }]
    },

    xAxis: [{
        categories: ['45', 'ATR', '0', 'ATR',
            '135', 'WTR', '90', 'WTR'
        ],
        tickmarkPlacement: 'on',
        lineWidth: 1
    }],

    yAxis: {
        lineWidth: 1,
        tickPosition: 'inside',
        showLastLabel: true,
        tickWidth: 1,
        tickColor: '#000000',
        angle: 90,
        tickInterval: 1,
        labels: {
            y: -10
        },
        lineColor: '#000000'
    },

    legend: {
        enabled: false
    },


    series: [{
        name: 'Patients Data',
        data: [0.3, 0, 4.5, 2.4, 3.4, 2, 4],
        pointPlacement: 'on'
    }, {
        data: [1, 3, 4, 5, .5, 5, 0.7, 3],
        pointPlacement: 'between',
        color: '#FF0000'
    }]

});