How to Add responsive C3 chart in table.
i want to create a table with responsive table with one of the cell is C3 chart. initial width and height of the cell is 200 and 50, if browser size changes it should also update the chart.
Here my problem is on initial load also chart is not rendering as expected, svg size rendering as 197 width and 18 height.
chart Image for console sizes
looks like some margin is adding. how to ad responsive chart in table can any one help me.
App link : https://angular-rrxg7y.stackblitz.io
It can be resolved by resizing the chart whenever the table or div size changes using the chart.resize(); method
Related
I need to build an UI (HTML 5) with two main components: customized chart drawn in HTML 5 canvas; a table.
The gotcha is that the chart must be aligned with the table. If you horizontally scroll the table, the chart content will scroll too.
One important restriction is that the chart is very customized. I will not be able to use any existing chart component. I will have to code it myself plotting it on canvas.
I am struggling to figure out how to do it. How to trigger a repaint on the canvas during the scroll? How to know the corresponding coordinates on the canvas of the beginning of each table cell? How do I write the HTML/CSS of both components to ensure that the layout will not break on different screen sizes?
I am still planning the project and I am pretty open to use any framework/language.
I need some light here.
Can you help?
Thanks!
You can get the scroll position with jQuery scrollLeft() and set your canvas repaint function to jquery scroll() so that it's updated whenever the scroll position changes.
table = $('#container')
updatePosition = () => {
// Synchronize canvas here:
repaintCanvas(table.scrollLeft());
}
table.scroll(updatePosition);
Here is a demo JSFiddle: http://jsfiddle.net/4eg39bfm/5/
I'm getting this error when I load my graph.
I'm using a small graph just with 2 nodes and 1 link in between. The canvas area reload properly but the other one keeps frozen after any change.
What is displayed is the labels frozen on the container
Only the inside area is refreshed propperly
As You can see there is a different height and width between the canvas and the Container that wrap it.
Here is the HTML
I get it, it's solved using a custom renderer.
renderer: {container: document.getElementById('sigma-container'), type: 'canvas'},
I have a very annoying issue... when I use the xAxis.setExtremes the chart line sometimes starts earlier than the plot area... actually where the Y axis labels are
noticed it happens only when the chart gets initiated on the fly (by code and resized to the parent container)...
so to give you the context
I have a page with two tabs.... first tab is opened by default, the content of the second tab is obviously hidden... the chart is there...
so the chart gets initiated on a container that has display: none.... that means when I click on the tab...the chart width is set to default and not to the container's width....
to solve this issue, I use:
this.chartInstance.setSize(containerWidth);
this.chartInstance.reflow();
when I open the tab... which helps resize the chart correctlyto the container's width after the container actually gets displayed (display: block).
After, all works fine.... except that when I set the extremes, sometimes it overflows...
this DOESN'T happen, when I initialize the chart normally (on a container that is shown from the start) - in my case, when the second tab (the one with the chart) is selected by default... so the container is set to display: block from the start.
I'm working on a stacked bar data chart in order to display some informations using Chart.js 2.0.2 and Angular-Chart 1.0.0.
I would like to detect when the user scroll to the end of the chart container, then add some data to the chart by keeping the ratio (height/width) of the chart.
The thing is, chart.js provides an iframe and I don't know how to add data and keep the space between bar for example. If I resize the canvas, this doesn't work. I have a basic chart with options.responsive = true, and I add data to this chart.
However, even if only the chart wrapper width changes programmatically, the height of the chart changes too. This is a strange behavior of responsiveness.
Is it another way to change only the width of the chart to keep the same space between bar chart ?
do this:
options: {
responsive: true,
maintainAspectRatio: false
};
Then you can pragmatically update the height/width as you see fit with:
chart.canvas.parentNode.style.width = '128px';
//NOTE: I'm running 2.6
What is the default width of each column in the DHTMLX bar chart.
I know that we can set the width of bar. But what is the default width of each column.
As I observed it depends on the total width of the chart. The larger the width of the chart, the larger the width of each column in width. Am I correct?
If I am correct with the above statement, in my chart I giving the day number of the months as the X-axis values. the chart is drawing fine till the last day. For the last day I am getting too much space.
Please observe the space between 31 and 1.
Could you please tell me what would be the problem?
How can I get the uniform column width in my chart? Please advice
Chart counts default width itself. It depens on common chart width (container dimention), items quantity, etc.
There is offset settings you can set empty fields "around" chart scale