CODEWITHSUNDEEP
chartshighchartsdata-visualizationflowchart
Sasikumar
Sasikumar

Reputation: 888

Highcharts General Drawing parameter

I want to draw a curve line like '[' in my custom high charts for network connection.

I got an example for drawing a inverted 'L' curve like shown in the picture below

enter image description here

http://www.highcharts.com/demo/renderer 

// Arrow from Batik to SaaS client
ren.path(['M', 235, 185, 'L', 235, 155, 'C', 235, 130, 235, 130, 215, 130, 'L', 95, 130, 'L', 100, 125, 'M', 95, 130, 'L', 100, 135])

.attr({

  'stroke-width': 2,
  stroke: colors[3]

})
.add();

Can I get any help regarding the parameters. I have tried with various combinations but the accuracy level is poor.

Upvotes: 2

Views: 1215

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

You can find information about making curved line inside Highcharts API: http://api.highcharts.com/highcharts#Renderer.path

You can find all information about making curved edge here: https://www.w3.org/TR/SVG/paths.html#PathDataCurveCommands

Here you can find code that can help you with your chart

      $('#container').highcharts({}, function(chart) {
    var ren = chart.renderer;
    ren.path(['M', 235, 125, 'L', 200, 125, 'L', 200, 220, 'L', 235, 220, ])
      .attr({
        'stroke-width': 2,
        stroke: 'blue'

      })
      .add();
  });

And here you can find an example how this path may look: http://jsfiddle.net/w0cujkbm/4/

Best regards.

Upvotes: 3

Related Questions