Small chart inside a Bootstrap modal in Angular

• February 29, 2024 at 5:47 pm #44764
  
  Bettovenn

  I am working on an Angular application and I have a chart that is displayed inside a Bootstrap modal. The problem is that the chart looks small when the modal is opened, and only when you click on an index of the chart, it takes the defined size.

  March 1, 2024 at 6:45 pm #44765
  
  Sachin Bisht

  @bettovenn,

  CanvasJS Chart automatically sets the width and height of the chart according to container’s dimensions. When the container’s dimension is not specified it takes up the default width & height(500px X 400px).

  Also, in bootstrap, since the modal is not displayed initially, chart takes the default values. To solve this issue, you can render the chart when the shown.bs.modal event is fired.

  $('#chartModal').on('shown.bs.modal', function () {
          chart.render();
  });

  

  Please take a look at this JSFiddle.

  Sachin Bisht
  Team CanvasJS