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.
Related
I'm trying to implement srcset this way
<img class="i-product-image-big"
srcset="http://dev.test:8000/uploads/thumbnail-80/1602202734The_Reptile_Room_by_Daniel_Handler.webp 80w,
http://dev.test:8000/uploads/thumbnail-160/1602202734The_Reptile_Room_by_Daniel_Handler.webp 160w,
http://dev.test:8000/uploads/thumbnail-320/1602202734The_Reptile_Room_by_Daniel_Handler.webp 320w,
http://dev.test:8000/uploads/thumbnail-640/1602202734The_Reptile_Room_by_Daniel_Handler.webp 640w,
http://dev.test:8000/uploads/thumbnail-960/1602202734The_Reptile_Room_by_Daniel_Handler.webp 960w,"
src="http://dev.test:8000/uploads/thumbnail-160/1602202734The_Reptile_Room_by_Daniel_Handler.webp"
alt="The Reptile Room by Daniel Handler">
I edited the code by adding sizes like this
<img class="i-product-image sidebar_image" loading="lazy"
sizes=" (min-width 200px) 320px, (min-width 576px) 80px, (min-width 768px) 160px, 100vw"
srcset="http://dev.test:8000/uploads/thumbnail-960/1586515257Little_History_of_the_World.webp 960w
..........
I open the website in private window in responsive mode first to be sure that the browser didn't load the larger version but the problem is I find out that the browser picks the wrong version (size) of the image. Here it should pick the 320px (it's 322px including 1px border from each side and the image itself is 320px) version of the image but it picks the 640px version of the image. Why is that and how to fix it without using the picture tag?
I reduces the size of the image in css but still loading 640xp version
I reversed sizes like this
sizes=" (max-width 575px) 320px, (max-width 767px) 80px, (min-width 768px) 160px, 100vw"
But that didn't work either
OK, did some tests here (created some filler images to debug). Found what's causing your issue. Not being able to see your full HTML code, I could get the 320-pixel-width image to show in a bare-bones, hand-coded HTML page. When I add the standard viewport tag: <meta name="viewport" content="width=device-width, initial-scale=1">, the 640-pixel-width image will display again, due to viewport scaling. If I were to post your code in a snippet here on SE, the same thing would happen.
Additionally, if I replace the 320_Image.png 320w, with 320_Image.png 2x, and 640_Image.png 1x,, the 320-pixel image will show, but the display will be broken when viewed in the desktop.
If all you’re trying to do is serve an image size that’s based on the viewport width, you’d be best served using 160_Image.png 160w, while for resolution switching, use this: 160_Image.png 1x. A comprehensive resource on responsive images on MDN describes this more fully. And, based on your preference not to use the <picture> element, this article is a good resource. The author recommends not using the <picture> element when all you want is to serve the appropriate image based on the users' device.
For a quick demo, I’ve modified the code a bit, and am using dummy images to show (not including fillers for all the images in the code). If viewed in desktop, the images will switch sizes based on viewport width. For mobile, they will switch based on device width. I only added the CSS to set the image to full-width debugging, but the images with switch without this code.
img {
max-width: 100%;
width: 100%;
}
<img class="i-product-image-big" srcset="80_Image.png 80w,
160_Image.png 160w,
https://i.stack.imgur.com/JkhiN.png 320w,
https://i.stack.imgur.com/Lwddt.png 640w,
https://i.stack.imgur.com/8Z9jL.jpg 960w" sizes="(max-width: 575px) 320px, (max-width: 767px) 640px, (min-width: 768px) 960px, 100vw" src="https://i.stack.imgur.com/8Z9jL.jpg" alt="Test Responsive Image">
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.
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 :)
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;
}
I am creating two charts Line Chart and Donut Chart on same HTML Page using Google JS API. But these charts are not responsive. How can I make those charts as responsive?
The Google Charts API was probably not designed with responsiveness in mind, specifically. The default size of the chart is to fill the element it's being rendered into, so you can just use CSS and Media Queries like you would normally do to make a responsive design.
The only real problem is that once the chart is drawn, it doesn't change it's size in a desktop window resize-type scenario. In Angular Google Chart we listen for the window's resize event and redraw the chart.
I've seen some of the resize strategy paired with a bit of JavaScript to keep the chart the same aspect ratio no matter how wide it is.
Anything more specific will need a more detailed question. I am intentionally not including any code for this answer, because whatever I write will probably be wrong for your situation.