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 + ' 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 = '' +;
	     turboThreshold: 0

Export on the client side

<script src=""></script>
<script src=""></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=""></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
Data scientist, bioinformatician, retro fan and web lover.
comments powered by Disqus