Highchart Scatter plot

Using categories at xAxis

by Rishabh Shah

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>

TypeScript

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;
});

 var drawEllipse = function(chart) {
        // get pixel coordinates of rect
        var point = chart.series[0].points[3];

        // remove previous ellipse
        var rectClass = 'operating-point-ellipse';        

        // draw ellipse using rect()
        chart.renderer.rect(point.plotX - 30, point.plotY - 40, 85, 42, '100%')
            .attr({
                'stroke-width': 1,
                'stroke': '#ea8a34',
                'fill': 'transparent',
                'fill-opacity': 0.2,
                'zIndex': 0
            })
            .addClass(rectClass)
            .add();
    };




Highcharts.chart('container', {

    chart: {
        polar: true,
        type: 'scatter',
        events: {
       	load: function() {
						drawEllipse(this);
					}
				}
    },

    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,
        showLastLabel: true,
        tickWidth: 1,
       ...