On a small mobile view,see screenshot of mobile view how do I hide (display:none) the graphical chart and keep only the labels visible? Thanks!
You cant, it also really goes against the part of using a charting lib, you are better off to make those labels in html and hide the whole canvas
There is a mild shadow/blur effect on the text in the chart. I haven't figured out how to remove that. Does anyone know how to do so? I'm using version 2.7.1. Thanks!
Does it do the same cross-browser?
Are you able to change the font? Perhaps its not a good screen display font.
Are you using a mac?
Take a look at font-smoothing on MDN. Note it is not standard.
Could be something to do with font aliasing.
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
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.
I would like to have some kind of navigation for a slider when viewed on a mobile device. Since the directional arrows won't show on mobile (if anyone can tell how to make them, that would be awesome) I thought a good solution would be to have a different slider, same images, that is "show-for-small" and has bullets underneath.
It works, but there is an issue that's killing me. If you load the page with the browser window wide (desktop) and scale to a mobile width the sliders switch, but the bullets aren't centered. They appear shifted to the right. If you reload the page at that mobile width with they are fine, perfectly centered below the image.
Does anyone have any clue on how to fix this? I set up a page to demonstrate the problem. www.jonesco.com/_foundation/bullet_problem.html
Thanks
Add the following to your stylesheet:
.orbit-bullets {
display: table;
text-align: center;
}
I try to make my WebBrowser control transparent, so if the HTML loaded into it has no background, the underlying window should be visible.
I`ve broke my head trying different ways.
There is a transparent background in Microsoft Sidebar application. In gadget`s HTML <g:background> tag can be used, but this tag is not available in usual webBrowser control.
I`ve also investigate in DirectX Transform filters, which can be applied to the HTML elements in IE, but have no success.
Any help would be greatly appreciated.
WebBrowser (aka Internet Explorer) has no such capabilities. You'd have to host it in a window that uses the WS_EX_LAYERED style flag and use SetLayeredWindowAttributes() to make the color key match the background of the displayed HTML. Avoid displaying any text, it is going to look bad when the anti-aliasing pixels no longer blend the letter with the background.