Question: draw an ellipse on ScatterChart

[tamaron]

Hello, I want to draw an ellipse on a scatter chart, whose center is (100, 100), x radius = 200, y radius = 100, and whose x-axis leans 45 degrees.
I tried the following code, but it does not work.
How can I write options to draw the ellipse?
Thank you in advance.

 const options: Highcharts.Options = {
    series: [
      {
        type: "scatter",
        name: "foo",
        data: [{x: 100, y: 100}, {x: 200, y: 200}],
      },
    ],
    // ...
    annotations: [
      {
        shapes: [        
          {
            type: "ellipse",
            point: { x: 100, y: 100 } // center??
            r: 200, // x radius??
            ry: 100, // y radius??
            // how can I specify lean?
            fill: "rgba(0, 0, 0, 0.75)",
            stroke: "rgba(0, 0, 0, 0.75)",
            strokeWidth: 1,
          },
          
        ]
      }
    ]
  };

[Paweł Potaczek]

Hi @tamaroning,

Your question is not related to the highcharts-react-official integration, so for similar questions in the future please use one of our support channels: https://www.highcharts.com/support/

For the ellipse annotation type you need to define two points, for example:

  annotations: [{
    shapes: [{
      type: "ellipse",
      points: [{
        x: 100,
        y: 100
      }, {
        x: 150,
        y: 150
      }],
      ry: 100,
      fill: "rgba(0, 0, 0, 0.75)",
      stroke: "rgba(0, 0, 0, 0.75)",
      strokeWidth: 1
    }]
  }]

Live demo: https://jsfiddle.net/Lzqwor1a/

Best regards!

[tamaron]

Thank you 😄