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
Related
I have two charts that are synchronized. They have a margin left to make sure they are uniformly aligned. I have situations where I have multiple yAxis that can get turned on and they are on the right side opposed to the left. I attempted to use the same marginRight approach but when a second, third, or fourth axis gets added to the right it won't show up because there isn't enough room. So I am dealing with a dynamic amount of space over there on the right side. Highcharts handles the dynamic aspects when it's just one chart but I need my second chart to have the same margin even tho it doesn't have these additional yAxis. It's important that this time series data remains aligned in the two charts.
What is the approach to handle this?
UPDATE:
I created a simple jsFiddle here: http://jsfiddle.net/28hrffv7/
In my real-world example, I have showEmpty set to false and a series which is hidden by default.
{ opposite: true, title: { text: 'Random Text' }, showEmpty: false}
When they turn it own the series is rendered and the axis and title is added. This example shows that the first charts doesn't realize that the 3rd chart has 3 axis and as a result should have more marginleft
Update 2: Updated JS fiddle to show the more dynamic nature of the problem. When you toggle a series in the legend you can observe axes getting added and removed which is feature that is wanted. What is required is to keep all the charts synchronized in the width of the plotable area so they all line up correctly. http://jsfiddle.net/28hrffv7/3/
You could hard-code marginRight as well as marginLeft.
Demo #1: http://jsfiddle.net/28hrffv7/1/
Or check which marginRight is the highest and update all chart with the new setting. Relevant part of the code:
}, {
data: []
}]
}, function(chart){
if (chart.marginRight > topMarginRight) {
topMarginRight = chart.marginRight;
console.log(topMarginRight);
}
});
}); // end of the each function creating the charts
$.each(Highcharts.charts, function (i, chart) {
chart.margin[1] = topMarginRight;
chart.isDirtyBox = true;
chart.redraw(false);
})
Demo #2: http://jsfiddle.net/28hrffv7/4/ (for Highcharts < 5.0.0)
UPDATE:
With Highcharts 5+ the same is possible through a chart update.
$.each(Highcharts.charts, function (i, chart) {
chart.update({
chart: {
marginRight: topMarginRight
}
});
})
Demo #3: http://jsfiddle.net/28hrffv7/5/
In case of multiple series in each chart you could call a custom function for events like load, redraw, afterAnimate.
Demo #4: http://jsfiddle.net/acjaLxj1/1/
I've added a series to a chart:
chart.addSeries({
id: 'child-bmi-scores',
name: 'Child\'s BMI',
color: 'blue',
type: 'scatter',
showInLegend: false,
data: [ [3, 20], [10, 16] ]
});
and later on, I want to add a point to that series. So I've done that:
var chart = chartContainer.highcharts();
var series = chart.get('child-bmi-scores');
series.addPoint(
{
x: 16.5,
y: 19,
height: 456,
weight: 789,
ageYears: 16,
ageMonths: 6
}
);
The point does get added, but the trouble is that the blue marker is not visible.
You can see from the image below, the two visible blue squares are from the initial data: [ [3, 20], [10, 16] ], and you can see the crosshairs focussing in on the newly added point - it's definitely there, but without the crosshairs hovering over the point, you just don't see it.
The other curves that you can see are all areaspline series also on the chart.
I'm wondering if the Z-order has got messed up and the new point is somehow behind one of the area splines?
I created a fiddle that demonstrates what I mean:
http://jsfiddle.net/j08L6afh/
So before you click the "Add point" button, hover around and prove there are only two scatter points. Then, if you click the button at the top, then it will add the point, you'll be able to find it by hovering your mouse near and getting the crosshairs, but you won't see the marker.
UPDATE
I removed the curves off the chart, so that the scatter was the only series:
http://jsfiddle.net/j08L6afh/1/
Now you can see it works as expected, so it would appear to be being hidden by one or more of the curves. How can I make the new point at the front?
So I solved this by doing a .push onto an array of measurements, and reinitialising the entire chart.
It worked, but I imagine there is a better way?
Is there a programmatic way to provide axis labels for individual bars in a grouped bar chart in HighCharts?
Use case: The use case is when dealing with a graph that is both grouped and stacked. With these graphs it is hard to visually convey (without a tooltip) what the individual bars represent, unless they have individual labels.
Default behavior:
As an example see the HC demo for a stacked and grouped column graph, in which it might initially be unclear that the individual bars in each cluster represent different genders: http://www.highcharts.com/demo/column-stacked-and-grouped
Goal: Here is an illustration of what I am trying to achieve. Is it possible to do this programmatically, such as with a second x-axis? Perhaps another idea would be to use clever placement of the stack total, but of course that would get in the way of showing the actual stack total.
There are a few options which may help you.
Firstly, the stackLabels formatter allows you to determine what is in you label.
Secondly, veticalAlign:"bottom" allows you to position the labels at the bottom of the stack.
Thirdly, the 'y' option allows you to move the label relative to its default position.
The catch is that you can't seem to move the label outside of the chart plot area. One way round this is to start your y-axis at a negative value to give room for the labels. You can then move the position of the x-axis into the chart area.
http://jsfiddle.net/WY6QB/
xAxis: {
offset:-43,
labels:{
y:40
},
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
stackLabels: {
verticalAlign:"bottom",
y:20,
enabled: true,
formatter: function() {
return this.stack;
}
}
The only thing left is to try to remove the spurious '-2' y axis point.
-EDIT-
If you set startOnTick to false, and give the y-axis min as -1.9, the spurious -2 point goes away.
min: -1.9,
startOnTick:false,
http://jsfiddle.net/V6Cp2/
It is not exactly the same result as your image, but it displays the stackLabels:
yAxis: {
...
stackLabels: {
enabled: true,
formatter: function() {
return this.stack;
}
}
},
It displays the label at the top of the column.
Example
You can use grouping categories plugin.
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
}]
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