atyaginew
Posts: 2
Joined: Mon Jan 30, 2023 11:52 am

need to create a curved rectangle box on scatter plot chart

Hi All,

I am creating a scatter chart widget with One series data. On top of the graph I need to create a rectangle box with Curved Upper and Lower Side.

I am able to create rectangle box using trend line but unable to curved two sides.

Code: Select all

    annotations: [{
      shapes: [{
        type: 'path',
        width: 50,

        points: ['A', 'B', 'D', 'C', 'A'],
        fill: "none",
        dashStyle: 'Solid',
        

        r: 100,


      }]
    }],
        this.NTPvalueChartOptions2.series.push({
           name: 'NA/PO4',
           // To make this series hidden and unaccessible for user.
           type: 'scatter',
           marker: {
             enabled: false
           },
           showInLegend: false,
           //
           /*data:tempArrayNapo4*/
           data: [{
             x: 16.25,
             y: 10.0,
             id: 'A'
           }, {
             x: 18,
             y: 10.1,
             id: 'B'
           }, {
             x:16.25,
             y: 9.60,
             id: 'C'
           }, {
             x: 18,
             y: 9.8,
             id: 'D'
           }]
         });
    

I have four x,y cordinates and with use of these points I have created this box. Please find screenshot below:
Attachments
this is created till now without curved
this is created till now without curved
rectnagle image.png (22.33 KiB) Viewed 205 times
This is requirement
This is requirement
MicrosoftTeams-image (3).png (70.28 KiB) Viewed 205 times
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: need to create a curved rectangle box on scatter plot chart

Hello,

Welcome to our forum and thanks for contacting us with your question!

I think that for drawing more complex figures like these, a better idea would be to use the renderer and the path method. It generates a path SVG element with customizable attributes.
API: https://api.highcharts.com/class-refere ... derer#path

To provide responsiveness, use the Axis.toPixels method, which converts the axis values to pixel position.
API: https://api.highcharts.com/class-refere ... s#toPixels

In the demo below, I used Quadratic Bezier Curves to draw the curved lines which are standard in SVG.
See: https://developer.mozilla.org/en-US/doc ... zier_curve

Demo: https://jsfiddle.net/BlackLabel/fbed5wor/

Let me know if that was what you were looking for and ​if you have any inquiries, you may reach out to me at any time.
Best regards!
Dawid Draguła
Highcharts Developer
atyaginew
Posts: 2
Joined: Mon Jan 30, 2023 11:52 am

Re: need to create a curved rectangle box on scatter plot chart

Thanks for your help but when I am trying to implement I am getting below error on custom path as it is not available in highchart library angular :
Attachments
error showing on custom path as it is not available in highchart library angular
error showing on custom path as it is not available in highchart library angular
error.png (24.88 KiB) Viewed 172 times
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: need to create a curved rectangle box on scatter plot chart

Hi,

Highcharts in TS requires customization of the appropriate types but basically works the same.
Demo: https://stackblitz.com/edit/highcharts- ... .module.ts

I hope you will find it useful
Best regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Usage”