CODEWITHSUNDEEP
amchartsamcharts5
tallman
tallman

Reputation: 129

Ensure amCharts bubble chart area is square

When creating a bubble chart, such as https://www.amcharts.com/demos/bubble-chart/, is it possible to ensure the chart area/grid is square without specifying the chart div width and height? I'm hoping it could be somewhat responsive. No matter what the window size, the chart 's grid is square. It would need to take into consideration any axis labels.

I'm using React/TypeScript. Thanks!

Upvotes: 0

Views: 159

Answers (1)

tallman
tallman

Reputation: 129

After struggling with amchart settings to no avail, the following solution works. However, seems like there should be away to do in with chart settings.

This article explains how to maintain a specific aspect ratio for images. I simply adopted it for the bubble chart.

<div style={{ position: 'relative', paddingTop: '93%' }}>
    <div id={chartId} style={{ position: 'absolute', top: 0, left: 0, height: '100%', width: '100%' }}></div>
</div>
  1. Create a container div with relative positioning and the top padding to the correct aspect ratio
  2. Create the chart div as a child with absolute positioning
  3. Render the page
  4. Take a screenshot, paste it in your favorite image editor
  5. Measure the pixels
  6. Recalculate the top padding

For my chart, which has axis text on the left and bottom, 93% was perfect. Now, no matter the page width or device, the grid is always square. HTH.

Upvotes: 0

Related Questions