Highcharts not rendering properly on legend clicks - javascript

Problem:
When series of the charts are set hidden and visible by clicking the legends the YAxis on right side do not render properly:
enter code here
http://jsfiddle.net/yzqdekhr/5/
Steps To Reproduce:
1) Click Diversion % Monthly Legend and Hide right side y axis
2) Click on both Diverted Tons and Trash Tons Legend (Complete chart will be blank)
3) Click Diversion % Monthly Legend to show it again
4) Click both Diverted Tons and Trash Tons Legend to show chart data
See now both axis have their own plotlines which should not be, see below image
Expected Result
Plot lines must be common as in the first load

This is a known issue reported as a bug here - https://github.com/highslide-software/highcharts.com/issues/4374
Suggested workaround is to add a wrapper that will realign ticks.
H.wrap(H.Axis.prototype, 'setScale', function(p) {
if(this.options.alignTicks !== false || this.chart.options.alignTicks !== false) {
this.forceRedraw = true;
}
p.call(this);
});
})(Highcharts)
JSFiddle example: http://jsfiddle.net/q6sr1c0f/

The problem is with how the secondary axis acts - when removing all and drawing the Diversion % there is no data or primary axis to be dynamically linked to.
The only way I can think of doing what you want without getting the double axis line is to set the second Yaxis linkedTo option to the first one.
This will make sure that if there is no first Yaxis the plot will not render new lines. This present another problem because now the Diversion % line is not painted at all (if the others are not visible) so you will have to set a min and max value for the first Yaxis.
JSnippet Demo
//Added to the second Yaxis:
linkedTo: 0;
//Added to the first Yaxis:
min: 0;
max: 100;

Related

Start graph rendering after left sided labels in Highstock

In my highstock charts i required label on the left side of the graphs. When i used opposite: false + align: left for labels they are positioned above graph. But i want to start graph rendering after labels ends.
Left side labels without required graph render
I saw solution for my problem in Highcharts not in highstock some time before. But now i cant find it to show what exactly i need
Expected result
Thanks in advance
OK, so you want the labels inside the plot area.
You can do this by adding
labels: {
align: 'left',
x: 0
}
to your yAxis properties.
This moves the starting point of the labels to the axis line, and extends the labels to the right from that point. If you want them pushed further inside, just increase x.
The problem that you'll run into is that the plot will not respect the label placement - your line will still start at the same point, as if the labels weren't there.
Normally, you could just use the minPadding setting on the xAxis to increase the space for the labels, but this doesn't work in the case of the navigator, as explained here:
http://api.highcharts.com/highstock/xAxis.minPadding
When the axis' min option is set or a min extreme is set using axis.setExtremes(), the minPadding will be ignored
I am sure there is some work around for this problem, but I do not have the solution currently.
Updated fiddle:
http://jsfiddle.net/d6mre68v/

Highcharts multiple x axes is hidden on zoom

I used the multiple axes on the highchart
During Zoom operation the x values are getting hidden
I used linked to attribute also
JsFiddle
zoomType: 'y',
zoomType: String
Decides in what dimensions the user can zoom by dragging the mouse. Can be one of x, y or xy.
Try it:
None by default
x
y
xy
I referred this jsfiddle to figure out what's happening. I think, this behavior is not a bug/issue.
This github issue mentioned in comments is not the problem here. Because what it is saying is to use linkedTo: 0 which is already present in this example.
It actually depends on how much area and more importantly from where to where you select for zooming in. Let's see that by examples:
In the following image, the rectangle signifies the width of one column.
Now, if you start your pinch from more than half of the width of any column or end the pinch after half of the width of a column, that column would be fully visible along with x-Axis labels.
But, if you pinch any less, say from the middle of orange bar of first column, till middle of next column's blue bar, it's not going to show whole columns and hence it ends up with hidden x-Axis labels.

Slanted highcharts axis labels overlap with legend

