Highcharts Demo

author(s): Torstein Hønsi

by Torstein Hønsi

HTML

<script src="https://github.highcharts.com/highcharts.js"></script>

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

CSS

#container {
	width: 800px;
	margin: 0 auto;
}

JavaScript

// Create some smooth demo data
var sine = [];
for (var x = 0; x <= 60; x++) {
    sine.push({
        x: x,
        y: Math.sin(x * Highcharts.deg2rad)
    });
}

// Explicitly add a marker on the last point
sine[sine.length - 1].marker = { enabled: true };


Highcharts.chart('container', {

    chart: {
        zoomType: 'x'
    },

    title: {
        text: 'Highcharts marker <em>enabledThreshold</em>'
    },

    subtitle: {
        text: 'Preventing too close markers for continuous data'
    },

    xAxis: {
        tickInterval: 30,
        labels: {
            format: '{value} deg'
        }
    },

    plotOptions: {
        series: {
            marker: {
                enabledThreshold: 5
            }
        }
    },
    
    legend: {
    	align: 'right',
      layout: 'vertical',
      verticalAlign: 'middle'
    },

    tooltip: {
        headerFormat: '<b>{point.x} degrees</b><br>'
    },

    series: [{
        data: sine,
        name: 'Sine'
    }]
});