Take a look at this example:
http://jsfiddle.net/XZtkM/
If you click on the legend to hide the series, its not hidden properly. However if the plotBands option is removed from x-Axis, the hiding works fine.
http://jsfiddle.net/XZtkM/1/
Is there something I am missing?
It is related with incorrect plogBands definition. In case when you configure it proeprly (http://jsfiddle.net/XZtkM/2/) legend click will work correct, as well.
plotBands: [{ // mark the weekend
color: '#FCFFC5',
from: 1372224600,
to:1372224600
}],
http://api.highcharts.com/highcharts#xAxis.plotBands
Related
I'm using HighCharts to display a couple of graphs on my Pregnancy Calculator. They were working perfectly until recently. Now, for some strange reason, the Symbol image of the teddy bear on the second chart is appearing (in the Highcharts code) as opacity:0 until you mouse over the space (at which point the teddy bear appears). I can't understand why it's suddenly doing this or seem to find a way to set it to opacity:1
https://www.thecalculatorsite.com/health/pregnancy-calculator.php
(you'll need to click 'calculate' and then scroll down to the second graph, marked as 'probability of birth by this day' - you'll see a gap in the graph where there isn't a green marker. The teddy bear symbol should be there, but isn't appearing until mouse-over).
Thanks for your help.
Set opacity to 1 for normal state:
series: [{
...,
data: [..., {
y: 54.805615550756,
marker: {
...,
states: {
normal: {
opacity: 1
}
}
}
}, ...]
}]
Live demo: https://jsfiddle.net/BlackLabel/zrp4tfdk/2/
API Reference: https://api.highcharts.com/highcharts/series.line.data.marker.states.normal
I have an issue with a HighCharts pie I've created. Sometimes the tooltip text overlaps with the legend, so I had to increase the legend's y property. However, this is causing parts of the legend (it's horizontal with 4 rows) to become partially hidden. I've tried adjusting the height property of the container, as well as a bunch of other properties, but the problem never goes away...
Here's how it looks like:
http://imgur.com/YOPjoXG
Any help is much appreciated.
If you are fine with pagination in legend then fix the height of the legend with maxHeight.
if the legend overflows, then pagination appears automatically.
legend: {
maxHeight: 30,
}
here is a working fiddle for pagination http://jsfiddle.net/cEcRz/
hope this is what you are looking for.
You can use pagination but in exporting add custom options to the legend like here:
http://jsfiddle.net/cEcRz/1/
exporting:{
chartOptions:{
legend:{
layout: 'horizontal'
}
}
},
Obviosuly you need to adapt other parameters like size etc.
Simplifying my story, consider 2 series where I link their yAxes. In other words on the second yAxis there is a property linkedTo: 0
So the first yAxis is the master, hence sets extremes for both series.
However sometimes the second series has high values which are too high to be plotted in the visible area and so they get cropped.
To make matters worse, when the yAxes are linked to each other, the legend doesn't play ball: clicking on the master series name in the legend will hide both series. Clicking on the secondary series name will hide none.
Check out this JSFiddle - values on the right are cropped, legend functionality is broken.
What am I missing? How can I get both series to scale together and be all visible? How do I get the legend to work as expected? (click on series name should toggle it)
Thanks!
EDIT: As it turns out, if I remove yAxis.id (JSFiddle here) the chart and legend work as expected. However linking series to yAxis based on position in the array (I think?) instead of by some ID (string) sounds less than ideal.
Ideas?
Why you are trying assigning second series to axis which is just copy of proper one? I advice to set both series to master yAxis, and second yAxis use just as extra info on the right side of a chart.
Otherwise I don't understand the purpose of linking second axis to get THE SAME extremes as master yAxis, and then expecting to scale that yAxis according to series you have attached to that yAxis.
Something like this I think is better approach, see: http://jsfiddle.net/zYpcm/15/
series: [{
name: 'master',
data: self.masterData,
yAxis: 'master'
}, {
name: 'secondary',
data: self.secondaryData,
//yAxis: 'secondary'
}],
yAxis: [{
id: 'master'
}, {
id: 'secondary',
opposite: true,
linkedTo: 0
}]
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'
}]
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]