0
209
VistasHighchart - Column range as arrows
I am integrating column range chart but I want the column to appear as an arrow. The arrow could be facing downward / upwards based on if the value is increased or decreased.
I can't seem to find any workaround to achieve this.
Below is a reference picture of what I am trying to achieve..
Highcharts.chart('container', {
chart: {
type: 'columnrange',
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name: 'Temperatures',
data: [
[-9.9, 10.3],
[-8.6, 8.5],
[-10.2, 11.8],
[-1.7, 12.2],
[-0.6, 23.1],
[3.7, 25.4],
[6.0, 26.2],
[6.7, 21.4],
[3.5, 19.5],
[-1.3, 16.0],
[-8.7, 9.4],
[-9.0, 8.6]
]
}]
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
You can render triangles by using Highcharts.SVGRenderer.
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
But I think the easiest option will be using a scatter series with triangle markers to achive this. Check the following config and demo:
{
type: 'scatter',
showInLegend: false,
enableMouseTracking: false,
marker: {
symbol: 'triangle-down',
fillColor: 'rgb(124, 181, 236)',
radius: 9
},
states: {
inactive: {
opacity: 1,
},
},
data: [{
x: 9,
y: -1.3
},
{
x: 10,
y: -8.7
},
{
x: 11,
y: -9.0
}
]
}
·
Juan Pablo Isaza
Denunciar
Responde la pregunta