Highcharts Demo - JSFiddle - JSFiddle - JSFiddle

author(s): Torstein Hønsi

HTML

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

<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px">

</div>
<h1>
Just the Error Bars</h1
</h1>
<div id="container_error" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'scatter',
    zoomType: 'xy',
    events: {
      drilldown: function(e) {
        console.log(e);
        console.log(this);
        this.addSingleSeriesAsDrilldown(e.point, e.seriesOptions);
        this.addSingleSeriesAsDrilldown(e.point, this.options.series[1]);
        this.applyDrilldown();
      }
    }
  },
  title: {
    text: ' Accuracy/AT'
  },
  subtitle: {
    text: ''
  },
  xAxis: {
    min: 0,
    max: 100,
    title: {
      enabled: true,
      text: '% Match to original macro'
    },
    startOnTick: true,
    endOnTick: true,
    showLastLabel: true
  },
  yAxis: {
    min: 0,
    max: 100,
    title: {
      text: 'box'
    }
  },
  legend: {
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
    borderWidth: 1
  },
  plotOptions: {
    scatter: {
      marker: {
        radius: 5,
        states: {
          hover: {
            enabled: true,
            lineColor: 'rgb(100,100,100)'
          }
        }
      },
      states: {
        hover: {
          marker: {
            enabled: false
          }
        }
      },
      tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '<strong>{point.name}</strong> <br>{point.x} Match <br>{point.y} CSAT'
      }
    },
    errorbar: {
      tooltip: {
        pointFormat: '(CSAT Error Range: {point.low}-{point.high}%)<br/>'
      }
    }
  },
  series: [{
    name: 'Macro matches',
    colorByPoint: true,
    data: [{
      name: '< 25%  Macro Match',
      x: 3.63,
      y: 59.94,
      color: '##CC3300',

      drilldown: '< 25%  Macro Match'
    }, {
      name: '25%-50% Macro Match',
      x: 38.44,
      y: 49.62,
      color: '#FF9933',

      drilldown: '25%-50% Macro Match'
    }, {
      name: '50%-75% Macro Match',
      x: 62.50,
      y: 57.45,
      color: '#33FF00',

      drilldown: '50%-75% Macro Match'
    }, {
      name: '>75%  Macro  Match',
     ...