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.
Related
I am trying to hide specific legend items on my graph (http://api.highcharts.com/highcharts/legend). If I loop through the chart.legend.allItems and try to change a specific items visible property it does not effect the legend at all.
$.each(chart.legend.allItems, function() {
this.visible = false;
});
How can I hide a specific legend item on my graph ?
I think this is being made out to be more complex than it needs to be.
You can set showInLegend to false in your config options for the series.
If you need to do it programmatically, you can use series.update() to accomplish it dynamically.
Reference:
http://api.highcharts.com/highcharts/plotOptions.series.showInLegend
http://api.highcharts.com/highcharts/Series.update
I found other solution in this question
var item = chart.series[1];
//hide serie in the graph
item.hide();
item.options.showInLegend = false;
item.legendItem = null;
chart.legend.destroyItem(item);
chart.legend.render();
EDIT:
Other solution for last version of highcharts:
$('#container').highcharts().series[1].update({ showInLegend: false });
You can do that with the load event - Highcharts Doc
chart: {
events: {
load: function() {
var myChart = this;
$.each(myChart.series, function(index, serie) {
if(index === 2 ) { // hide serie
serie.hide();
}
});
}
}
},
Here a fiddle
if you want to hide some labels you can add some css class to hide them according to some special feature of the series. I pass an example in which the series is hidden with empty data and also hide the label:
for (var i = 0; i < chart.series.length; i++) {
if (chart.series[i].dataMax === 0) {
chart.series[i].hide();
}
}
$("#charContent").find('.highcharts-legend-item-hidden').each(function () {
$(this).addClass('hidden');
});
In the css:
.highcharts-legend-item-hidden.hidden {
display: none;
}
Maybe it's not a very clean solution but it works for me
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/
I'm creating a bar chart with positive and negative values and display the xAxis (category name) of each data point (See Fiddle: https://jsfiddle.net/bej8j/75/).
Here's what I have for plot options but I'm not sure what else I need (Really only putting this code in here because I need to include some code to link to a jsfiddle)
plotOptions : {
series : {
dataLabels: {
formatter: function() {
return this.x
},
enabled: true
}
}
},
I'm trying to place the label so that it's aligned with the start of each bar on the chart. I photoshoped my desired result: http://i.imgur.com/0I1jSHW.png
Any help would be greatly appreciated.
You can iterate on each datalabel and use translate() function to move SVG element.
http://jsfiddle.net/eMjGg/7/
$.each(chart.series[0].data,function(i,data){
position = chart.yAxis[0].toPixels(0);
console.log(data);
if(data.y < 0)
position-=10;
else
position-=70;
data.dataLabel.attr({
x:position
});
});
I think this would help you: http://jsfiddle.net/42dRt/5/
Here's more info: high-charts datalabel position needs to change when value is too small
You must play with the X value:
plotOptions : {
series : {
dataLabels: {
formatter: function() {
return this.x
},
x: ?,
enabled: true
}
}
}
I have a stock chart with the fixed tooltip like the one shown in the stock tooltip positioner example. Now I want to add some flags on the series. Each flag's tooltip should be adjacent to the flag when it is "mouse over", like the default positioning/format of a tooltip. Also, each flag's tooltip has its own text and should not affect the fixed tooltip when displayed (eg. the fixed tooltip would show the stock price and the flag tooltip would show some text associates with the flag)
Do you have any related sample code I can take a look at? thx!
This is not directly supported but possible to achieve, take a look: http://jsfiddle.net/hzYhQ/2/
1) Add custom property for a chart with mouseout/mouseover events for flags:
plotOptions: {
flags: {
events: {
mouseOver: function(){
this.chart.flagTooltip = true;
},
mouseOut: function(){
this.chart.flagTooltip = false;
}
}
}
}
2) Add checking where tooltip should be displayed according to that flag:
positioner: function (w,h,p) {
var x = 10,
y = 35;
if(this.chart.flagTooltip) {
x = p.plotX;
y = p.plotY;
}
return { x: x, y: y };
}
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);
}
}
}