Search code examples
javascripthighchartsellipserectoval

How to draw an allipse (oval) on a Highchart graph

I have two series and their intersection point. I want to have an oval (ellipse) on a chart with center in intersection. Oval radiuses should be set in terms of axis units to show area of interest for each axis.

Highcharts.chart('container', {
    series: [
      // first series
      {
        name: 'IPR',
        data: [[0, 30.5],[18.5, 25.4],[30, 19.4],[38, 9.7],[42, 0.02]]
      }, 
      // second series
      {
        name: 'VLP', 
        data: [[2, 0.5],[7, 1],[14, 6],[21, 22],[29, 29.6],[40, 30.3],[50, 27.2]]
      }, 
      // intersection
      {
        name: 'Operating point',
        data: [
          [22.42, 23.35]
        ]
      }
    ],
})

How can I programmatically draw an oval in intersection and make zoom work?

Solution

  • You can use Renderer.createElement to create other SVG elements in Highcharts:

        this.renderer.createElement('ellipse').attr({
      cx: 60,
      cy: 60,
      rx: 50,
      ry: 25,
      'stroke-width': 2,
      stroke: 'red',
      fill: 'yellow',
      zIndex: 3
    }).add();

    For translating to axis units use toPixels as @Anton Rybalko suggested.

    Live demo: http://jsfiddle.net/kkulig/ds6aj5yp/

    API references: