I have two goals. First is to be able to disable the default dragging on the main chart, and using drag and multiple select on the columns. second I want to know if it is possible to also reflect this selection on the navigator bar under the main chart. Please advise.
Thanks
This is possible by using point.select() and chart.events.selection event. Here is a sample config:
chart: {
renderTo: 'container',
type: 'column',
panning: false,
zoomType: 'x',
events: {
selection: function (e) {
var xAxis = e.xAxis[0],
flag = false; // first selected point should deselect old ones
if(xAxis) {
$.each(this.series, function (i, series) {
$.each(series.points, function (j, point) {
if( point.x >= xAxis.min && point.x <= xAxis.max ) {
point.select(true, flag);
if (!flag) {
flag = !flag; // all other points should include previous points
}
}
});
});
}
return false; // prevent zoom
}
}
},
Demo: http://jsfiddle.net/ma50685a/4/
Related
I am running into an issue of incorrect point's tooltip on synchronised charts. On the synchronised charts the crosshair is shown and using ordinal:false I am plotting equidistance ticks.
The issue occurs when the crosshair moves along with mouse-move and shows the nearest point's data on the tooltip.
The expected behaviour is: when there is no data, crosshair should be shown but not the tooltip.
here is an existing SO fiddle I found https://jsfiddle.net/jknipp/g3vr5v44/13/
To achieve the effect you need, just return false if window.isOutOfSync, instead of No data string here:
formatter: function(tooltip) {
var header,
s = [];
console.log(window.isOutOfSync);
if (window.isOutOfSync) {
console.log("don't show tooltip");
//return false;
console.log(this)
return false;
}
$.each(this.points, function(i, point) {
// check to see if the point is in the overall graph
//var overallChart = $("#total_success_rates").highcharts();
//console.log(overallChart);
var isSuccessRate = (point.series.name == 'Success');
if (header == null) {
var config = point.point.getLabelConfig();
header = tooltip.tooltipFooterHeaderFormatter(config);
}
s.push(formatSuccessRateToolTip(point.y, isSuccessRate));
// $("#" + point.series.name.toLowerCase() + "-rate").html(point.y + "%");
});
return header + s.reverse().join('<br>');
}
[EDIT]
Additionally, please call reflow() inside of the chart.events.load function on both charts, just like below:
chart: {
renderTo: container,
type: 'areaspline',
events: {
load() {
this.reflow()
}
},
height: '220',
spacingBottom: 20,
spacingTop: 20,
spacingLeft: 20,
spacingRight: 20
},
Live example: https://jsfiddle.net/27veyw1d/
In Highcharts time series currently we are able to zoom in data and we can reset zoom through button but i want something that can zoom out in steps in same manner like how we zoom in. Is there any way? Any help would be great.Thanks in advance
The idea is to find, after zooming selection, new xAxis extremes, and keep them in extremesXmin and extremesXmax arrays, then set these previous extremes after clicked resetZoomButton:
chart: {
zoomType: 'x',
events: {
selection: function(e) {
if (e.xAxis) {
extremesXmin.push(e.xAxis[0].min)
extremesXmax.push(e.xAxis[0].max)
}
zoomLevel++;
}
}
},
To control the button and set new extremes, you need to overwrite zoomOut() function inside showResetZoom() function inside Highcharts prototype:
function zoomOut() {
if (zoomLevel > 1) {
chart.xAxis[0].setExtremes(extremesXmin[extremesXmin.length - 2], extremesXmax[extremesXmax.length - 2])
extremesXmin.pop()
extremesXmax.pop()
zoomLevel--;
} else {
chart.zoomOut();
}
}
Working demo: https://jsfiddle.net/BlackLabel/h8af7L9g/
How do I hide the bar data by clicking the bar and refresh the chart? I would like to have almost the same functionality as clicking on the legend.
Jsfiddle: https://jsfiddle.net/Nadiyaka/005z7dut/1/
For example, if I click on 'Asia' bar, I want the data to become hidden and the chart to be reloaded to see other data bigger.
So far I'm able only to hide the data, but the chart isn't refreshing:
series: [{
data: [1052, 954, 4250, 740, 38],
events: {
click: function(e) {
var chart = $("#container").highcharts();
index = event.point.x;
chart.series[0].data[index].graphic.hide();
chart.series[0].data[index].dataLabel.hide();
}
}
}]
There is no option for hiding points (except the points in pie series), but you can achieve the same effect by setting the point's value to null.
events: {
click: function(e) {
var point = e.point;
point.series.chart.pointer.reset(false); // this is needed to prevent the tooltip from moving around
point.update({
y: null,
holdY: point.y // I preserve original value needed on showing
});
}
}
For showing the columns, attach events to labels
load: function() {
var chart = this,
points = this.series[0].data;
points.forEach(function(point) {
chart.xAxis[0].ticks[point.x].label.on('click', function() {
if (point.y === null) {
point.update({
y: point.holdY
});
}
});
});
}
example: https://jsfiddle.net/005z7dut/2/
I'm working with Highchart.
I've got a multiple series graph in which each series have their own y-axis.
pretty much like this one (jsfiddle)
when we click on the legend item for a series, it hides it and the associated y-axis
(using showEmpty:false helped hiding also the name of the axes)
What I'm trying to achieve is hiding the y-Axis of a given series without hiding the series itself.
I tried to hide it by modifying the showAxis property like this :
serie.yAxis.showAxis = false;
but it doesn't work.
Anyone knows how I should do ?
EDIT : I managed to edit the text so I can remove the axis title by setting the text to null but its not enough to hide the whole axis and its values.
here's what i did to edit the text:
serie.yAxis.axisTitle.attr({
text: null
});
Highcharts 4.1.9+
Since 4.1.9, there is an option Axis.visible which can be used to show/hide an axis, demo: http://jsfiddle.net/3sembmfo/36/
Older versions of Highcharts
It's a new feature for Highcharts 3.0 - that allows to update axes in realtime: chart.yAxis[0].update(object) - as object takes the same options as for creating chart. For example:
chart.yAxis[0].update({
labels: {
enabled: false
},
title: {
text: null
}
});
And jsFiddle: http://jsfiddle.net/39xBU/2/
EDIT:
Use below snippet to hide/show axis by just calling axis.hide() and axis.show(). Live demo: http://jsfiddle.net/39xBU/183/
(function (HC) {
var UNDEFINED;
HC.wrap(HC.Axis.prototype, 'render', function (p) {
if (typeof this.visible === 'undefined') {
this.visible = true;
}
if(this.visible) {
this.min = this.prevMin || this.min;
this.max = this.prevMax || this.max;
} else {
this.prevMin = this.min;
this.prevMax = this.max;
this.min = UNDEFINED;
this.max = UNDEFINED;
}
this.hasData = this.visible;
p.call(this);
});
HC.Axis.prototype.hide = function () {
this.visible = false;
this.render();
HC.each(this.plotLinesAndBands, function (plotLine) {
plotLine.render();
});
};
HC.Axis.prototype.show = function () {
this.visible = true;
this.render();
HC.each(this.plotLinesAndBands, function (plotLine) {
plotLine.render();
});
};
})(Highcharts);
It's actually gotten simpler. You only have to set the yAxis title attribute to false:
yAxis: {
title: false
},
Here is an example: jsfiddle example
We can hide Yaxis label without hiding the y-Axis without hiding the series by returning the empty string as follows:
yAxis: {
title: '',
labels: {
formatter: function() {
return '';
},
style: {
color: '#4572A7'
}
}
},
For newer versions (I'm using the 6.2.0), the yAxis property has a parameter called gridLineWidth. Just set it to 0 and the grids for that axis are going to disappear. In this JSFiddle there is an example of it.
However, if you are in styled mode this it's trickier. Here, you have to set a className for the target axis and then set the CSS like this:
.highcharts-yaxis-grid {
&.right-axis {
path {
stroke: none;
}
}
}
For example, this will make dissapear the grids of the axis with a className set as right-axis. This allow to have different styles for the multiple axis.
I know it's possible to put pie chart labels either inside or outside the pie by changing plotOptions.pie.dataLabels.distance. I am trying to figure out whether it's possible to change that on a point by point basis:
if slice is smaller than 15%, place labels inside the slice
else place the label outside the slice
Is this possible in Highcharts? Below is one of my attempts, which doesn't work; the plain jsfiddle is here: http://jsfiddle.net/supertrue/q6bQP/
plotOptions: {
pie: {
dataLabels: {
distance: -30,
color: 'white',
formatter: function() {
if (this.y < 15 ) {
this.point.dataLabels.color = 'red';
this.point.dataLabels.distance = 20;
return this.point.name;
} else {
return this.point.name;
}
}
},
This post can helps you to acomplish your work :
Is it possible to position Highcharts dataLabels depending on the value?
$.each(chart.series[0].data, function(i, point) {
// using the value or calculating the percent
if(point.percentage < 30) {
point.dataLabel.attr({y:20});
}
});
This can be achieve using events as well.
Working fiddle : Outside Fiddle
Here if data point is less than five the show labels outside the charts.
chart: {
type: 'pie',
events: {
load: function() {
var series = this.series[0];
setTimeout(function(){
(series.points).forEach(function(point, i){
if (point.y < 5) {
point.update({dataLabels:{distance: 2}});
}
});
}, 200);
}
}
}