How to add a button to a chart.js graph - javascript

How do I add a button inside a chart.js graph?
I want to create a pie chart with drill down. The drill down effect is actually pretty easy with a chart onClick function. But I want to add a button to go to the top level to the canvas. I do not want to place it outside the canvas
I found a similar example of a different chart library.
https://www.highcharts.com/demo/pie-drilldown

Related

React Native Pie Chart - Want to show image (Victory Native)

I am adding a Victory native Pie chart in react native with some additional information to show within it. I am able to show different colors in the pie chart and able to show labels in it.
But what I want is - I want to show images also in Pie chart. Is there any workaround in it or some alternate way by which I can do it?

Customize tooltip for multiple graphs in one plot

I am using React plotly.js
in our application. We are plotting multiple graphs (line, area, bar). I need a way to customise look and feel of tooltip which appears on hover of graph.
This the code sandbox for references of my code.
This is the output of the plot.
Currently the tooltips appear clumsy when we have multiple lines with multiple graphs which appear individually at each line.
Do we have a way to show only one tooltip with data of all lines at a hovered point.

Google Charts, Is it possible to simulate hovering over a legend item with a custom legend?

I'm creating a custom legend for my charts, but I'd like to retain the ability to highlight part of the chart when I hover over a legend item. I know there is setSelection() but is there some kind of setHover() function?

Highcharts, changing legend icon to represent image

I'm creating a stacked bar graph, and I was wondering if I could modify the legend so I would be able to place an image/icon instead of the default box.
Default look:
What I want it to look like:
There is no API that would allow inserting images instead of series symbols in legend. Quickest solution that comes to mind is to create custom legend inside a chart using Renderer (API: http://api.highcharts.com/highcharts#Renderer) or outside a chart using HTML elements. Other than that is it possible to extend Highcharts (How-to: http://www.highcharts.com/docs/extending-highcharts/extending-highcharts) and enable this additional feature.
Example with custom legend outside a chart: http://jsfiddle.net/hs941kka/

Converting click to hover in Jquery based snazzy animated pie chart

I came across this Jquery based pie chart online. You can download it freely from here: http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/
I am unable to convert the mouse click function of sliding pie pieces to react on mousehover in the same way. There seem to be an issue with the way they react to mouse hover. However, when the same mousehover is applied to the table, there is no problem and the pie chart reacts as expected. Can you please look into the code and tell me what needs to be changed in order to get the pie chart to expand on mouse hover.
Thank you very much.
The reason the hover event doesn't work on the chart, is because the chart is a canvas element. The slices aren't separate elements. So you need to use a mousestop event, that gets called every time the user hover over a slice and holds the mouse still.
The mousestop event doesn't come with Jquery, but Richard Scarrott made a Jquery plugin: http://www.richardscarrott.co.uk/posts/view/jquery-mousestop-event
You can use it on the chart like this:
$('#chart').mousestop(100, handleChartClick);

Categories