I have the goal of showing a tooltip on a near real-time chart that is updating constantly.
Using the standard tooltips in the chartjs library, calling Chart.update() will destroy the tooltip.
In the example here, if the user is hovering the chart, and the graph is updated, the tooltip goes away.
Note: if I change the chartjs version to 2.5.0, there is no issue. It appears to be a bug in 2.7.2
How do I prevent this behavior?
Right now there seems to be no official solution. There is still a discussion ongoing on how to fix this: Do not hide tooltip when update is called
Related
I am in the process of building a dashboard with multiple charts on it. For a chart library I've landed on VueChartJS, with the vue-chart-3 wrapper and for a drag n drop library I'm using vue-draggable-next.
The issue I'm having is that if the charts have the responsive option as true and you drag them, their height and width are set to 0. I added a toggle to prove that it's an issue with the responsive feature, but is there anything else I can do to remedy this issue?
Right now I'm wondering if I need to make some invisible toggle that activates every time you click the chart to drag it around and then toggles off when you are done dragging, but that seems like a lot of potential code and time to impliment this feature and wonder if there's not just a better way to do this?
Any advice or help would be greatly appreciated!
I've made a CodeSandbox to show the issue and there is a gif below as well showing what is happening.
I'm working with Chart.js version 2.8 so not sure if it is in the version or if it is a common issue.
My chart loads fine at first but then my page refreshes and the duplicates can be seen when I hover on any of my charts(there are 4).
The duplicate looks like this:
!https://postimg.cc/3db6xFTz
I'm not sure what to try or where to start looking at what causes this. I've tried searching for similar cases but no one seems to have this issue. Any advice would be greatly appreciated.
Right, well I found the problem and the solution.
The root of the issue came about when my page refreshed and the chart would resize. I then tried the Chart.defaults.global.maintainAspectRatio= false;command which worked but duplicated the X-axis tick labels.
The problem: These two commands cannot work together. It causes the duplication on hover.
Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio= false;
The solution: found in the chartjs.org documentation.
Detecting when the canvas size changes can not be done directly from the canvas element. Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size (example):
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="chart"></canvas>
</div>
Note that in order for the above code to correctly resize the chart height, the maintainAspectRatio option must also be set to false.
I added the div's to encase my canvas, changed the sizing and this fixed my problem :)
When using echarts, in several lines of code the following can be achieved: https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-doughnut , more specifically notice the entrance animation and the hover behaviors and the legends hover and the smooth tooltip movement and legend click behavior and the quick chart rerendering.
On the other hand echarts lacks touch events support and some other stuff and thus I wanted to use chart.js to build this same doughnut chart to see if chart.js is capable of it. The chart.js examples I saw online have very basic animations and interactions.
I saw in chart.js website that support is given by creating appropriate stackoverflow question with chart.js tag, so I am creating this question to ask if its possible to create a dougnut chart with the described behaviors using chart.js
Is it possible to show a drop shadow behind a Chart.js tooltip? I think there used to be a showShadow:true option, but it doesn't exist or isn't documented in the current version of Chart.js.
Programming the GDK a few weeks now, the CardScrollView is a pretty nice interface for displaying cards. However one issue with the UI is showing the user how far along they are in the card stack. In the Mirror API, this is nicely handled by the Slider view at the bottom of the screen as described on the Glass Design page:
https://developers.google.com/glass/design/style/metrics-grids
Unfortunately, I have not been able to get this Slider object to display on the CardScrollView and instead have resorted to a klugey 1 of n text.
Is there any way to get this Slider view to display in the GDK?
This is not yet supported by our API but is currently tracked with Issue #256.
For future reference, this feature has been already implemented as described in the original issue.
You can use the method setHorizontalScrollBarEnabled to show the bar, e.g.
mCardScrollView.setHorizontalScrollBarEnabled(true);