I was using flot pie chart(http://www.flotcharts.org/flot/examples/series-pie/index.html) example and succesfully drew the pie charts. While styling the pie chart, I was able to find the options for pie like colors and opacity and al. but I wanted to change the cursor styling on pie and I found that in the offcial flot page itself it is using ordinary cursor wehn we hover over pie slices. Instead i wanted to change it to cursor pointer styling.. when we give the creating canvas that property it will show pointer cursor for the whole canvas.. so if the canvas is big, it will be pointer cursor even if we hover outside pie graph. Ive also tried to giv the proeprty while at the time of creation,
$.plot($("#canvas_" + key.split(" ").join("_")), pieChartData[key], {
series: {
pie: {
show: true,
radius: 1,
innerRadius: 0.3,
cursor : 'pointer',
stroke: {
color: '#ffffff',
width: 2.0
}
},
}
});
This will not work.. is there any solution for this issue?
Take a look at the 'hoverable' option, described under Customizing the Grid
in the docs and demonstrated in the pie example.
Leave the cursor at default to begin with, then change it to the pointer when you receive a hover event over a pie slice. When you receive a hover event with no attached slice, set the cursor back to default.
You could just target the pie chart and change the CSS class in your stylesheet:
.flot-overlay { cursor: pointer; }
It's not the most graceful way, but it will work!
Related
I have something similar to the Chart Js sample here where I have multiple datasets in my chart that I set as 'index.' When you hover over a point, each dataset's point matching that x-value will highlight. Is there any way to set that highlighting to work the same way as the tooltip? I want to have the points highlight when the mouse hovers over the x-axis, not just the points.
You're looking for options.hover.intersect:
if true, the hover mode only applies when the mouse position intersects an item on the chart.
The default is true so you should change it to false:
options: {
hover: {
intersect: false
}
}
I have a svg label which i am drawing using highchart general drawing. I want to know is there any way i can give an option for zoom in to that label on mouse hover.
Below is the code for label.
ren.label('PhantomJS', 210, 82)
.attr({
r: 5,
width: 100,
fill: colors[1]
})
.css({
color: 'white',
fontWeight: 'bold'
})
.add();
It depends on how the rest of your chart is built and what, if any, data live there.
Highcharts has a method to zoom to a specific point, but you need to define what that point is: https://api.highcharts.com/class-reference/Highcharts.Point#zoomTo. You're drawing a label after the chart has been rendered, so it's not part of the chart's data, and therefore, there's no "point" you can zoom to.
Another alternative you could try is triggering the setExtremes() function to update the chart axes and "zoom" in on a particular area of the chart (https://api.highcharts.com/class-reference/Highcharts.Axis%23setExtremes). See the linked fiddle in this Stack Overflow answer: https://stackoverflow.com/a/44875178/2596103. What they did here is use an HTML button that lives outside the chart vs. a rendered label.
You may want to consider annotations (https://api.highcharts.com/highcharts/annotations) and see whether they can get you the zoom feature you're seeking.
I hope this information is helpful.
I'm not sure if there is much I can give here code wise, but I am running into a problem with the tooltip in highcharts for a combined bubble/scatter chart. It is worth noting that in the case I am working with now, there is only a single point in either series, so only two things on the chart at once.
If I chart two series of bubbles, like this for example:
myChart.addSeries({
name: name1,
color: '#000000',
data: firstSeries,
type: 'bubble'
}, true);
myChart.addSeries({
name: name2,
color: '#058DC7',
data: secondSeries,
type: 'bubble'
}, true);
The tooltips work perfectly. I can mouse over one bubble and see the tooltip, then mouse over another and see the tooltip.
But, if I do the exact same thing only replacing either of the "bubble" with "scatter", I run into some weird behavior where if I mouse over the bubble I can see the tooltip until my mouse moves. If the mouse moves even a single pixel, Highcharts will suddenly display the tooltip on the scatter point as if I am moused over the scatter point. If I move my mouse away from the bubble, the tooltip on the scatter disappears.
The scatter tooltip behaves as expected when moused over. If it matters, I have disabled stickyTracking and have the snap set to 10. Setting the snap didn't seem to fix anything. Before I disabled stickyTracking, my mouse being anywhere on the chart would result in the tooltip for the scatter point being displayed.
Sorry to not include a fiddle as the highchart chart is tied tight to my application. Earlier the mouse events were getting tracked over the legends as well as the legend labels . For some reason these labels does not take the events anymore, rather it goes to the container holding the charts.
Any inputs?
Also when i try to inspect the above highlighted legend label, the parent container is highlighted instead of the label itself. The above problem is seen for other labels out of the plot area as well.
You can use custom-events extension which allows to catch this event on legend item.
legend: {
itemEvents: {
mouseover:function(){
console.log(this);
}
}
},
Example: http://jsfiddle.net/Utx8g/413/
I want to remove the "glow" from around those circles. Those paths you see are the glows themselves, not the marker with the 2px red and blue solid rings. So, remove those path elements.
There should be a setting in highcharts that allows me to disable/modify this "glow."
These elements are not rendered immediately when the chart is rendered. They are rendered when you start interacting with the chart, which means selecting them and removing them manually doesn't seem to work.
Thoughts?
You can set the size of the halo hover effect with plotOptions, for example (JSFiddle demo):
plotOptions: {
series: {
states: {
hover: {
enabled: true,
halo: {
size: 0
}
}
}
}
}
There are some other options to customize the hover effect and the halo itself. See the documentation here. If you don't want the series to show any hover effect either you can just set enabled: false.