Home › forums › Using CanvasJS › how to create Multiple Charts on page
This topic contains 23 replies, has 8 voices, and was last updated by Anne 2 years, 4 months ago.
I want to make my webpage responsive. I have added <meta name=”viewport” content=”width=device-width, initial-scale=1″>
It doesn’t resize the chart container when size of the window is changed.
Is there something else I could do such that the canvas window resizes according to the width of the window ?
I also wanted to know if it is possible to have a dropdown menu from which the graphs can be displayed ?
Chart should ideally resize itself to fill the container whenever window resizes. But if the container itself is not resizing, then chart won’t resize either.
Here is an example.
This is how it looks when resized; the chart container is not resizing. How do i fix it ?
We are unable to know the issue just by looking at the screenshots, it would help us resolve issue if we look into the code. Can you please create a jsfiddle, so that we can look into it and help you out?
I want the entire chart container to fit to the browser screen size when resized. (Responsive/Adaptive web design)
In your code in line 83, 151, 220, 289, 358, 427, 496 you have set the width property to 600 (px). Removing these lines helps in resizing the chart.
The tool tip for the second column chart shows at up the corresponding position of the first column. Is there any way to correct this?
As toolTip is a DOM element, CSS you use over the div will be applied to that aswell. You can use display: inline-block; and it works fine.
Check this page for tutorial on how to render multiple charts in a page.
Thanks.. That was exactly what I was looking for!
You must be logged in to reply to this topic.