The resizing issue persists with Angularjs charts

I have recently developed a small web application using AngularJS and I have implemented two charts from the AngularJS library - a bar chart and a pie chart. Although both charts are rendering correctly, they are not resizing properly as the display size changes.

Below is the HTML code I am using:

<div class="chartWrapper" ng-show="true" layout="row" layout-align="center center" md-whiteframe="3">
  <canvas id="pie" class="chart chart-pie" chart-data="pieData" chart-labels="chartLabels" chart-legend="true"></canvas>
  <canvas id="bar" class="chart chart-bar" chart-data="chartData" chart-legend="true" chart-labels="chartLabels" chart-series="series"></canvas>
</div>

Here is my CSS code for the wrapper:

.chartWrapper{
  margin: 0 auto;
  text-align: center;
  vertical-align: top;
  width: 80% !important;
}

And this is the Javascript code I am using:

angular.module('app')
.config(['ChartJsProvider', function (ChartJsProvider) {
  // Configure all charts
  ChartJsProvider.setOptions({
    colours: ['#FF0000', '#0000FF'],
    responsive: true
  });
  // Configure all pie charts
  ChartJsProvider.setOptions('Pie', {
    datasetFill: true,
    chartLegend: true
  });
  // Configure all bar charts
  ChartJsProvider.setOptions('Bar', {
    datasetFill: true,
    chartLegend: true
  });
}])
.controller('mainCtrl', function($scope){
  var main = this;
  $scope.answered = answered;
  $scope.quAnswered = false;

  $scope.pieData = [30,50];
  $scope.chartData = [[30,60],[50,20]];
  $scope.chartLabels = ['Female', 'Male'];
  $scope.series = ['Pepsi', 'Coca-Cola'];

  Chart.defaults.global.responsive = true;

  function answered(){

  }

})

Answer №1

What exactly do you mean when you say "display gets smaller or bigger"? If the only resizing happening is within the parent container, then the chart itself will not resize since Chart.js can only detect window resize events (there are no other resize events it can respond to).

In the most recent version, there is an option to trigger a resize event if you manually resize the parent container by emitting a $resize event on the scope. For more information, visit https://github.com/jtblin/angular-chart.js/#events

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide for Uploading, presenting, and storing images in a database column with the help of jQuery scripting language

What is the best method for uploading, displaying, and saving an image in a database using jQuery JavaScript with API calls? I am working with four fields in my database: 1. File ID 2. Filename 3. Filesize 4. Filepath ...

How to eliminate the checkbox attribute when using jQuery's clone function

When I try to add a new row using my script code and HTML, the property of the last checkbox is automatically selected if it is checked. In the new row, a checkbox with a check is added, but I want to remove the checkbox when it's checked in the new r ...

Tips for transferring data from a model in a controller to other child controllers within an angularjs application

Utilizing the AngularJS-UI Datepicker with the following HTML: <div class="form-inline date-picker" ng-show="is('home')"> <div class="form-inline input-group"> <input type="month" class="form-control" u ...

Issue with Domsanitizer bypasssecuritytruststyle functionality on Internet Explorer 11 not resolving

CSS:- Implementing the style property from modalStyle in TypeScript <div class="modal" tabindex="1000" [style]="modalStyle" > Angular Component:- Using DomSanitizer to adjust height, display, and min-height properties. While this configuration work ...

Safari users encountering invalid dates generated by Moment Js library

Can anyone explain why I am seeing "invalid date" in Safari, but it works fine in other browsers? moment('01/01/2023 11:44:00.000 AM').tz(time_zone, true).format('hh:mm:ss:SS A z') chrome https://i.sstatic.net/PeFBp.png safari https ...

Can a universal Save File As button be created for all web browsers?

Currently, I am in the process of developing a music player on the client side and I am seeking a method to save playlists that include mp3 data. Concerns with localStorage The restriction of a 5mb limit for localStorage makes it impractical for my needs. ...

Discover how to initiate an ajax request from a tailored module when the page is loaded in ActiveCollab

When trying to initiate an AJAX call on the project brief page by adding a JavaScript file, I encountered some issues. My goal is to display additional information along with the existing project brief. I included a JavaScript file in a custom module and f ...

Conceal the frontview-specific attribute if the custom attribute value is empty

One of my recent projects involved creating a custom attribute value to display an external link on the product view. I used a custom attribute as a button that connected to my public marketplace store, such as Lazada. However, I encountered an issue when ...

What is the best way to code an HTML block with jQuery?

Could someone guide me on creating the following using jQuery: <div class="card"> <img src="images/cat6.jpg" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Watson</b></h4> ...

Angular8: Stay Updated with Real-Time Data Refreshment

I've implemented code in my app.component to retrieve all users. I'm facing an issue where if I have two windows open and perform any CRUD actions, the second window displays outdated data. To address this, I am attempting to refresh the page ev ...

Retrieve the value from a variable located outside an API function call

As I work on developing a chat application project that includes abusive text detection, I have encountered an issue with accessing data from the Perspective API. While I am able to set attributes within the API function, I face challenges accessing them o ...

Internet Explorer displaying incorrect shadow effects (paper curl) with CSS

I am attempting to achieve a page curl effect similar to this one: https://i.stack.imgur.com/grS7p.png I have followed the example provided here: http://codepen.io/anon/pen/fpjoa When I create new PHP and CSS files and copy-paste the code from the afore ...

Is the Await keyword failing to properly pause execution until the promise has been fulfilled?

I'm currently working on manipulating a variable within an async function, and I've noticed that the variable is being returned before the completion of the data.map function below. Even though I have the await keyword in place to pause the code ...

The Material UI Grid item shifted upwards as a result of the image loading

While working on a project using the Material UI grid system with create-react-app, I encountered an issue with two adjacent grid items. Initially, they display as intended: https://i.sstatic.net/i9jeP.png However, upon loading the page, there is a brief ...

Tips for monitoring multiple values in a Vue 3 script setup

Within my code, I currently have a watcher set up like this (inside <script setup>): const form = reactive({ body: '', image: '' }) watch(() => form.image, () => { console.log(form.image) }) I am looking to enh ...

Using AngularJS to send a model to ui-select

Here is the scenario at hand: A form includes a directive known as <timeZone ng-model="formModel.timeZone" This directive communicates with a web service to fetch timezone information The directive then presents the timezones in a ui-select dropdown ...

NgOnChanges replaces form control value when user inputs text

In my autocomplete form control component: @Component({ selector: 'app-autocomplete', templateUrl: './app-autocomplete.view.html', changeDetection: ChangeDetectionStrategy.OnPush, }) export class AutoCompleteFilterComponent ...

How can I retrieve and showcase the size of each file, including images, CSS, and JS, present on a website?

Currently, my goal is to create a dashboard capable of retrieving the file size for all resources (images, javascript, css, etc.) loaded on a webpage. I aim to then further filter these resources by file type and file size in order to identify which ones c ...

What causes the NavBar to show and hide within a specific range?

Recently, I encountered a perplexing issue with my navbar. It functions correctly except for one strange behavior that has left me baffled. Why does the menu appear when I adjust the width to 631px, but disappear at 600px? And vice versa – why does it wo ...

Error: Reflection cannot be used to define a class

Recently, I've been facing an error while using gulp-angular-protractor for end-to-end testing of my web app. It used to work perfectly before but now I'm encountering this issue. https://i.stack.imgur.com/E7m4i.png I would greatly appreciate a ...