Show a colored region in a scatter chart

Question

I have a scatter chart, which shows different points.

Suppose I want to shade a particular region in the chart, the region can be any shape that can be drawn over a chart, given in this pic-

The region can be any polygon with a given number of sides for eg- for a polygon with sides 5 I&#8217;ll be having an array with objects like- {x1: 3.2, y1: 0, x2: 7.8, y2: 3.9}, so there will be 5 lines like that for all sides. Can someone please let me know if its possible?

adithya-menon · Answer

@eshan_23,

You can dynamically create two Range Area Chart dataseries to fill the region by splitting the datapoints from the datapoint's value to an arbitrary point. Kindly take a look at this updated JSFiddle for an example with complete code.

---
Adithya Menon
Team CanvasJS

eshan_23 · Answer

@adithya-menon, the approach of manually configuring y-values doesn't seem very intuitive and robust to me. I observed that on most places the second y-value was 0.4, but in few places it was changed like you said. In real world scenario I'll get these values via an api which will return me an array of x,y values, which is suitable for area chart, like I've mentioned before. How will this approach work in real world scenario? That would require me to manually change values I'll be getting from the api. Doesn't seem practical to me. Is there any other way?

adithya-menon · Answer

@eshan_23,

As per your requirements you can use the Range Area Chart type. Area chart will not fit your current requirements due to the way it is designed.

The spike appears due to the y-values. Kindly take a look at this updated JSFiddle, where the spike doesn't exist. You can further improve on the example by changing the y-values accordingly.

__
Adithya Menon
Team CanvasJS

eshan_23 · Answer

@adithya-menon this approach looks good, but there's a weird spike in y=0.4, on right hand side, which shouldn't be there. Also is that a bug with area type chart? The issue of more than 250 points?

adithya-menon · Answer

@eshan_23,

You can use a Range Area Chart type instead of an area chart for your scenario. You can use Range Area to fill the region by splitting the datapoints, from the value to an arbitrary point and removing the border of the area chart since you are using an arbitrary point. To have the border you can use a line chart type with the same datapoints. Please refer to this updated JSFiddle for an example on the same.

__
Adithya Menon
Team CanvasJS

Front End Technology Samples

Server Side Technology Samples

FORUMS

Login to Ask a Question or Reply

Show a colored region in a scatter chart