Home Forums Chart Support Show a colored region in a scatter chart

Show a colored region in a scatter chart

Viewing 6 posts - 1 through 6 (of 6 total)
  • #39087

    I have a scatter chart, which shows different points.
    Scatter Chart
    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-
    Scatter chart with a region

    The region can be any polygon with a given number of sides for eg- for a polygon with sides 5 I’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?

    #39113

    @eshan_23,

    You can use Range Area chart to create shapes in the chart & fill it with desired color by setting color property in dataseries level.

    Please take a look at this JSFiddle for an example on the same.

    creating shapes using range area chart type

    Adithya Menon
    Team CanvasJS

    #39122

    @adithya Thanks so much, this was helpful. But my use case is having the ability to draw polygon, the examples were for rectangle and triangle but I can’t understand how will I send values for dataPoints for a polygon. I tried experimenting with dataPoints but can’t understand how they’re making shapes.

    #39127

    @eshan_23,

    You can use Range Area chart type and provide the datapoint values as x and y coordinates to create shapes like triangle, rectangle etc. Similarly, you can provide your own set of x and y coordinates as datapoints and draw polygons on the chart as shown in this updated JSFiddle example.


    Adithya Menon
    Team CanvasJS

    #39134

    Hey @adithya-menon actually I understood this approach, but the one limitation that seems obvious to me is that I cant make points connected if they don’t have a high or low value, for eg, in your example 5 and 5.5 are in same line with high and low value on y-axis 400,550. suppose they are not in straight lines, and are in arbitrary positions where we can’t have a low and high value for the x value.

    #39147

    @eshan_23,

    You can use Area chart type or Range Area chart type to create polygon shapes on the chart. Since you are using arbitrary points which don’t have a range of values, you can use Area chart type as shown in this updated JSFiddle. Duplicating the first datapoint at the end of the datapoints array will close the area chart to create a shape that you can customize according to your requirement.


    Adithya Menon
    Team CanvasJS

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.