HighChart : plot line and plot click event

Question

I am using highchart for some drilldown functions.

In my case I am having a area chart with an onclick event.

I'd like to let the user click on an area plot to add a line and change the chart color. I therefore have two functions: one changing the chart color and one adding a plot line where the user has clicked.

Below is the plot line click event:

chart: {
        type: 'area',
        events: {
        click: function(evt) {
            var xValue = evt.xAxis[0].value;
            var xAxis = evt.xAxis[0].axis;
            $.each(xAxis.plotLinesAndBands,function(){
                if(this.id===myPlotLineId)
                    {
                        this.destroy();
                        }
                });
                xAxis.addPlotLine({
                    value: xValue,
                    width: 1,
                    color: 'red',
                    //dashStyle: 'dash',                   
                    id: myPlotLineId
                    });
                    }
                }               
            },

And this is the color update event, which is inside the plotOptions

  plotOptions: {
            series: {
            point: {
            events: {
                click: function(event) {
                    //selector
                    if(previousPoint){
                        previousPoint.update({ color: '#FFC7C3' });
                        }
                        this.update({ color: '#fe5800' });

                        //drilldown trigger
                         var date = this.category.replace(/\-/g,'')
                         $("#datepicker").click();
                        //put somewhere else not in the custom
                         $("#drilldowndate").html(parseInt(date));

                         $(window).scrollTop(1700);

                         window.setTimeout(function(){
                            $("#trendDrill").click();
                            },500); 

                        window.setTimeout(function(){
                            $("#periodChecker").text($(".ifNoDrill").data("target"));
                            },1000);
                        }               
                    }
                }
            }
        },

And I'd like the addplotline function and the update plot color function both working on the same click, so when the user clicks on the desired area, the chart changes the specific color and a plot line appears.

JS fiddle Demo : http://jsfiddle.net/Xm4vW/70/

Grzegorz Blachliński Grzegorz Blachliński · Accepted Answer · 2016-09-13T11:05:52

You can change add plotLines in your point click event. I have made two functions, one responsible for changing colour of your point (also on hover) and one for adding plotLines:

 var updatePoint = function(point) {
      if (previousPoint) {
        previousPoint.update({
          color: '#7cb5ec',
          marker: {
            states: {
              hover: {
                fillColor: '#7cb5ec',
              }
            }
          }
        });
      }
      previousPoint = point;
      point.update({
        color: '#fe5800',
        marker: {
          states: {
            hover: {
              fillColor: '#fe5800',
            }
          }
        }
      });
    },
    addPlotLine = function(evt) {
      var point = evt.point;
      var xValue = point.x;
      var xAxis = point.series.xAxis;

      Highcharts.each(xAxis.plotLinesAndBands, function(p) {
        if (p.id === myPlotLineId) {
          p.destroy();
        }
      });
      xAxis.addPlotLine({
        value: xValue,
        width: 1,
        color: 'red',
        id: myPlotLineId
      });
    };

You can use this functions inside your click event function:

point: {
  events: {
    click: function(event) {
      updatePoint(this);
      addPlotLine(event);
    }
  }
}

Here you can find an example how it can work: http://jsfiddle.net/Xm4vW/72/

HighChart : plot line and plot click event

1 Answers