I have a Highcharts chart as follows:-
http://jsfiddle.net/sushengloong/KQNhm/1/
I need to change it such that the bar chart appears right in between the ticks. As you can see from the above link, I tried using pointPlacement: 'between' but some charts are still not displayed in between the two adjacent ticks. On top of that, there are some spacing to the right of every bar chart which make the gap between the bar charts unequal.
In addition, the xAxis tick label should also appear in the middle whereby the two adjacent ticks depict the start and end of the respective month. I can't find an option for this.
In the one xAxis, you cannot have "between" / "o"n option for different series. Only what you can try to do is using two xAxis.
xAxis:[{
//...options
pointPlacement: 'between'
},{
linkedTo:0
pointPlacement: 'on'
}]
Related
I have in excess of three years data being shown along the xAxis of a graph.
I'd like a user to be able to zoom into the xAxis to view data points more closely (yAxis doesn't need to change), by clicking buttons that will show "1 month", "6 months", "1 year" worth of data points in the visible chart area.
I can achieve this zoom using chart.xAxis[0].setExtremes(startDate, endDate) but I'd then like the user to be able to scroll along the xAxis at the specified zoom level to view the data that is off the side of the visible chart area and this I can't work out.
I imagine the issue is that setExtremes sets specific start and end points to the visible area, whereas what I really want to do is limit the view by a generic time period.
Appreciate any pointers!
I recommend you to use Highstock. You will be able to create a stock chart with additional features that you need or create a chart with scrollbar.
scrollbar: {
enabled: true
}
Live demo: http://jsfiddle.net/BlackLabel/8L0aj1wt/
Thanks for the Highstock recommendations #ewolden & #ppotaczek I can see it does have the right kind of functionality, but I managed to solve it by adding the following (panning, panKey and pinchType) to my chart options:
chart: {
type: 'spline',
panning: true,
panKey: 'shift',
pinchType: 'x',
}
Using HighChart, I wanted to create grouped column chart with max width, so that when there are less points on x axis the bar does not look wide.
I found some property maxPointWidth which can be applied to achieve the same. but using this there is a gap for each bar within x-point.
How to remove this gap ? I have tried pointPadding:0 as well seems this does not help
I am expecting chart something like below.
Fiddle: https://jsfiddle.net/mcshiva0507/hx83bbzb/2/
groupPadding will help. https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
plotOptions: {
series: {
groupPadding:0.45,
maxPointWidth: 10
}
},
https://jsfiddle.net/mcshiva0507/hx83bbzb/2/
by default without touching the axis, highcharts try to use as much space as possible, what if I want to leave about half an inch on top or bottom because I want to put a logo there. How can I set option so that there is padding on the yaxis basically?
-------------1
-------------2
-------------3
-------------4
ie chart goes from 1 to 4 but series should be plotted within 2 to 3 only.
You can use the minPadding and maxPadding options:
yAxis: {
maxPadding: 0.2,
minPadding:0.2
},
http://api.highcharts.com/highcharts#yAxis.maxPadding
You can also define spacing to add more space above axis.
I need to add a new series to this chart which will allow me to highlight / shade a particular range of dates. It needs to be 100% height of the chart.
I was looking at using another area series, but I couldn't get it working as I wanted it given I have two existing area series on this chart.
I thought another series which had a 1 or 0 for the particular point to indicate if it should be highlighted or not?
{name: 'mydates',
color:'red',
fillOpacity: 0.3,
data: [0, 0, 0,1,1,1,1, 1, 1,1,0,0],
type:'area',
stacking: 'percent'
},
http://jsfiddle.net/L3ynM/
The problem with my sample:
The 'mydates' series doesn't take 100% height of the chart
If the 'mydates' series begins midchart, it starts with an angle. I'd like it to go straight up
Unless you really need the legend entry, I would recommend using plotBands instead
http://api.highcharts.com/highcharts#xAxis.plotBands
You can also do it like this, if you do really need the legend:
http://jsfiddle.net/jlbriggs/JVNjs/305/
data:[[1.5,0],[1.5,80],[2.25,80],[2.25,0]]
It relies in part on setting a min and max, and using those min and max values as your y data points.
On hiding both the series using legends, and then clicking one of the series shows xAxis starting from '-1', when ideally it should show only not null categories.
Using 'ignoreHiddenSeries: false' solves the purpose but again on hiding both the series using legend and then enabling other series tends to overlap both the series. Although on window resize event, series get aligned properly.
chart: {
type: 'column'
// ignoreHiddenSeries: false
},
Example for reference: http://jsfiddle.net/t88rc/
You can simply set for xAxis min:0, see: http://jsfiddle.net/t88rc/2/
Grouped column charts work best with equal number of data points per series.
Best solution I have found for this is to fill any missing data points with null values:
http://jsfiddle.net/jlbriggs/t88rc/1/
data: [49.9, 71.5,null,null,null,null,null,null]