I have a problem with the errorBar of HighCharts. The errorBar adds a margin in the chart, but i don't want this margin.
So i deleted it with this code :
xAxis: [{
[...]
/* Remove padding */
min: pointStart,
max: pointEnd,
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false
/* End remove padding */
}]
pointStart and pointEnd are calculated for remove a static margin. It's working for column type but with errorBar type the margin is not constant and it's impossible to removed them because i think it's a random margin.
There is another solution to remove the auto margin of errorBar ?
Edit
Live demo // edited link
In this demo you see 3 graphics. The problem is that the graphics needs exactly the same xAxis. The errorBar adds margins, but in my production code I have dynamic data and the margin is random for me.
It's caused by setting pointPlacement: 'between'. Remove that line and will be working fine, see third chart: http://jsfiddle.net/cPq7Y/1/
Related
In this Highcharts chart I have a line with data points that end in point 5, but the xAxis ends in point 6 even though there is no data in that point. This is because I set endOnTick:true, question is what is the logic behind endOnTick? why is it adding a new point and doesn't end with the data?
Javascript
var settings =
{
"chart": {
"type":"line"
},
"xAxis": {
"endOnTick":true
},
"series":[
{"name":"series1","data":[[1,1200],[2,2200],[3,3200],[4,1800],[5,1500]]},
{"name":"series2","data":[[1,1050],[2,2050],[3,1650],[4,1450],[5,1350]]},
{"name":"series3","data":[[1,1250],[2,2250],[3,1850],[4,1650],[5,1550]]}]
}
$('#container').highcharts(settings);
The logic is pretty much what you would expect. If endOnTick is true, it will extend the axis to make sure it stops on a tick. However, it is not very visible in your example.
If you look closely at the x-axis you can see that if you have endOnTick: false the axis goes very slightly beyond 5. This is because of maxPadding defaulting to 0.01 for the x-axis. This very slight extension beyond 5 means that setting endOnTick: true has to extend the axis to the next tick.
You can test this by setting maxPadding: 0 and endOnTick: true. Then you see that as the axis does not go beyond 5, it does not generate the extra point.
Note that these settings have differing defaults for the x-axis and the y-axis.
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/
see this jsfiddle: http://jsfiddle.net/k0hrz224/2/
i want the max value of the yaxis to be 100. currently, as you can see, it is 150 and i dont know why, because i explicitly set max: 100 of this yaxis.
i know that changing (on line 101)
min: -25
to
min: 0
seems like a solution. however i need min: -25 because i want to display A and B as it is shown in the example.
Things can get a little odd when you have multiple y axes.
Add this to your chart:
chart: {
alignTicks:false
}
Which will stop the different axes from trying to resolve with each other, and stop your axis at 100.
Example:
http://jsfiddle.net/jlbriggs/k0hrz224/4/
Reference:
http://api.highcharts.com/highcharts#chart.alignTicks
finally i managed to do it. i "hardcoded" the ticks on my own:
tickPositions: [-25, 0, 25, 50, 75,100]
then i experienced the desired behavior, i.e., no wrong autoscaling of any axis.
I am trying to increase the space between charts in this link however i have used minPadding/maxPadding in xAxis and pointWidth: 90/pointPadding: 0 but nothing works. It seems to me that there is forced spacing at the top and bottom of the chart area which is causing this.
http://jsfiddle.net/j7NMC/2/
/*What i have tried */
series:{
pointWidth: 90,
pointPadding: 0
}
xAxis: {minPadding:0, maxPadding:0,}
Any ideas?
Thank you :)
I would suggest changing your data setup. Instead of 3 different series, use 1 series and 3 categories:
series: [{
data: [973,133,107]
}]
example: http://jsfiddle.net/j7NMC/4/
What this does for you:
1) eliminates that wasted space on the chart
2) eliminates need for legend by putting the labels right on the axis next to the bar (drastically improves usability of chart, makes comprehension much easier for user)
3) eliminates need for multiple colors for the bars (drastically improves usability of chart, makes comprehension much easier for user)
EDIT:{
you can try setting the groupPadding to 0 to remove some of the space, as the the 3 series you have displayed are grouped, and extra space is being added because of that.
The options need to be in the 'bar' section of plotOptions, and you don't need a series entry in plotOptions i.e. like this:
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
pointWidth: 10,
pointPadding: 0
}
},
http://jsfiddle.net/A8dpf/
Is it possible to align the y axis tick "outside" on a highstock graph, so that it aligns with the gridline, rather than being "inside" and sat on top of the gridline. The documentation for highstock suggests that it should be placed "outside" by default, but looking at every example of a highstock graph, they always appear to be "inside".
tickPosition: String. The position of the major tick marks relative to the axis line. Can be one of inside and outside. Defaults to "outside".
Highchart example (what I want): http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/
Highstock example (what I get): http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/
Many thanks in advance.
Update - a solution of sorts
I came to the realisation that a Highcharts.StockChart is just a pre-configured version of Highcharts.Chart in the highstock.js file.
HighCharts.Chart has all the features of a Highcharts.StockChart - not just the features of a Highcharts.Chart in the highcharts.js file.
As a result, I have just used a highstock.js Highcharts.Chart with the configuration I require, and this places the yAxis labels in the correct position.
You can use offset parameter for yAxis.
http://api.highcharts.com/highstock#yAxis.offset
EDIT:
http://jsfiddle.net/Z4zwr/1/
yAxis : {
labels:{
align:'right',
x:-10
},
lineWidth : 1,
offset : 30
},
I've found a solution (jsfiddle): Add labels: { align: 'left' } to your yAxis options, like so:
yAxis: [{
labels: {
align: 'left'
}
}]
This tells Highcharts to align the left end of the labels with the y-axis.
Updated jsfiddle: http://jsfiddle.net/r4wrf63u/