Chart.js x-axis label duplicating on hover - chart.js

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 :)

Related

ChartJS charts width and height set to 0 when responsive and dragged. Any ideas as to why?

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.

how to change apache superset's chart's background color?

Per How to Change Apache Superset Template from the Superset User Interface? , I was able to change the CSS template for Superset dashboard. But the charts inside the dashboard are not affected. e.g. most of the charts have white colored background(e.g. Piechart) and some people dislike it. How to change the chart background color? I mean change it for all charts or for one chart.

Disclaimer: This should work, but is a bit hacky and could have long-term support implications:
I've been fiddling with a "dark mode" dashboard just to kick the tires on this. Here's a screenshot just for fun:
So... what did I do?
Click "Edit Dashboard" in the top right of your screenshot
When in edit mode, the top right menu has an option to "Edit CSS"
Use your browser's inspector to hack away! That said, here are a couple of key ingredients:
.dashboard-component{ background: whatever} - sets the main background of each viz card, but you'll still see many components still have white backgrounds within these wrappers.
.slice_container svg{
background-color: transparent !important;
} - this overrides the white background of the components I ran into (including Pie charts!).
If viz components use SVG you can get pretty clever with inspecting/overriding various bits. A couple of gotchas with the above:
If a viz component contains multiple SVG elements, this may have side effects.
If a viz uses canvas instead of svg you will run into more trouble
In the worst case scenario, you may need to check out the superset-ui-plugins repo and make tweaks. This dev process isn't super straightforward, but some of us are working to improve that.

Easiest solution for me is using dark reader extension.

Problem with xy grid and menu in Microsoft Edge only

I've created a responsive dropdown/drilldown megamenu in Foundation 6.5.3.
It works great in every browser except Microsoft Edge and IE11. I expected problems in IE, but the edge issues threw me for a loop.
In Edge, the menu items get stacked vertically even though it is supposed to be a horizontal menu. As illustrated by this pen:
https://codepen.io/denpub/pen/KLRQGO
right now the divs that wrap the menus and the one that wraps the large menu contain both the grid-x and cell styles:
<div class="grid-x cell ..."></div>
seems to be the what causes the stacking issue and if I separate these like so:
<div class="grid-x ..."><div class="cell"></div></div>
it fixes the stacking issue in Edge, but causes the menu to lose the nice flex spacing in all browsers as illustrated with this pen:
https://codepen.io/denpub/pen/KLRojm
In IE11 all the menu items stack on top of each other. If anyone has a suggestion to resolve this it would be greatly appreciated.

My guess is it's the expanded class on the parent menu. This could cause the li's to go full width when there is less space.

can't set ChartJS canvas width

I can not get ChartJS to restrict itself to 200px. It takes the entire width of the browser. What am I missing.
I am using the following CDN
<div id="pnlChart" style="height:200px" >
<canvas id="myChart" width="400" height="200" class="chart" ></canvas>
</div>
my data that is being returned from the server appears to be well formed and drawing the chart correctly. It does not have the width/height in it. (I have pulled this from Chrome's dev tools.
{"type":"line","labels":[0,2,6,7,8,9,10,11,12,13,14,1,3,4,5,15,16,17,18,19,20,21,22,23],"datasets":[{"label":"Data","data":[2,1,8,36,119,179,214,165,87,173,220,0,0,0,0,0,0,0,0,0,0,0,0,0]}]}

You should be able to disable this container-width filling behaviour by telling Chart.js not to use responsive mode. Try passing this into the global configuration of the chart (the highest level of options):
options: {
responsive: false
}
See the Chart.js documentation for an example of how this fits into the full definition of a chart.
If that does not work for some reason then you could instead limit the width of the div element which contains the canvas on which your graph is drawn. Based on your example you could add this to your CSS:
div#pnlChart {width: 200px}
Even if you can get one of these methods to work, ideally you don't want to be specifying fixed widths for items these days because it makes it harder for pages to display well on the myriad of device screens which are in use now.
It's much better to develop a responsive layout for your site which will adjust to suit any screen width, from small smartphones to large desktop monitors. Search online for guides about "responsive design" for articles about this subject.

Amcharts : small (sometimes 0px) chart height on page load (in default tab)

I have an Amcharts in a tab but when it is created on page load, it is compressed with an incorrect (too small and sometimes to 0px) height. When I switch tab and come back to the chart tab, then I can clearly see that it is resized and looks perfectly after some visible height changes.
I have seen a bunch of similar topics, but they all complain about the chart having a small size only when arriving on a tab and not on page load directly.
I have tried to call invalidateSize(), validateNow(), etc. after the chart is built on page load (even with a timeout) but it doesn't do the job.
Is it because of the container that wouldn't give enough info to Amcharts to process the correct size? How come Amcharts is able to recalculate the size of the charts when changing the tab and back to the chart one?
Would you please have any hints for me? Thank you very much
I use Bootstrap tabs system.

I have finally solved it by setting a fixed height
.amcharts-chart-div{
height: 436px !important;
}