CODEWITHSUNDEEP
highcharts
MEM
MEM

Reputation: 31337

Highcharts - How to Highlight a specific portion of a line graph?

enter image description here

Does anyone know if we can achieve something like this in Highcharts? We wish that a certain rectangular area gets highlighted when the user mouseover the charts.

Did anyone accomplish something similar before that may help us here?

Thank you.

Upvotes: 0

Views: 489

Answers (2)

morganfree
morganfree

Reputation: 12472

You can use renderer to render any shape on mouseover and hide it on mouseleave. Positioning rendered shapes require some calculation/coding but it gives you total freedom.

From the picture you posted, you can also use an easier approach, not the most elegant, but it is fast in getting the result. Create a hidden series, specify the points which will define the area and show/hide it on events.

    series: [{
  data: [5, 10, 15, 10, 5],
  color: 'rgba(0,0,200, 0.2)',
  states: {
    hover: {
      enabled: false
    }
  }
}, {
  id: 'h1',
  data: [
    [1, 10], {
      x: 2,
      y: 15,
      marker: {
        enabled: true,
        fillColor: 'black',
        symbol: 'circle'
      }
    },
    [3, 10]
  ],
  marker: {
    enabled: false
  },
  linkedTo: 's1',
  visible: false,
  enableMouseTracking: false
  }],

example: http://jsfiddle.net/9L4e328j/

Upvotes: 1

Rambler
Rambler

Reputation: 5482

I haven't tried this , but you can try something like this to get the desired result :

 tooltip: {
        formatter: function() {
            //resetting state
            for(i=0;i<this.series.data.length;i++){
                this.series.data[i].setState(); 
            }
            var index=this.series.data.indexOf( this.point )
            //setting state on the current,previous,next point
            this.series.data[index].setState('hover');
            this.series.data[index-1].setState('hover');
            this.series.data[index+1].setState('hover');
            return "your tooltip";
        }
     }

Upvotes: 0

Related Questions