Some notes on using Highcharts

To add datalables (can be self-defined)

1
2
3
4
5
6
7


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

1
2
3
4


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

1
2
3
4
5


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

Transpose csv

1
2
3
4


data: {
     csv: csv,
     switchRowsAndColumns: true
},

To add a link to the scatter point

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


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

Export on the client side

1
2


<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:

1

<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.