It is currently Mon Sep 24, 2018 6:52 am Advanced search

highlight line on chart with rect

Technical support for the Highcharts Stock package

highlight line on chart with rect

Postby jahnvi25 » Mon Mar 12, 2018 8:44 pm

i have line chart on highstock and i have to highlight that line by drawing surrounding rect like image below.. (i want to draw red rectangle around my line chart)
how can i do that

thanks
Attachments
sample.png
sample.png (25.03 KiB) Viewed 155 times
jahnvi25
 
Posts: 73
Joined: Thu Oct 04, 2012 2:16 pm

Re: highlight line on chart with rect

Postby ppotaczek » Tue Mar 13, 2018 12:25 pm

Hi jahnvi25,

Use SVGRenderer to add required element:

Code: Select all
  chart.renderer.rect(350, 150, 100, 100).attr({
    stroke: 'red',
    fill: 'blue',
    'stroke-width': 3
  }).add();


API Reference: https://api.highcharts.com/class-refere ... derer#rect
Live demo: http://jsfiddle.net/BlackLabel/4fjejhmm/

Best regards!
Paweł Potaczek,
Highcharts Developer
ppotaczek
 
Posts: 743
Joined: Mon Oct 02, 2017 5:12 pm

Re: highlight line on chart with rect

Postby jahnvi25 » Tue Mar 13, 2018 4:51 pm

thanks a lot for reply.. but how can i draw specific to series data.. instead of hard coding x and y for rect..
and i do have datetime Axis as well.. so how i can convert axis values ?
jahnvi25
 
Posts: 73
Joined: Thu Oct 04, 2012 2:16 pm

Re: highlight line on chart with rect

Postby ppotaczek » Tue Mar 13, 2018 7:05 pm

Hi jahnvi25,

Points have plotX and plotY properties, which are independent of the axis units and which you can use. You have to add chart.plotLeft and chart.plotTop to these values, to get final values.

Code: Select all
  var point = chart.series[0].points[2];
  chart.renderer.rect(point.plotX + chart.plotLeft - 25,
    point.plotY + chart.plotTop - 25,
    50, 50).attr({
    stroke: 'red',
    fill: 'blue',
    'stroke-width': 3
  }).add();


Live demo: http://jsfiddle.net/BlackLabel/j5rcwc66/

Best regards!
Paweł Potaczek,
Highcharts Developer
ppotaczek
 
Posts: 743
Joined: Mon Oct 02, 2017 5:12 pm

Re: highlight line on chart with rect

Postby jahnvi25 » Tue Mar 13, 2018 8:21 pm

thanks a lot.. its working like charm..

Thanks again
jahnvi25
 
Posts: 73
Joined: Thu Oct 04, 2012 2:16 pm


Return to Highstock Usage

Who is online

Users browsing this forum: Bing [Bot] and 0 guests