-1

Pls suggest the below image chart in Highcharts option with example?

enter image description here

Thamizharasan P
  • 1
  • 1
  • 1
    Hi @Thamizharasan P, Could you specify exactly what you have a problem with and what have you already tried? To render the circles use 'bubble' series. Example: https://jsfiddle.net/BlackLabel/9aj7nre4/ For the frame render custom shape by: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer. – ppotaczek Mar 12 '21 at 10:25
  • I have tried with bubble chart and i want do a inside the box bubble. is it possible to get it? – Thamizharasan P Mar 12 '21 at 14:41
  • Sorry, but I don't understand. What do you mean by 'box bubble'? – ppotaczek Mar 12 '21 at 20:41
  • Pls refer my attached image. I need same UI in highcharts. – Thamizharasan P Mar 16 '21 at 05:14

1 Answers1

0

You can use bubble series type and Highcharts.SVGRenderer class.

events: {
  load: function() {
    var xAxis = this.xAxis[0],
      yAxis = this.yAxis[0],
      x1 = xAxis.toPixels(1),
      y1 = yAxis.toPixels(6),
      x2 = xAxis.toPixels(1),
      y2 = yAxis.toPixels(2),
      x3 = xAxis.toPixels(2),
      y3 = yAxis.toPixels(4),
      x4 = xAxis.toPixels(2),
      y4 = yAxis.toPixels(8);

    this.renderer.path([
        'M', x1, y1,
        'L', x2, y2,
        'Q', x2 + (x3 - x2) / 2, y2 + (y3 - y2) / 2 - 20, x3, y3,
        'L', x4, y4,
        'Q', x1 + (x4 - x1) / 2, y1 + (y4 - y1) / 2 - 20, x1, y1
      ])
      .attr({
        'stroke-width': 2,
        stroke: 'red',
        'stroke-dasharray': [5, 5]
      })
      .add();
  }
}

Live demo: https://jsfiddle.net/BlackLabel/wk8p9vhc/

About SVG path: https://www.w3schools.com/graphics/svg_path.asp

API Reference:

https://api.highcharts.com/highcharts/series.bubble

https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • Hi, My typescript page its not working rectangular box. Only showing single line. I'm getting below error in Series data: Type '[number, number, number]' has no properties in common with type 'XrangePointOptionsObject'. – Thamizharasan P Mar 16 '21 at 14:01
  • Hi @Thamizharasan P, This error doesn't seem to be related with the main question. Your series data for xrange should be in format `[{x, x2, y}, ...]`. Example: http://jsfiddle.net/BlackLabel/3Lnr8vgj/ – ppotaczek Mar 17 '21 at 08:48