Enjoyed this video but need to do custom date formatting in your tooltip? Watch this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-GnRAbf9MMQI.html
I started with Chartjs using a simple chart, but as the project progressed, customer requests increased. Every time I was worried about how to do it, but you made a video and shared what I was looking for. Keep it up!
Thank you for your kind words. I'm glad it was helpful and got you ahead. Tooltips is a quite powerful and there is a lot behind the scene that can be done once you know how. Good luck with your project!
Let these videos keep coming. Really useful and self-explanatory. By showing what's going on the dev console, one can look up and explore more functionality and other properties. Thanks a lot for these videos.
Hi, thank u so much for this, it helps me do my project. U mentioned converting PHP to Javascript to be used for the charts' tooltips in the video, 9:48. May I know how can it be done? For example, maybe after fetching data from DB in Laravel's controller. That variables are in PHP to be used as chartJS' Javascript. You can also explain without the Laravel development. Thank you.
Can it be used with scatter plots? I'm facing issues when trying to incorporate tooltips alongside other plugins. The current setup looks like this: plugins: [chartAreaBackground, quarterIndicator], How can I include tooltips in this configuration, given that they should be structured like this: plugins: { tooltip: { callbacks:{ ... } } }
Hi great videos and very clearly and informative, i have learnt a lot from them. Thank you. I have a chart with two datasets stacked bars and want to show in the tooltips both datasets with the correct color bars too, can you show me how to do that please?
Great video. Sorry if I missed it but I would like to be able to change the label within the body. I hope that is the correct terminology - basically the text after the coloured square. If I return 'text' with "label: function (context)" I can fix the value, in this case it returns 'text'. But if I refer to context[0].dataIndex I get "Cannot read properties of undefined (reading 'dataIndex')". I don't understand what I am doing wrong here? Maybe it's not possible to do what I want?
How about styling text? Not just but add , and etc. Possible ? I need to add custom styled text, possible even small icon images and etc and I see no way to do that, just can add plain text and new lines if array ...
Hi George, thank you for your question. Chart.js Documentation has some basic styling options. These videos below would help you out with that: If you want to add icons watch this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-GRuj90oHOPU.html If you want to add image in tooltip watch this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qG5wdD3fTvI.html If you want to fully customize everything in tooltip watch this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4oC31cjXQ_k.html
Hi George, thank you for your question. Chart.js Documentation has some basic styling options. These videos below would help you out with that: If you want to add icons watch this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-GRuj90oHOPU.html If you want to add image in tooltip watch this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qG5wdD3fTvI.html If you want to fully customize everything in tooltip watch this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4oC31cjXQ_k.html Just remember we cannot add html code into tooltip as it is canvas code not HTML/CSS. If you want a HTML tooltip that is possible watch this: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-3W3NFKxGw5w.html
Hi Victor thank you for your question. Are you referring to something like this: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qG5wdD3fTvI.html Where the color box is converted into an image.
This was absolutely excellent thank you so much. My project is alive because of chart.js. But I need to do exactly this, but since I update the data in my chart I don't know if I can achieve it that way? Is there a way to update the chart, and get a new callback for this, and for example put new data from array[dataIndex] into labels[dataIndex]?
is it possible to have different bar with different tooltip value like [bar red population 20, male 8, female 12], [bar blue population 24, male 14, female 10]? been stock with this problem for a couple of weeks now need help please thanks in advance!
Hello! Back for more with your awesome tutorials. Could you explain how this might work with a scatter plot in chart.js? I tried adding an additional data point to each of the vertices (ie. {x: 1, y: 3, data: 100}) but was unable to get the context.raw.data pull to work in the tooltip. Any tips on this?
Hi Eric, thank you for your question. Based on your code you have it correct. I make a video as well where I do the same and it does show. Watch this video here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-80w6gWWDJM0.html I suspect perhaps you use callback instead of callbacks. Or any of your name spaces is missing something. Try to cross check with the video if anything would be different.
Hi, I have tooltip title as date ex. ' Oct 8, 2021, 11:00:00 am. ' and have x axis type mention as timeseries I want date on tooltip as ' Oct 8, 2021, 11 am' How to do that ? I have tried it using substring but get the problem after 10 am instead of 10 it is showing 1 and cuts out 0 and also have problem for putting am or pm at the end, Can you please help ?
Thank you for your question. I have created an answer video covering your specific question. You can find the video here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-GnRAbf9MMQI.html Using substring is not an option in your case as it would effect more items with the same character. However the solution is with Javascript Date and Time options. The video will make a complete breakdown which is shows you how to customize basically everything of your date.
Hi Luis, thank you for your question. If you want to play with font colors that contain 2 colors in a single line you must use gradient in combination with math calculations. Watch this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Jy9j36rcQps.html Study the gradient section. For bold you might be able to do this as well but that might be differently. However, if you really want a custom style tooltip easier would be the build in HTML. Canvas styling just works different from CSS.
@Luis Goyone for justify it might be possible but it needs to be calculated in pixels how much space there is left. You need to consider canvas like a printer which calculates the x.y coordinates of each letter on a page. Meaning it does not read the CSS as a HTML page, once the text is there it does not recognize that the text is there. The video below would be better to understand the logic and behavior of canvas. *Custom Tooltip In Canvas* Perhaps it is better to watch this video. Here I build a tooltip from scratch for Chart.js in canvas. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-2kpeWH0lu0s.html If you understand that you can completely customize anything wihtin the canvas. *Custom Tooltip with HTML* If you truly need to use CSS go and build an HTML version which is here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-3W3NFKxGw5w.html
Hi Mauro thank you for your question. I have created an answer video here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Ic1bx82vWD0.html It will show you exactly how to do this.
Thank You, By the way, if I want to duplicate more than 3 text lines on the bottom of the footer of the Tooltips, how will I do that and is it possible to put the Tooltips code under the options: gradientBarConfiguration sentence?
@@maurodanielmezazamora1515 thank you for your question. I have created another video covering your specific question here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TlR1Unq1h4c.html The video will show you how to create multiple lines in the tooltip footer. Next. I do not understand your reference regarding to the gradientbar settings. I guess you make your bars gradients. And you want make the tooltip look gradient as well?
No I just wanted the tooltips with multiple lines to be shown on the gradient bars, because when I added the tooltips footers sentence on the code of the gradient bars, they won't show it to me.
