How can I set a zoom out level so a radar chart fits within the container?
The image below is of a radar chart drawn in a container (div). The grid fits perfectly within the container but, as a consequence of the good fit of the grid, labels on the left and right cannot be seen. The chart component does have a zoom feature but I can't find the option to set an initial zoom level so the whole chart, including labels, fit.
Is there an option or technique to ensure the whole chart fits within the container? I imagine if the container is more square the fit will be better but the side-by-side display is used in the screenshot is one I want to use.
Thanks.
Bill,
We suggest that you set the coefficient in the primaryXAxis. This will allow you to customize the radius of the radar series using the coefficient property and the default value for the coefficient is 100.
We have attached code-snippet, sample and screenshot for your reference.
Code-snippet:
|
primaryXAxis: { title: 'Months', valueType: 'Category', labelPlacement: 'OnTicks', interval: 1, coefficient: 50, }, |
Screenshot:
Sample: https://stackblitz.com/edit/g2c148-5sdb2l?file=index.ts,index.html
Documentation: https://ej2.syncfusion.com/documentation/chart/chart-types/polar#radius
Kindly revert us if you have any concerns.
Regards,
Nishanthi
