CODEWITHSUNDEEP
javascripthighcharts
gan dalf
gan dalf

Reputation: 3

Highchart changing crosshair color depending on value of y-axis

I want to change the colour of the crosshair depending on the value. I am doing this, but it isn't working.

xAxis: {
            type: 'datetime',
            crosshair: {
            threshold: 1,
            negativeColor: 'green',
            color: 'red',
            width: 1.5,
            snap: false
            }

So i wanted the color of the crosshair to be green if the value of the y-axis is less than 1. But it isnt working. any help is appreciated.

Upvotes: 0

Views: 409

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

The options which you have tried to set doesn't exist in the API - https://api.highcharts.com/highcharts/xAxis.crosshair.color

I think that the easiest way to achieve it is by using the className property and changing crosshair style dynamically in the tooltip.formatter callback.

Demo: https://jsfiddle.net/BlackLabel/be9jqh6s/

  tooltip: {
    formatter(tooltip) {
      let chart = this.series.chart,
        crosshair = document.getElementsByClassName('custom-crosshair');

      if (crosshair[0]) {
        if (this.x > 4) {
          crosshair[0].style.stroke = 'green'
        } else {
          crosshair[0].style.stroke = '#cccccc'
        }
      }
      return tooltip.defaultFormatter.call(this, tooltip);
    }
  },

API: https://api.highcharts.com/highcharts/tooltip.formatter

Upvotes: 1

Related Questions