Highcharts test tool

by Black Label

HTML

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


<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

Highcharts.chart('container', {
  series: [{
    type: 'scatter',
    lineWidth: 2,
    data: [
      [0, 38.6],
      [0, 49.8],
      [1, 39.2],
      [1, 41.1],
      [1, 46.6],
      [2, 44]
    ],
    color: '#004191',
    showInLegend: false,
    name: 'price',
    threshold: 40,
    negativeColor: '#F34336',
    marker: {
      enabled: true,
      radius: 3,
      symbol: 'circle',
    },
  }, ],
  title: {
    text: '',
  },
  xAxis: {
    title: {
      text: 'Days',
    },
    categories: ["16-Jan", "15-Jan", "14-Jan"],
  },
  tooltip: {
    headerFormat: '<span style="font-size: 0.8em">{point.key}</span><br/>',
    pointFormatter() {
      let pointFormat = '',
      hoveredPoint = this;

      this.series.points.forEach(point => {
        if (point.x === hoveredPoint.x) {
          pointFormat += `<span style=\"color:${point.color}\">●</span> ${point.series.name}: <b>${point.y}</b><br/>`
        }
      })
      return pointFormat
    }
  },
  yAxis: {
    title: {
      text: 'price',
    },
    gridLineWidth: 1,
    min: 10,
    max: 100,
    tickPixelInterval: 35,
  }
});
console.log(Highcharts.charts[0].options.tooltip)