How can I resize Arc in highcharts? - highcharts

Question

My goal is to draw a curved line with arrows on both ends.
I am trying to recreate the curved dotted line/arrows at the bottom of this graphic.
https://www.epa.gov/sites/production/files/2019-07/active_cases_under_review-7_1_19-boxes.png
So far I have a curved line (originally an arc) that needs to be smaller.
I've various sizing for attributes and css nothing has worked.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
var renderer;
renderer = new Highcharts.Renderer(
$('#container')[0],
400,
300
);
renderer.arc(200, 150, -100, -100, -Math.PI, 0)
.attr({
stroke: '#D3D3D3',
'stroke-width': 2,
dashstyle: 'dash'
})
.add();

Answer 1

To create a curved line with arrows on both ends it will be better to use a combination of renderer.path and renderer.symbol('triangle'). I've created an example for you with horizontal arrows, test it and change the way it works as you like.
var arrWidth = 14,
arrHeight = 25,
startX = 80,
startY = 200,
endX = 200,
endY = 100,
renderer;
renderer = new Highcharts.Renderer(
$('#container')[0],
800,
800
);
renderer.symbol('triangle', startX - arrWidth/2, startY - arrHeight, arrWidth, arrHeight)
.attr({
fill: '#D3D3D3',
rotation: -90,
rotationOriginX: startX,
rotationOriginY: startY
}).add();
renderer.symbol('triangle', endX - arrWidth/2, endY - arrHeight, arrWidth, arrHeight)
.attr({
fill: '#D3D3D3',
rotation: 90,
rotationOriginX: endX,
rotationOriginY: endY
}).add();
renderer.path([
'M',
startX,
startY,
'C',
(startX + endX) / 2,
startY,
(startX + endX) / 2,
endY,
endX,
endY
]).attr({
stroke: '#D3D3D3',
'stroke-width': 2,
dashstyle: 'dash'
}).add();
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
Demo:
https://jsfiddle.net/BlackLabel/prz5w9ox/1/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#symbol
https://api.highcharts.com/class-reference/Highcharts.SymbolDictionary