search

reactjs / react-chartjs

common react charting components using chart.js
MIT License
2.93k stars 301 forks source link

legendTemplate and tooltipTemplate not working? #72

Open palmerj3 opened 8 years ago

palmerj3 commented 8 years ago

I've tried utilizing the legendTemplate chart option and the tooltipTemplate chart option but neither seem to be working for me.

I've even tried modifying the example code to utilize non-existent variables and I see no errors in the console so it appears these options are being ignored?

I've tried this for a line chart and a bar chart.

pjho commented 8 years ago

This issue helps with getting a legend to show.

RamonBeast commented 8 years ago

Trying that example now returns:

Uncaught Invariant Violation: Can only set one ofchildrenorprops.dangerouslySetInnerHTML.

Is there any other way to get the legend to show?

dougmolineux commented 8 years ago

dangerouslySetInnerHTML is the only way to achieve this?

dougmolineux commented 8 years ago

Just wanted to add this, I was able to modify the Tooltip by using this:

chartOptions = {
      multiTooltipTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>",
    }
blairmorris commented 8 years ago

I'm running into the same issues; At first, I was looking at the ChartJS v2 docs which really through me off. The old values can be found in the old ChartJS docs here

I wasn't able to get a legend to render without dangerouslySetInnerHTML, but the fix shown here does work, though it feels like I'm strapping on duct-tape to show a legend.

Regarding tooltips, I was able to change the format of the text with the multiTooltipTemplate option. According to the old docs, you can also define 'customTooltips' in options, it takes a function that returns a tooltip; it gives me some useful data about the point but it's missing legendColors (which I'm assuming is because I'm rendering the legend manually). The v1.1 demo shows them using jQuery to pull down the element, so I'm guessing the lack of a ref is why it can't get the colors from the legend and instead returns white squares.

edit: Turns out the colors missing in the object were from not having a pointColor, once I set one they were populated. I got rid of the custom function and at least I've got the right colors on my tooltips now.

maxfarseer commented 7 years ago

@blairmorris can you share example?