CODEWITHSUNDEEP
angularhighchartsangular6
Nikita
Nikita

Reputation: 1

General Drawing in Highcharts with Angular 6

General-drawing highchart

Above image is the example of general drawing in highcharts. Here I want to add click event on labels to call my angular function or update any html element without using jquery. Does anyone know how we can do this, I have searched a lot but not getting any way out?

ren.label('PHP Server-1', 15, 87)
    .attr({
        fill: '#57c15d',
        stroke: 'white',
        'stroke-width': 2,
        padding: 5,
        r: 5
    })
    .css({
        color: 'white',
        fontSize: '16px'
    }).on('click',function(){
        this.clickedNode = false;
        alert(this.clickedNode);            
    })
    .add()
    .shadow(true);

In the above, I am trying to set false to clickedNode variable and access the same on angular view. Its alerting me false but not updating my UI. For reference: https://www.highcharts.com/demo/renderer

Thanks in advance.

Upvotes: 0

Views: 213

Answers (1)

ewolden
ewolden

Reputation: 5803

You can add events to SVGElements by using on() like this:

ren.path([
  'M', 235, 185,
  'L', 235, 155,
  'C', 235, 130, 235, 130, 215, 130,
  'L', 95, 130,
  'L', 100, 125,
  'M', 95, 130,
  'L', 100, 135
])
  .attr({
     'stroke-width': 2,
     stroke: colors[3]
})
  .on(
    'click', //Event type
    function() { 
      alert('clicked'); //event action
    }
).add();

Working JSFiddle example: https://jsfiddle.net/ewolden/na9jyq0m/14/ (where you can click on the arrow between Batik and SaaS client(browser or script))

API on SVGElement.on(): https://api.highcharts.com/class-reference/Highcharts.SVGElement#on

Upvotes: 0

Related Questions