I know how to disable hover on highcharts, and I edit the answer to disable hove on special slice as this demo, but it doesn't work.
I edit series attribute as the following:
series: [{
showInLegend: false,
type: 'pie',
name: 'Pie Chart',
data: [
['Mobile', 65], // first half of pie
{
name: 'Other',
y: 35,
tooltip: { enabled: false }
} // second half of pie
]
How can I disable hover for special slices on pie charts using highcharts ?
You were pretty close with your custom tooltip property idea. I personally rather using custom names as well, therefor instead of adding a tooltip data object, i'd use a custom property named tooltipDisabled:
{name: 'Other', y: 35, tooltipDisabled:true} // second half of pie
And then, using a tooltip formatter function (a callback function called when a point is hoverd, which is totally override-able), I'd discriminate the points with this property:
tooltip: {
useHTML:true,
formatter: function(){
return this.point.tooltipDisabled ? false : this.point.name +"<br><span style='font-size:18px;vertical-align:middle'>•</span>"+this.series.name+": <b>"+this.y+"</b>";
}
returning false, as you have probably guessed, disables the tooltip.
(as you can see I also added useHTML:true, so highcharts renders the bullet next to the point name.
See fiddle: http://jsfiddle.net/e7brd9do/2/
Related
I have a Highstock graph with Plotlines here: http://jsfiddle.net/qd0rmazg/3/
I'd like to be able to have a legend of Plotlines where, similar to the legend of Series, upon a click Plotlines of a certain category can be made visible or hidden.
In my JSfiddle example, there are 2 categories of Plotlines. Is it possible to toggle the visibility of Plotlines per one category? I couldn't seem to find anything supporting this.
This is how I've created the Plotlines:
xAxis: {
plotLines: [{
value: Date.UTC(2016, 12, 29), // year, month, day
width: 1,
color: 'blue',
dashStyle: 'ShortDash',
label: {
text: 'Category 1',
},
}, {
value: Date.UTC(2016, 11, 12), // year, month, day
width: 1,
color: 'green',
dashStyle: 'Solid',
label: {
text: 'Category 2',
}]
}
As far as I know, there is no native HC legend for the plot lines. But, you can create your custom legend element on the page and use HC capabilities to show/hide plot lines as in their examples:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/axis-addplotline/
chart.xAxis[0].removePlotLine('plot-line-1');
chart.xAxis[0].addPlotLine({
....
id: 'plot-line-1'
});
As noted in my comment, there is a feature request here:
https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/3009547-plotlines-on-legend
Please add your votes and comments.
Vladimir M provided a good solution to show/hide the plot lines with your own custom legend.
The other common approach is to use a line series as your plotLine, which gives you the benefit of the full series functionality.
Example series:
{
name: 'PlotLine',
type: 'line',
color: 'rgba(204,0,0,1)',
data: [25,25,25,25,25,25,25,25,25,25]
}
Fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/
If you need a vertical plot line, the data set up is slightly more complex but still quite feasible.
{{EDIT to demo vertical plot line:
First, you;d have to set a min/max for you y axis (could be done programmatically on chart load):
yAxis: {
min: 0,
max: 75,
maxPadding: 0
}
Then, you specify your data in [x,y] pairs, with the x values being your plotLine value, and the y values being your Y axis min and max:
data: [[4,0], [4,75]]
Updated fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/1/
With that method, you could add a series per plot line, or, if you want all of them to be the same legend and settings, you can add multiple by inserting null points between your desired lines:
data: [[4,0], [4,75], [5,null], [7,0],[7,75]]
Fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/2/
Having a chart type line, where I have drawn points on the same point x with y but different, I should bring up the tooltip on the various points, but unfortunately when I pass with the mouse on the chart appears to me only one of the marks painted on the same x, ignoring the other. The graph is on:
enter link description here
I tried, but unfortunately I have not found anything to solve my problem. And 'possible to bring up the tooltip on all points?
Thank you all for the help.
..
david
Use scatter serie, instead of line chart.
series: [{
type: 'scatter',
lineWidth: 2,
name: 'Litri Carburante Rimasti',
data: data,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y, 2)
},
color: "#000000"
},
color: colorerifornimento,
}]
http://jsfiddle.net/jsd96atf/2/
I want to add a data label to specific point in the 'Area' chart. I'm using 'Highchart' for making graph. I want a data label in chart design as following image. What should I try ? I tried dataLabel defined in 'line' chart but it applies dataLabel to each point in the chart. I want it to be applied for specific point. Also, it should not show value of that point as a dataLabel but it should show series.name on that point.
For the relevant point in your data use the object notation and enabled data labels. You can use format and formatter to display the desired information.
Example of your series would be:
series: [{
name: 'My series name',
data: [5, 10, 30, 100, 200, 300, 600,
{
y: 900,
dataLabels: {
enabled: true,
format: '{series.name}'
}
},
700, 400, 100]
}]
Or see this more elaborate JSFiddle example.
I am building a Highcharts donut chart with specific data for each slice of both pies. Tooltip data is passed inside the drilldown portion of the data and is displayed correctly for the outer ring.
The inner tooltip however is passed by the main data variable and shows the tooltip for the last outer ring that was hovered over.
I would like to specify the data for the inner tooltip as follows:
data = [{
y: 44.73,
color: '#2f7ed8',
drilldown: {
name: 'Unknown',
categories: ['Google', 'Unknown'],
data: [0.00, 44.73],
tooltip_data: ['Google tooltip', 'Unknown tooltip']
},
tooltip_inner: 'Inner Tooltip here'
} ...
My question is, can I pick up which graph is being hovered over (inner or outer) and modify which tooltip is returned by the formatter? The formatter returns the correct data if I do it so:
tooltip: {
useHTML: true,
formatter: function() {
return this.point.tooltip_data;
}
}
Switching the returned data to this.point.tooltip_inner works for the inner pie but of course disregards the outer. I need to be able to switch which point data is returned from tooltip_data if outer to tooltip_inner if inner.
Fiddle with variables for each slice is here: http://jsfiddle.net/bQqM8/
Edit: The fiddle now contains the working example in case anyone else needs to do this.
the problem is the way you create data, let's consider:
trafficData.push({
name: categories[i],
y: data[i].y,
tooltip_inner: data[i].tooltip_inner,
color: data[i].color,
tooltip_data: data[i].tooltip_data // here you are getting tooltip.data
});
And compare that with your data:
data = [{
y: 33.84,
color: '#ff0000',
drilldown: {
name: 'Downloads',
categories: ['News', 'P2P'],
data: [30.36, 3.48],
color: '#ff0000',
tooltip_data: ['News drilldown data here', 'P2P drilldown data here']
},
tooltip_inner: 'Inner Download Tooltip'
},
...
{ another point } ]
I don't see tooltip_data in point object, only in drilldown object. Add missing tooltip_data so it will work.
Is there a a way to not show a series in the legend? As I can see there is
seriesSettings:{
line:{
addToLegend:true,
dataPointText:{
enabled:true,
borderRadius:4,
borderWidth:2,
borderColor:'red',
}
}
},
But this shows/hides the whole series. For instance if I have a line and a bar data series- is it possible to hide only one of them?
Yes, you can selectively show/hide series of the same type, bu adding the necessary value for the addToLegend property.
{
seriesType: 'line',
addToLegend:true,
collectionAlias: 'Households',
data: [0.164, 0.173, 0.184, 0.125,0.258,0.255]
},
{
seriesType: 'line',
addToLegend:false,
collectionAlias: 'Industry',
data: [0.103,0.105,0.112]
},
].
Further you can even omit the initial declaration in the seriesSettings:
{line:{, because by default the property is true. To easen even more your code, you could only set the property to false, where needed.