CODEWITHSUNDEEP
javascripthighcharts
Poles
Poles

Reputation: 3682

If a point is clicked then add a marker in highcharts

I want to add a maker when a point is clicked same like alerting a selected point...the code for selecting a point :

cursor: 'pointer',
            events: {
                click: function(event) {
                    alert('x: ' + event.xAxis[0].value+' y: '+event.yAxis[0].value);
                }
            }},

Now what should I write in place of alert to mark the point when it is clicked?

Upvotes: 0

Views: 3244

Answers (3)

Strikers
Strikers

Reputation: 4776

instead of click event for this you can use marker states

plotOptions > series > marker > states > select > radius: 10

  plotOptions: {
    series: {
      allowPointSelect: true,
      marker: {
        radius: 1,
        states: {
          select: {
            radius: 10,
            fillColor: 'red'
          }
        }
      }
    }
  }

here is a working example

API reference : http://api.highcharts.com/highcharts#plotOptions.line.marker.states.select

Hope this will help you to achieve what you need.

Upvotes: 1

Poles
Poles

Reputation: 3682

Thanks to all for your help...I got it what I wanted. I created a js fiddle accordingly.

 $(function () {


            $('#container').highcharts({
                chart: {

                    type: 'line',
                    margin: [70, 50, 60, 80],

                    events: {
                        click: function(e) {
                            var ren = this.renderer;

                            // find the clicked values and the series
                            var x1 = e.xAxis[0].value;
                            x1 = this.xAxis[0].toPixels(x1);
                                y1 = e.yAxis[0].value;
                            y1 = this.yAxis[0].toPixels(y1);
                               series = this.series[0];

                    ren.circle(x1, y1, 5).attr({
                    'stroke-width': 2,
                    stroke: 'red',
                    fill: 'yellow',
                    zIndex: 3
                })
                .add();

                            // Add it
                           // series.addPoint([x, y]);

                        }
                    }
                },
                title: {
                    text: 'User supplied data'
                },
                subtitle: {
                    text: 'Click the plot area to add a point. Click a point to remove it.'
                },
                xAxis: {
                    minPadding: 0.2,
                    maxPadding: 0.2,
                    maxZoom: 60
                },
                yAxis: {
                    title: {
                        text: 'Value'
                    },
                    minPadding: 0.2,
                    maxPadding: 0.2,
                    maxZoom: 60,
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                legend: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        lineWidth: 1,
                        point: {
                            events: {
                                'click': function() {
                                    if (this.series.data.length > 1) this.remove();
                                }
                            }
                        }
                    }
                },
                series: [{
                    data: [[20, 20], [80, 80]]
                }]
            });
        });

http://jsfiddle.net/das_palash89/WN3XC/3/

Upvotes: 0

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

I assume that is correct with that scenario:

http://jsfiddle.net/rV7As/

plotOptions: {
        series: {
            allowPointSelect: true,
            point: {
                events: {
                    click: function (event) {
                        alert('aaa');
                    }
                }

            }
        }
    },

Upvotes: 0

Related Questions