In the below example, is it possible to "hide" the Y Axis values - for example - do not show the 0 and the 200 (in the left).
Looking for cleaner chart..
http://www.highcharts.com/demo/gauge-solid/dark-unica
By targeting the yAxis labels via CSS you can do so just fine
CSS:
.highcharts-axis-labels.highcharts-yaxis-labels{
display:none;
}
Or alternatively, via setting the showFirstLabel and showLastLabel property of the yAxis in the case of the gauge has the same effect.
JS:
yAxis: {
showFirstLabel:false,
showLastLabel:false,
min: 0,
max: 5,
title: {
text: 'RPM'
}
}
Here is a demo showing both http://jsfiddle.net/robschmuecker/yra3mex6/
Here are the docs regarding the properties http://api.highcharts.com/highcharts#yAxis.showFirstLabel
The following code will hide the Y-axis labels (JSfiddle example):
yAxis: {
labels: {
enabled: false
}
}
You can also use the 'formatter' as shown below:
labels: {
y: 16,
formatter: function () {
if(this.value == 0){
return '0B'; // your choice of value
} else {
return '425B'; // you can pass the empty string
}
}
}
Related
I want to use Accessible line chart of Highcharts (https://www.highcharts.com/demo/accessible-line)
In demo, I saw some series label position on last point, some in middle and first point.
How can I set all series label on last point?
Sorry for my bad English!
You can use data labels instead of series labels.
Example:
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.point.index === this.series.points.length - 1) {
return this.series.name;
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/9ps2ckhr/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels
Highcharts released a new version (I believe 7.1) and as a result whenever you hover over a certain element on a graph, the rest of the elements lighten in color.
I want to remove this effect and have the elements not lighten in color and still be visible to the user.
Any help is appreciated. Thanks!
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
}
I have tried this and this is not what I need or at least it doesn't remove the effect that I am talking about.
This new hover effect is called the inactive state. You can disable it by setting plotOptions.series.states.inactive.opacity = 1.
Code:
plotOptions: {
series: {
states: {
inactive: {
opacity: 1
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/34m7k0f2/1/
API reference:
https://api.highcharts.com/highcharts/plotOptions.series.states.inactive
I did following to remove highcharts hover effect in highcharts JS v7.1.2 (2019-06-03)
`plotOptions:{
series: {
states: {
hover: {
halo: {
size: 1
}
}
}
}
}`
In Highcharts, there is a possibility to shift the y-Axis labels into the plot-area with
yAxis: {
labels: {
align: 'left',
x: 0,
y: -2
}
}
With this setting, the labels are covered by the lines, data-labels and so on.
Is it possible to draw the horizontal grid lines across the yAxis-Label-Area without making the xAxis and the series start there. The wished behavior is indicated with the black lines in the image below.
The simplest solution is to adjust the xAxis, for example:
xAxis: {
min: -0.5
}
Live demo: http://jsfiddle.net/BlackLabel/qnayxb04/
API: https://api.highcharts.com/highcharts/xAxis.min
If you want to have more control over the lines, you can use setAttribute to edit the path element:
chart: {
events: {
load: function() {
var gridLines = this.yAxis[0].gridGroup.element.children,
i,
path;
for (i = 0; i < gridLines.length; i++) {
path = gridLines[i].attributes.d.nodeValue;
path = 'M 40' + path.substr(4);
gridLines[i].setAttribute('d', path)
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/61h5qtn9/1/
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);
}
}
}