Arched square chart using high charts

Question

I have a need to create Arched square chart using High Charts . However I could not find any appropriate forum which depicts this.

The requirement is as follows – Considering X, Y is 0,0 at bottom left –

Crate a straight vertical line between points (100,150) and (100,110).
Create an Ellipse from point (100,110) to (150,80)
Create an ellipse from (150,80) to (200,110)
Crate a straight vertical line between points (200,110) and (200,150).

The closest I could go is in below (Scroll the page completely to see the output) but,

I want to use high chart features
The ellipse is not an actual ellipse but a semi circle which would not consider points 150,80 as a common junction for 2 ellipse.

You can assume anything that is missing for illustration purpose.

http://plnkr.co/edit/WoW3fl1VRH9cZAAjNoET?p=preview

Answer 1

The solution is to use closed path with A params like this :

<html>
<head>
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="script.js"></script>
</head>

<body>
<h1>Hello Plunker!</h1>
<div id="container" style="height: 300px">
<!--
<svg height="400" width="450">
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="0.5" fill="none" />
</svg>
-->
<button id="button">Toggle group</button>
</div>
</body>

</html>

Arched square chart using high charts

Question

1 answers

solution1
0

Arched square chart using high charts

Question

1 answers

solution1 0

solution1
0