So ive been looking to see if its possible in highcharts to do the following:
on the x-axis it isnt showing the actual x-axis values it is custom labels that segment the chart into 3 sections.
Anyone know if this is possible?
The implementation will be very easy with Highcharts. You can just use two x-axes, hide the first one and adapt the second one for your needs. For example:
xAxis: [{
visible: false
}, {
lineWidth: 2,
min: -0.5,
max: 2.5,
gridLineWidth: 1,
categories: ['30 Days Before', 'Insight Period', '30 Days After']
}]
Live demo: http://jsfiddle.net/BlackLabel/12zbg0m3/
API Reference: https://api.highcharts.com/highcharts/xAxis
Related
I need to show multiple axis, which is having constant values in the x-axis and dynamic values in y-axises
1st y-axis regarding bubble chart enter image description here
2nd y-axis regarding column chart
We got requriment like to show them side by side not like merged as shown in second refrenece picture.
enter image description here
Implemented bubble and column chart in one chart using 2 y-axis and 1 x-axis. We got chart as show in reference.
enter image description here
Both are getting mergged instead we want to show them side by side.
You need to create column and bubble series with, each with own y-axis. Use pointPlacement property to position columns next to bubbles.
series: [{
type: 'column',
pointPadding: 0.4,
pointPlacement: 0.3,
data: [70, 50, 65],
yAxis: 1
}, {
type: 'bubble',
data: [3, 2, 3]
}]
Live demo: http://jsfiddle.net/BlackLabel/pwq3shef/
API Reference:
https://api.highcharts.com/highcharts/series.column.pointPlacement
https://api.highcharts.com/highcharts/series.column.pointPadding
We have to create a chart and tried but it is not showing the column in case of negative value in the data.
for link :
'https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-placement'
I have put a negative value and it is not showing a column for it, how we can achieve it for column-placement chart.
You just need to remove min restriction for y-axis.
yAxis: [{
// min: 0,
...
}]
Live demo: https://jsfiddle.net/BlackLabel/xq8ejgnf/
API Reference: https://api.highcharts.com/highcharts/yAxis.min
If you look at the JSFiddle below, you'll see that when it renders the chart, the upper-most values are not displayed on the chart (10,000/10,000/80,0000/20,0000).
I can't seem to figure out why it doesn't display those top values.
I also noticed that it doesn't display the -20,000 value for the Weight channel.
https://jsfiddle.net/BBousman/h4gs7erk/
-
You need to enable showLastLabel option:
yAxis: [{
...,
showLastLabel: true
}, ...]
Live demo: https://jsfiddle.net/BlackLabel/142uc9Ls/
API Reference: https://api.highcharts.com/highstock/yAxis.showLastLabel
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 got some problem with highcharts.
Try to transform the highcharts series or series group on correct.
ch1
Bottom "grid" cut my spline and I dont know why. Try to formate like this:
ch2
It is because of the plot area which is limited by the axes. You should set yAxis min to be a little lower than the cut point and set yAxis.startOnTick to false.
yAxis: {
lineWidth: 2,
startOnTick: false,
min: -2,
example: http://jsfiddle.net/jecp8jac/