SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

Answered
1
0

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

Version
1.2.1426
  • You must to post comments
Best Answer
1
0

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

Images
  • Joe Brady
    So simple – thanks Michael – not sure how I didn’t try this!
  • You must to post comments
0
0

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

Images
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.