Highcharts Demo

author(s): Torstein Hønsi

by Torstein Hønsi

HTML

<script src="http://code.highcharts.local/highcharts.js"></script>
<script src="http://code.highcharts.local/highcharts-more.js"></script>


<div id="container-polar_with_cat" style="height: 400px"></div>

<div id="container-line" style="height: 400px"></div>
<div id="container-polar" style="height: 400px"></div>

JavaScript

$(document).ready(function() {

    var data = [],
        names = [];


    for (var i = 0; i < 100; i++) {
        names.push("name" + i);

        data.push({
            x: i,
            name: "name" + i,
            y: (Math.random() * 100)
        });
    }

    $('#container-line').highcharts({
        chart: {
            type: 'line',
            polar: false
        },
        title: {
            text: 'Line Chart - hidden overlapping axis label'
        },
        xAxis: {
            categories: names,
            labels: {
                formatter: function() {
                    return this.value;
                }
            }
        },
        series: [{
            type: 'column',
            data: data
        }]

    });



    $('#container-polar').highcharts({
        chart: {
            type: 'line',
            polar: true
        },
        title: {
            text: 'Polar Chart - hidden overlapping axis label (with out category)'
        },
        xAxis: {
            categories: undefined,
            labels: {
                allowOverlap: true,

                formatter: function() {
                    return this.value;
                }
            }
        },
        series: [{
            type: 'column',
            data: data
        }]

    });



    $('#container-polar_with_cat').highcharts();

});