In the following fiddle (based on a Highcharts example), the first series shows correctly, taking up the entire height of the chart.
http://jsfiddle.net/markalroberts/h9j53yk4/4/
However, when you click the button to add a series, the existing series' scale is recalculated (not what I want).
The code I use to add the axis/series/data:
chart.addSeries({
type: 'line',
yAxis: 1,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
})
How can the existing series/yAxis combo be set to remain as it was originally and just have the new series plotted ontop (also scaled to use the entire height of the chart)
Update
As per Mike's answer, what I had to do was simply:
alignTicks: false
Working with multiple axes can be tricky. I found the answer by kjfagan in this Stack Overflow question helpful for your situation: Highcharts y-axis Ceiling not being respected.
What I did in your fiddle was first set only the initial y-axis and give it the minPadding: 0 and maxPadding: 0 attributes as per kjfagan's answer:
yAxis: [{
visible: true,
startOnTick: false,
endOnTick: false,
maxPadding: 0,
minPadding: 0
}],
Next, in your buttion, event, I set the full set of attributes for the new axis here, including the minPadding and maxPadding attributes:
$('#button').click(function() {
c.addAxis({
visible: true,
startOnTick: false,
endOnTick: false,
maxPadding: 0,
minPadding: 0,
opposite: true });
c.addSeries({yAxis:1})
c.xAxis[0].series[1].setData(j.Lines[1].Data);
});
Lastly, as Grzegorz Blachliński thoughtfully suggested, I increased your marginTop for the chart itself.
In addition, I added alignTicks: false to prevent the chart from automatically adjusting the axes to one another's values, which can lead to some wonky or unexpected behavior, depending on what you're plotting.
chart: {
marginTop: 20,
alignTicks: false
},
Here's the modified version of your fiddle: http://jsfiddle.net/brightmatrix/h9j53yk4/9/
Please note that clicking the button more than once will add multiple instances of the new axis, which will appear as duplicate axis labels. You also had yAxis declared more than once in the chart options of your original fiddle; I removed the extra option.
One last thing: you'll notice the gridlines from both axes don't quite line up. The answer from Sualkcin in the question I cited above has information on how to handle that (see https://stackoverflow.com/a/23549591/2596103).
I hope this information is helpful for you.
Related
I've searched a lot on SO & Highcarts documentation but couldn't find anything.
I have a bar chart with negative and positive values and since i'll be using a wide daterange, i need to avoid as many blank space as i can. I would like the chart to fit to the borders (bottom and top of the chart), to use all the height available.
Here is the jdfiddle of what i've tried so far : http://jsfiddle.net/816kh4ev/
yAxis: {
//floor: -200,
//min: -200
//maxPadding: 0.01,
endOnTick: false
},
"EndOnTick" options is kinda great, but i want the negative value to stick to the bottom too.
I'm out of ideas (min, floor, endOnTick, maxpadding), so if one of you is an highchart master, it would be amazing.
Thanks
Just as you have endOnTick, you have startOnTick which is the same, but for the minimum value.
yAxis: {
startOnTick: false,
endOnTick: false
},
Working example: http://jsfiddle.net/ewolden/816kh4ev/7.
In addition to that, you can reduce padding:
yAxis: {
minPadding: 0.01,
maxPadding: 0.01,
startOnTick: false,
endOnTick: false
},
Note that minPadding/maxPadding means padding for the min value and padding for the max value.
Working example: http://jsfiddle.net/ewolden/816kh4ev/10/.
Echarts seems to have a nice feature that automatically chooses which labels to display depending on the space provided. However, this algorithm seems to be bit too aggressive at times and does not take into account text rotate. I've gone through the chart options and there doesn't appear to be a way to disable this feature. I'm hoping it's just something I've overlooked. Help appreciated.
axisLabel (under yAxis or xAxis) has an option interval. Set this to 0 and labels will be displayed.
You can try this to force the label of the x-axis,
xAxis: {
type: "category",
data: data[0],
axisLabel: {
interval: 0,
rotate: 30 //If the label names are too long you can manage this by rotating the label.
}
//If your label is in the `y-axis` simply change the code `xAxis` to `yAxis`.
If your axis label is not showing in a chart frame (mean ECharts label's length is too long), Try this,
grid: { containLabel: true },
2 ways to solve long label text
Using rotate option xAxis : { axisLabel: {
rotate: 45
} }
Using formatter and introducing '/n' to break the text
just for the record:
If your categories have a fixed width, you can also set it up like this, in order to show all labels:
axisLabel: {
width: 100, //fixed number of pixels
overflow: 'truncate', // or 'break' to continue in a new line
interval: 0,
},
I'm using Highstock library, and I want to delete from my chart, does anyone know?
Thanks.
That line is the lineWidth of the axis (API). Set it to 0 (which is also the default):
yAxis: [{
// ...
lineWidth: 0
}]
See this JSFiddle example of two y-axis, one with lineWidth set to 0 and one set to 2.
In your chart object set shadow to false:
chart: {
type: 'line',
backgroundColor: '#FFFFFF',
shadow: false
},
Example fiddle: http://jsfiddle.net/omarjmh/L3fw3tr4/
play with the code and press run at the top.
I'm trying to get the columns of my Highcharts chart to resize in order to always leave room for the data labels.
Right now, I can only do one of the following:
Have the data labels appear inside the columns themselves: jsfiddle.net/gjslick/LrAuf/
Have the data labels cropped when they don't fit: jsfiddle.net/gjslick/L7LKA/1/
Have the data labels display, but overlap other lines in the chart: jsfiddle.net/gjslick/WbQb4/1/
Is there any way to get the columns to be resized in order to guarantee that the label fits above/below the column? Thanks!
My preference would be for #1. But, you could also try using xAxis.offset to add some padding between the xAxis labels and the actual chart area (see this one). But, as you can see I increased the negative value to be much larger than your original one. This shows how the yAxis is auto-scalling and it actually increases the padding a bit too much. To fix this you may need to go and get prefetch the maximum/minimum y-values and manually set the yAxis min/max.
xAxis: [{
offset: 14,
title: {
text: ''
},
type: 'category'
}],
yAxis: [{
min: -10,
max: 10,
title: {
text: ''
},
labels: {
enabled: false
},
gridLineWidth: 0
}],
This might be a strange request but is it possible to have a single line chart "display" as area, as in have the shaded part below the line, however not rescale the y axis from 0?
So for example this chart: http://jsfiddle.net/29shP/1/
Is chart type line...
But if I change type: 'area'
Then it displays like this:
Is it possible for the series to stay as it is in the first image, but with the shaded colour below?
Thanks
I advice familiar with this https://github.com/highslide-software/highcharts.com/issues/1401 thread which describe this issue.
Here is the answer given in the thread:
The difference is that the threshold is set to 0 by default for areas. You'll find the same for columns. See http://api.highcharts.com/highcharts#plotOptions.area.threshold. You can disable that behaviour by setting the threshold to null.
yes you can do that
highcharts allow you to keep separate series options in the navigator there you can change
navigator: {
series: {
data: ADBE,
type: 'line'
}
},
here is a jsfiddle for your reference http://jsfiddle.net/GhA5d/
updated your fiddle at http://jsfiddle.net/29shP/2/
Hope this will be useful for you
Use "min"
yAxis: {
startOnTick: false,
endOnTick: false,
min: 0
},
Example: http://jsfiddle.net/29shP/4/
If you want multiple yAxis min, you can do this:
yAxis: [{
min: 0
},
{
min: 0
}],
Check this: Highcharts - Multiple Y Axis Stacked Charts (include jsFiddle in comments)