Hi,
In the documentation I can’t see any way to make a chart surface fill the available space in all directions.
By default, it fills the available horizontal space, but the ratio of width:height remains fixed.
The only example I’ve seen where this is slightly different is this JS example, where the width flexes independently to fit the available space: https://demo.scichart.com/javascript-2d-3d-chart-tenor-curves-example – I’m not sure exactly what part of the code makes this different to the other examples?
My goal is to allow the user to adjust the height and width of any chart themselves by dragging the size of the container div, with the chart surface ideally just filling the space in a ‘dumb’ way, rather than using JS to manually update the chart size during the drag event.
Thanks,
Joe
- You must login to post comments
Hi Joe,
To make a chart surface fill the available space you should set width and height equal to 100%, like this
<div id="scichart-root" style="width: 100%; height:100%;"></div>
Please take a look at this example where the chart surface fills all available space – SciChart.js Size to Fit Height and Width
Best regards,
Michael
- Michael Klishevich answered 3 years ago
- last edited 3 years ago
So simple – thanks Michael – not sure how I didn’t try this!
- You must login to post comments
Hi Joe, thanks for your question. If I understand your question correctly, the easiest way is to change the height and width of the wrapper div of the canvas SciChart. The other way is to add parameters that you can set when creating SciChartSurface.
// widthAspect: number
// heightAspect: number
const { sciChartSurface, wasmContext} = wait SciChartSurface.create(divElementId, 20, 10);
I hope this helps you. If not, let me know.
Best regards,
Danyl
- Danyl Boiko answered 3 years ago
- You must login to post comments
Please login first to submit.
