I am currently using angular-chart along with Angular and chart.js to create multiple charts on a single page. However, I am facing an issue where each chart is taking up the entire width of the screen. I have tried various methods to limit the width based on a ratio of "window.innerWidth" without any success. The chart displays correctly but does not adjust its width as desired.
Below is a snippet of my current HTML:
<div ng-repeat="dataCenterData in dataCenterDataList">
<div ng-style="{'width': windowWidth / 2}">
<canvas id="daily-chart-{{dataCenterData.dataCenter}}"
class="chart chart-bar" chart-data="dataCenterData.data"
chart-labels="dataCenterData.labels"
chart-series="dataCenterData.series"
chart-options="dataCenterData.options"></canvas>
</div>
<div ng-style="{'width': windowWidth / 2}">
<canvas id="last30Minutes-chart-{{dataCenterData.dataCenter}}"
class="chart chart-line"
chart-data="last30MinutesDataCenterDataList[$index].data"
chart-labels="last30MinutesDataCenterDataList[$index].labels"
chart-series="last30MinutesDataCenterDataList[$index].series"
chart-options="last30MinutesDataCenterDataList[$index].options"></canvas>
</div>
</div> In my controller, I have "$scope.windowWidth = window.innerWidth" which sets the value to 1432 in my current test case.