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/
Related
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
I have a chart in which I combine a stacked column chart with a stacked line chart. I would like to have stackLabels for the column chart only, and suppress the stackLabels for the stacked line chart.
It currently looks like this:
How can I achieve stack labels ONLY on the column chart?
Also see https://jsfiddle.net/o1bqwu7r/4/ or :
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
stackLabels: {
enabled: true
}
},
plotOptions: {
series: {
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],
type: 'column'
}, {
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],
type: 'column'
}, {
data: [2.9, 7.5, 16.4, 12.2, 14.0, 17.0, 13.6, 14.5, 21.4, 19.1, 9.6, 5.4],
type: 'line'
}, {
data: [14.0, 17.0, 13.6, 14.5, 21.4, 19.1, 9.6, 5.4, 2.9, 7.5, 10.4, 12.2],
type: 'line'
},]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
You can add a separate yAxis for the line series:
yAxis: [{
stackLabels: {
enabled: true
}
}, {
linkedTo: 0,
visible: false
}],
series: [{
data: [...],
type: 'column'
}, {
data: [...],
type: 'column'
}, {
yAxis: 1,
data: [...],
type: 'line'
}, {
yAxis: 1,
data: [...],
type: 'line'
}]
Live demo: https://jsfiddle.net/BlackLabel/1ojnakzw/1/
API Reference: https://api.highcharts.com/highcharts/yAxis
I'm using 3D Column Highcharts and it does not show the datalabels, in 2D is ok but 3D is not. It's also so strange that the png download shows the datalabels.
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: 'Chart rotation demo'
},
subtitle: {
text: 'Test options by dragging the sliders below'
},
plotOptions: {
column: {
depth: 25
},
},
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],
dataLabels: {
enabled: true
}
}],
});
I expect the datalabels can be shown at the top of the columns, need help and thanks a lot!
Not sure if you noticed it but upgrading to V7.2.1 will fix the issue.
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 has series like this
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 19552.1, 95.6, 54.4]
}]
you can see that I has small points (29.9, 71.5) in this series and other (19552.1) has larger than small point
that make I cant click in small point
how can I deal with this problem
you can see this jsfiddle to know what I mean
Or You could set a minimum length for the columns using the ´minPointLength´ option
http://api.highcharts.com/highcharts#plotOptions.column.events.click
minPointLength: 0,
jsfiddle
how about to use logarithmic yAxis
http://jsfiddle.net/xLcmojzr/2/
$(function () {
$('#container').highcharts({
title: {
text: 'Logarithmic axis demo'
},
xAxis: {
tickInterval: 1
},
yAxis: {
type: 'logarithmic',
minorTickInterval: 0.1
},
tooltip: {
headerFormat: '<b>{series.name}</b><br />',
pointFormat: 'x = {point.x}, y = {point.y}'
},
series: [{
data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
pointStart: 1
}]
});
});