I made a small fiddle based on the highcharts demos at http://jsfiddle.net/w53woene/1/
The issue I have boils down to four things:
1) I need to rotate the labels (this is based on a feature request so I can't ignore it).
labels: {
rotation: -45
}
2) The fact that the last label is really really long. This is based on data which is given for each chart so it's not always the case but it's the case around 30%-40% of the time so quite often.
3) Labels shouldn't be wrapped or shortened with an ellipsis.
4) I need to add spacing between the chart and the legend to adapt to the labels size but only when the label is going to be too long and colliding with the legend.
This only seems to happen when the chart: { inverted: true } and if it's not inverted the legend behaves normally, increasing the distance from the chart as needed.
Ideally I'd like to know if there's a specific option I'm missing that achieves this natively, i.e., I would have expected floating: false to achieve this the same way it does when the chart is not inverted, but it doesn't seem to. If this isn't possible I'd like to know how I can adjust the chart size (excluding the legend) in order to achieve this via JavaScript.
The problem is that vertical axis add space on the left size, but doesn't add on the bottom. I would wrap labels for a better readability: http://jsfiddle.net/w53woene/2/ - otherwise it may happen that you will have so long label that chart will get 0 pixels for plotting area.
If you really need non-wrapped text, then I would wrap Axis.prototype. getOffset to add extra space:
(function(H) {
H.wrap(H.Axis.prototype, 'getOffset', function(p) {
p.call(this);
if (this.isXAxis) {
var lastTick = this.tickPositions[this.tickPositions.length - 1],
lastLabel = this.ticks[lastTick].label,
height = lastLabel.getBBox(true).height;
this.labelDiff = height - this.chart.marginBottom;
if (this.labelDiff > this.chart.axisOffset[2]) {
this.chart.axisOffset[2] = this.labelDiff;
} else {
this.labelDiff = 0;
}
} else {
this.offset -= this.chart.xAxis[0].labelDiff;
}
});
})(Highcharts)
And live demo: http://jsfiddle.net/vwegeuvy/

HighStock: Add series dynamically introduce gap

Adding series dynamically introduce gap in the existing series.
http://jsfiddle.net/anandc999/6XRuY/
Steps to reproduce
1. load the above url
2. click any where in the candlestick (OHLC)
3. move the mouse with in the candlestick
4. click again with in the candlestick chart
Observe a new series is added but a gap is introduced in the existing Volume and OHLC series.
How to add series without a gap?
Already tried gapsize and connectNulls but doesnt work. Can anybody help?
Thanks
Anand
The problem is with ordinal axis in Highstock. This option forces to display points evenly on a chart, so when new points are added - it recalculates position of each points.
To prevent that set ordinal: false, see example: http://jsfiddle.net/6XRuY/7/
Code:
xAxis: {
ordinal: false
},

Highcharts: Adding clickable image to every xAxis gridLine

I'm building in some custom functionality where users can click on data points in a line chart to add notes to that date. This is a bit misleading as the notes aren't actually attached to the metrics themselves but rather the date it lands on. In other words, if I have 6 series on one line chart that spans the dates 01/01/12 - 01/08/12, a single note on 01/05/12 will apply to all 6 series. So, as you can imagine clicking on a data point on one of the 6 series or the date 01/05/12 would mislead the user to believe that this note would be applied to that data point, not the entire date and any series that lands on that date.
So, to remedy this usability issue I've decided that the best visual cue would be something like this:
There would be a clickable icon at the top of each xAxis gridLine that would need to scale with the xAxis gridLine (like if a user selects an area to zoom in on).
Suggestions on best way to pull this off? I only need a suggestion for how best to add the icon to every line... I have all post-click functionality already built.
Building on Mark's suggestion using redraw event to position the images and using load event to create them. Adding them on load is necessary to make them available during export and you would not want to create new images on each redraw either.
These chart events are used:
events: {
load: drawImages,
redraw: alignImages
}
In the drawImages function I'm using the inverse translation for the xAxis to position the images on the chart:
x = chart.plotLeft + chart.xAxis[0].translate(i, false) - imageWidth / 2,
y = chart.plotTop - imageWidth / 2;
and then adding them and setting a click handler, zIndex, pointer cursor:
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', x, y, imageWidth, imageWidth)
.on('click', function() {
location.href = 'http://example.com'
})
.attr({
zIndex: 100
})
.css({
cursor: 'pointer'
})
.add();
In alignImages the attr function is used to set new x and y values for the images which are calculated the in the same way as in drawImages.
Full example on jsfiddle
Screenshot:
Couple of ideas. First, I would use the chart redraw event to know when the chart is being redrawn (say on a zoom). Then second, explicitly place your images at the axis locations of interest. To get those query directly out of the DOM.
Using jQuery:
$('.highcharts-axis') //return an array of the two axis.
They will have svg "text element" children with (x, y) positions.

Categories

Resources