I want to have x axis labelled before drilling down but as soon as a user drills down the x axis labels should not be visible anymore. How can I implement?
Is it safe to assume that you have an afterSetExtremes event, like so?
xAxis:{
labels: {
enabled: true
},
events:{
afterSetExtremes:afterSetExtremes
},
.....
If so, inside of that function you could do the following:
function afterSetExtremes(){
$('#container').highcharts().xAxis[0].update({
labels:{
enabled: false
}
});
}
Here you can run my example. Hope it helps!
Highcharts.chart('container', {
chart:{
zoomType: 'x'
},
title: {
text: 'Zoom in on chart to hide xAxis labels'
},
xAxis: {
labels: {
enabled: true
},
events:{
afterSetExtremes:afterSetExtremes
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
function afterSetExtremes(){
$('#container').highcharts().xAxis[0].update({
labels:{
enabled: false
}
});
}
#container {
height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Use drilldown and drillup events:
const setLabelsVisibility = (chart, isVisible) => {
chart.xAxis[0].update({
labels: {
enabled: isVisible
}
}, false);
};
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function() {
setLabelsVisibility(this, false)
},
drillup: function() {
setLabelsVisibility(this, true)
}
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/vpxhum80/
API Reference: https://api.highcharts.com/highcharts/chart.events
Related
In polar chart show tooltip when hover on point only not like the this image
Thanks to Torstein Hønsi for this chart
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter'
},
plotOptions: {
series: {
stickyTracking: false
}
},
tooltip: {
snap: 0
},
series: [{
lineWidth:2,
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
</script>
Example
Set stickyTracking property to false:
Highcharts.chart('container', {
chart: {
polar: true
},
series: [{
stickyTracking: false,
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}]
});
API Reference: https://api.highcharts.com/highcharts/series.line.stickyTracking
Live demo: http://jsfiddle.net/BlackLabel/2ya5dwfL/
Here is an example: http://jsfiddle.net/sxm38nsj/4/
When the xAxis is a string, I can get the index of click point.
But when the xAxis is datetime, how can I get the index? Or how can I trigger the point's click events?
eg:http://jsfiddle.net/sxm38nsj/5/
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
events: {
click:function(e){
var column = Math.abs(Math.round(e.xAxis[0].value));
alert('bland:',column);
this.series[0].data[column].firePointEvent('click', event);
}
}
},
xAxis: {
type: 'datetime'
},
plotOptions: {
column: {
//pointPadding: 0.2,
//borderWidth: 0
point:{
events:{
click: function(){
alert(this.x);
console.log(this);
}
}
}
}
},
series: [{data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000 // one day
}]
});
});
You can use built-in method series.searchPoint() to find closest point to the mouse (or rather event) position, for example: http://jsfiddle.net/sxm38nsj/6/
chart: {
type: 'column',
events: {
click: function(e) {
var chart = this;
point = chart.series[0].searchPoint(chart.pointer.normalize(e));
if (point) {
point.firePointEvent('click', event);
}
}
}
},
Another solution is to find closest point to your column value. You can search series.xData array, to get index of the closest point to the mouse event.
I use stacklabels in my stacked bar chart.
stackLabels: {
rotation : angelLabel,
style: {
fontSize: labelFontSize,
fontFamily: labelFontFamily
},
enabled:true,
color: '#000000',
useHTML: true
}
The code above works well at initialization. Now, I need to change "enabled" to false.
The code below is not working.
chart.options.yAxis[0].stackLabels.enabled = false;
chart.redraw();
How can i change stacklabels dynamically?
stackLabels is a property of a yAxis, so you could update that axis using API function Axis.update()
$(function () {
var chart = $('#container').highcharts({
chart: {
type: 'column'
},
yAxis: {
stackLabels: {
enabled: true
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
}).highcharts();
var enable = true;
$('#button').click(function () {
enable = !enable;
chart.yAxis[0].update({
stackLabels: {
enabled: enable
}
});
});
});
Example: http://jsfiddle.net/yqypj4qr/
I saw a similar question here.
In reply its written that we can have background color by making a rectangle.
My question is how I can get x and Y position of all the ticks on axis. I will need it because I want background color only on alternate dates.
Thanks
Here's a quick example that shades between the 2nd and 4th ticks:
var tickStart = 1;
var tickEnd = 3;
$(function () {
var rect = null;
function drawRect(chart){
if (rect){
rect.element.remove();
}
var xAxis = chart.xAxis[0];
var pixStart = xAxis.toPixels (xAxis.tickPositions[tickStart], false);
var pixEnd = xAxis.toPixels (xAxis.tickPositions[tickEnd], false);
rect = chart.renderer.rect(pixStart, chart.chartHeight - xAxis.bottom, pixEnd - pixStart , 25, 00)
.attr({
'stroke-width': 0,
stroke: '#888888',
fill: '#888888',
zIndex: 3
})
.add();
}
$('#container').highcharts({
chart: {
events: {
load: function() {
drawRect(this);
},
redraw: function(){
drawRect(this);
}
}
},
xAxis: {
},
series: [{
animation: false,
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
Fiddle here.
Did you try to use labels.formatter with background and useHTML flag? Something like this: http://jsfiddle.net/AeV7h/
xAxis: {
categories: ['Foo', 'Bar', 'Foobar'],
labels: {
useHTML: true,
formatter: function() {
return '<span class="hc-label">' + this.value + '</span>';
}
}
},
And CSS:
.hc-label {
background-color: red;
padding: 0px 5px;
color: yellow;
}
When I hover an scatter point in a scatter chart, the mouseOver callback receive a event object, but I cant find the current point nor clientX/clientY in that object.
How can I get it?
Im using version v2.3.5 of highcharts
chart = new Highcharts.Chart({
[...]
plotOptions: {
scatter: {
[...]
events: {
click: function(ev) {
[...]
scatterClick(ev);
},
mouseOver: function(ev) {
[...]
scatterHover(ev);
},
You are handling the wrong event. If you want the point information, set the the callback on the point mouseOver event.
Fiddle here.
series: [{
type: 'scatter',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
point: {
events: {
mouseOver: function() {
x = this;
alert ('x: '+ this.x +', y: '+ this.y);
}
}
}
}]
In the mouseOver event on the series.data callback, 'this' refers to the point, so you hold be able to use
this.x;
this.y;
E.g
chart = new Highcharts.Chart({
[...]
series: {
data: {
[...]
events: {
click: function(ev) {
alert (this.y);
},
mouseOver: function(ev) {
alert(this.x);
},