Some notes on using Highcharts

On adding datalabels, loading >1000 data points, link points to URLs, etc.

To add datalables (can be self-defined)

    series: [{
        name: 'First track',
        color: '#3399ff',
	lineWidth: 2.2,
	dataLabels: {allowOverlap: true},
        data: [{y: 28.5, dataLabels: {enabled: true, format: "Label1: {point.y:.2f}", color: '#3399ff'}},{y: 101.3, dataLabels: {enabled: true, format: "Label2: {point.y:.2f}", color: 'black'}}]
    }]

or define label format

	    dataLabels: {
		enabled: true,
		format: '{point.y:.2f}'
	    },

Tooltip number format

    tooltip: {
         formatter: function () {
            return this.series.name + ' in ' + this.x + ': ' + Highcharts.numberFormat(this.y,2);
         }
    },

Transpose csv

    data: {
         csv: csv,
	 switchRowsAndColumns: true
    },
       plotOptions: {
	 scatter: {
	     marker: {
		radius: 3,
		symbol: 'circle',
		fillColor: this.x > 2 ? "red" : "grey"  //currently not working
	     },
	     cursor: 'pointer',
	     point: {
	        events: {
	            click: function () {
	                location.href = 'http://google.com/' + this.options.name;
	            }
	        }
	     },
	     turboThreshold: 0
	 }
       },

Export on the client side

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

To load more data points

By default Highcharts can only chart max. 1000 data points, if you want to load more use:

turboThreshold: 0

in the plotOptions part (as shown above).

If you have many many data and you want to speed up the loading, you can use the boost module:

<script src="https://code.highcharts.com/modules/boost.js"></script>

Next I would like to set point color according to their x and y values, and try to change the data using a button/dropdown list.

Z. Lu avatar
Z. Lu
Computer biologist, amature photographer, vintage fan and web lover.
comments powered by Disqus