I'm using spiderChart of highCharts.js.
By default, the spider has vertical direction.
I want my spider to appear at horizontal direction.
For example, when I have only two points and the forum is only simple line, I want to see horizontal line instead of vertical.
Or when I have 6 points and the spider shape is hexagonal, I want the top os the spider to be one of the hexagonal rib, and not one of the vertex.
I attach images here for easy understanding:
Removing the pointPlacement properties inside the series object in the official demo will render chart in the horizontal direction.
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
//pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
//pointPlacement: 'on'
}],
Demo: https://jsfiddle.net/BlackLabel/95av36ms/
API: https://api.highcharts.com/highcharts/series.line.pointPlacement
Related
I want to use combination charts to show horizontal bar chart along with line chart.
But the line i want should be same as the way it is shown in the column chart.
The line chart should not be inverted along the axis when the other series is converted to bar chart.
How can i achieve this ?
line_bar_chart
You can combine line and x-range series types:
series: [{
type: 'xrange',
...
}, {
type: 'line',
...
}]
Live demo: https://jsfiddle.net/BlackLabel/ex2a8o70/
Docs: https://www.highcharts.com/docs/chart-and-series-types/x-range-series
Is there any way to show the summation of area charts value in highcharts without using line chart? I would like to know any other alternatives.
You can use area series with stacking: 'normal' and set lineWidth and lineColor for the series at the top.
series: [{
lineWidth: 2,
lineColor: 'red',
...
}, ...]
Live demo: https://jsfiddle.net/BlackLabel/sft7bu8r/
API Reference: https://api.highcharts.com/highcharts/series.area.lineColor
I am looking for a way to display tick markers on both side of axis. But highcharts api is allowing us to place it inside or outside and not both. Can someone share some pointers?
One way achieve this look is to create two axes and link the first axis to the second one. Then one axis has tick-positions on the inside and the other on the outside. Like this:
xAxis: [{
tickPosition: 'inside',
labels: {
enabled: false
}
}, {
linkedTo: 0
}],
Working fiddle example.
The labels are disabled on the inside axis to avoid double labels.
For example, I want to hide the 0 and 5 in the chart. How can I achieve that?
In a polar chart, that is the yAxis. Disable the labels:
yAxis: {
labels: {enabled: false}
},
Here's an example.
i need to create red and green area along with line series.
http://esbolsa.com/blog/wp-content/uploads/2012/12/Commodity-Channel-Index-Fortaleza.png
i am using following code, which works fine for showing red(below -100).how can i specify another threshold(+100)?
chart.addSeries({
name: name + "_series",
id: name + "_series",
type: 'area',
data: cciData,
yAxis: name + '_axis',
showInLegend: false,
color: '#2f7ed8',
negativeColor:'red',
threshold:-100
},false);
The only way I have seen to do this is to create 2 series that are identical except for the thresholds and negativeColor.
Unfortunately in Highcharts you can set only single threshold, but you can use additional serie i.e with green areas.