Highcharts Demo

author(s): Torstein Hønsi

by wchmiel

HTML

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

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

JavaScript

Highcharts.Tooltip.prototype.hide = function() {};
Highcharts.addEvent(Highcharts.Axis, 'afterDrawCrosshair', function(event) {
  if (this.cross) {
    $(this.cross.element).detach().insertAfter(this.chart.series[0].group.element);

  }
});
Highcharts.chart('container', {
  chart: {
    events: {
      load: function() {
        var s = this.series;
        var p = [];
        s.forEach(function(v, k) {
          var xAxis = s[0].chart.xAxis[0],
            length = xAxis.labelGroup && xAxis.labelGroup.element.children.length,
            firstIdx = 0,
            categories = xAxis.options.categories,
            lastIdx = length - 1;
          //replacing html of first and last category
          //xAxis.labelGroup.element.children[0].innerHTML = categories[0];
          //xAxis.labelGroup.element.children[length - 1].innerHTML = categories[length - 1];

          for (var i = 1; i < length - 1; i++) {
            if (i !== firstIdx || i !== lastIdx) {
              xAxis.labelGroup.element.children[i].innerHTML = '';
            }
          }
          //show the tooltip
          p.push(v.points[v.points.length - 1]);

        });
        this.tooltip.refresh(p);
        
        
        var $markers0 = $('.highcharts-markers.highcharts-series-0');
        var $markers1 = $('.highcharts-markers.highcharts-series-1');
        
        $markers0.insertAfter($markers1);
        
      },
      redraw: function() {
        var s = this.series;
        s.forEach(function(v, k) {
          var xAxis = s[0].chart.xAxis[0],
            length = xAxis.labelGroup && xAxis.labelGroup.element.children.length,
            firstIdx = 0,
            categories = xAxis.options.categories,
            lastIdx = length - 1;
          //replacing html of first and last category
          xAxis.labelGroup.element.children[0].innerHTML = categories[0];
          xAxis.labelGroup.element.children[length - 1].innerHTML = categories[length - 1];

          for (var i = 1; i <...