1

I have an angular2-highcharts chart. I want to highlight select lines of a data series based on which line is clicked. I am using the following piece of code to do so and I get an error saying

Cannot read property 'series' of undefined.

I have my series predefined, it has name, data, color and width elements. 

this.options={
    title : { text : 'Sample' },
    legend:{enabled:false},
    plotOptions:{
        series:{
            events:{
                mouseOver:function(){
                var m=this.series.options.id;
                var abc=series;
                var new_series=[];
                for(var i=0;i<abc.length;i++)
                    {abc[i].color='black';}
                abc[m].color='red';
                for(var i=0;i<chart.series.length;i++)
                    {chart.series[i].remove();
                    new_series.push({name:abc[i].name,data:abc[i].data,color:abc[i].color})
                    } 
                chart.addSeries(new_series,false);
                chart.redraw();

                }
            }
        },
    },

    series:series,
    xAxis:{title:{text:'X'}},
    yAxis:{title:{text:'Y'}},
}

$('#conatainer').highcharts(this.options)
var chart=$('#conatainer').highcharts();

I am guessing the error is in the way the chart has been referenced. I was not sure how to reference it in typescript and looked up a few examples in java script to do so.

It would very helpful to know how to correct this.

Deep 3015
  • 9,929
  • 5
  • 30
  • 54
Vysh
  • 718
  • 1
  • 7
  • 20
  • 1
    And what about chart parameter? I don't see that you have defined it in your options before making your chart. and if you are using chart.series and chart is undefined, it will cause the error. – Grzegorz Blachliński Aug 26 '16 at 10:05

1 Answers1

0

You can achieve series highlight on click using angular2-highcharts

class AppComponent {
    constructor() { 
        this.options = {
            title : { text : 'simple chart' },
            plotOptions:{
                      series:{
                          events: {
                      click: function(e) {

                        let series=this.chart.series;
                        for(let i=0;i<series.length;i++){

                          if(i==this.index){
                             this.chart.series[i].options.color = "#008800";
                             this.chart.series[i].update(this.chart.series[i].options);
                          }else{

                          this.chart.series[i].options.color = "#7cb5ec";
                          this.chart.series[i].update(this.chart.series[i].options);
                          }

                        }

                      }
                    },
                },
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129],
                color : "#7cb5ec"
            },{
                data: [19.9, 21.5, 6.4, 29],
                color : "#7cb5ec"
            },{
                data: [10.9, 15.5, 30.4, 45],
                color : "#7cb5ec"
            }]
        };
    }
    options: Object;

}

Plunker

Deep 3015
  • 9,929
  • 5
  • 30
  • 54