I am trying to disable markers on Highcharts but still see them when I hover over the data points and can't get it working. I have tried disabling the markers at chart, series and data levels and in each case, the markers just disappear and I can't get the data points when I hover over them. Here is the code where I'm disabling the markers for one data series:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(document).ready(function() {
//Define the data points
//Define and render the HighChart
chart = new Highcharts.Chart({
chart: {
renderTo: "container",
defaultSeriesType: "scatter"
},
plotOptions: {
scatter: {
lineWidth: 2
}
},
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],
marker: {
enabled: false
}
},
{data: [129.9, 171.5, 10.4, 12.2, 14.0, 17.0, 13.6, 14.5, 21.4, 19.1, 9.6, 5.4]}]
})
})
</script>
</head>
<body>
<div id="container" style="height: 600px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
</body>
</html>
Why isn't this working?
For a scatter chart, the hover event happens on the marker. If you disable the markers, you disable the hover event. I'd just set the fillColor to transparent:
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],
marker: {
fillColor: 'transparent'
}
}
Fiddle here.
EDITS
I was wrong, you can disable the marker and still get mouseovers to work. It doesn't work in your case, though, because you are using a scatter chart. Switching to a default line series and all is well.
Related
Highcharts.chart('container',{
chart: {
//renderTo: document.getElementById("container"),
type: 'column'
},
accessibility: {
description:'access description'
},
title: {
text: 'this is the graph'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
showInLegend: true
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},
{
name: 'japan',
data: [29.9, 73.5, 106.4, 45.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/high-contrast-light.js"></script>
<div id="container" tabindex="0" style="padding: 10px 1px 1px 1px; height: 240px; width: 500px;"></div>
I have a column chart with two series. The narrator creates issue in reading the data in such scenario whereas with one series, it's working. Any insights on this?
Demo project: jsfiddle.net/pfsbyxwz/3
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/
The edge style of lines in previous versions of highcharts (at least through 2.2) end with a blocky edge when encountering a null value. In the current version of highcharts, the edge is rounded, this makes it more difficult to discern short lines in charts I'm making from points that are from another series. Here's how I want the lines to look using highcharts 2.2: jsfiddle
I can't figure out how to make them look that way using the current highcharts: jsfiddle. I've tried things like disabling the marker and adding square markers, but no luck.
Here's the code to create the chart:
<script src="http://code.highcharts.com/2.2/highcharts.js"></script>
or
<script src="http://code.highcharts.com/highcharts.js"></script>
and this plot:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
plotOptions: {
line: {
lineWidth: 10,
marker: {
enabled: false
}
}
},
series: [{
data: [29.9, 71.5, 106.4, null, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2012, 0, 1),
pointInterval: 24 * 36e5
}]
});
Set plotOptions.line.dashStyle to 'Solid'. Example JSFiddle.
(This should be default, so why setting it explicitly makes them non-rounded is strange.)
I'm trying to create a spider chart with a plot band that runs up against the outer edge of the circular border. Unfortunately, no matter what I try (yAxis max, yAxis maxPadding, plotBand thickness....) (tested in Firefox and Chrome), it ends up with some white space in between the yAxis max and the edge of the chart. I'm creating a bullseye pattern in my actual application, which looks fine except for the whitespace.
edit: the problem is not that I cannot fill in this whitespace (I can if I just increase the plotBand end to beyond the yAxis.max. The problem is that this area exists at all--I also want the last point to go up to the edge of the chart, so the inner plot bands are not shrunken to scale.
In this example, there's also whitespace in the middle of the circle--that's ok.
http://jsfiddle.net/XEte8/
html:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 400px"></div>
javascript:
$(function () {
$('#container').highcharts({
chart: {
polar:true
},
yAxis: {
plotBands: [{ // mark the weekend
color: '#FCFFC5',
from: 0,
to: 250,
}],
max:250,
endOnTick:true,
maxPadding:0,
minPadding:0,
startOnTick:true,
tickmarkPlacement:"on"
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000
}]
});
});
What you need is configure tickInterval
javascript:
$(function () {
$('#container').highcharts({
chart: {
polar:true,
marginTop: 10
},
yAxis: {
plotBands: [{ // mark the weekend
color: '#FCFFC5',
from: 100,
to: 250,
}],
max:250,
tickInterval: 50,
startOnTick:true,
tickmarkPlacement:"on"
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000
}]
});
});
jsfiddle: http://jsfiddle.net/Ng3s5/
If the endOnTick option is true, max will sometimes be rounded up. I updated your fiddle with endOnTick:false:
http://jsfiddle.net/XEte8/1/
I am using Highstock-1.2.4 along with jQuery in my application. In one of the dialog I highstocks stacked column.
My issue is, if there are graph with large y-axis value (eg. 200
unit) along with a graph with small y-axis value (eg. 1 unit), then tooltip for the small graphs are not displayed properly.
For better understanding I have provided example.
In the above example "jan" has very small graph.If u hover over it (i.e jan) u get tooltip for series '3' and '4' which is expected one. Now if you resize the graph (using resize handler present at right corner) to reduce the graph width and then hover over small graph at "jan" youu get tooltip only for series 4 (which is 0).
Please some one guide how to handle this kind of issues.
Sample Code:
<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>
<div id="resizer" style="min-width: 350px; min-height: 200px">
<div id="inner-resizer">
<div id="container" style="height: 300px">
</div>
</div>
</div>
var container = $('#container')[0];
$('#resizer').resizable({
resize: function() {
chart.setSize(
this.offsetWidth - 20,
this.offsetHeight - 20,
false
);
}
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
zoomType:'xy'
},
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [0,176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
},
{
data: [5, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [0,176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
});
I think its not tool tip issue, when you re size the graph to very small size, one can not judge mouse over so perfectly than regular size.
Even, in the regular size if you over the graph shows tooltip for other series later.
What I can suggest here is try
tooltip:{
shared:true
}
Link: http://jsfiddle.net/mhardik/yPLjR/623/
With this you can get tooltip even with lower size.
EDIT:
Set
plotOptions: {
series: {
stacking: 'percent'
}
}
which will set column height relative to percent. So, you will get bar even for very low values.