Revamp your visual data displays using Chart.js in conjunction with Angular

Question

Revamp your visual data displays using Chart.js in conjunction with Angular

I am facing an issue with updating Chart.js in Angular while utilizing ngrx store.

When trying to update the chart data in the selector subscriber (executed in ngOnInit), I encountered the following code:

this.yrSubscription = this.userDataStore.pipe(select(selectYrReport))
  .subscribe(el => {
    el.sessions.forEach(item => {
      this.datasetsSessions[0].data.push(+item);
    });
  });

This is my current chart data:

datasetsSessions: ChartDataSets[] = [{
  label: 'Sessions',
  data: [],
  fill: false
}];

Chart registration:

private _registerCustomChartJSPlugin(): void {
  (window as any).Chart.plugins.register({
    afterDatasetsDraw: (chart, easing): any => {
      if (!chart.options.plugins.xLabelsOnTop
        || (chart.options.plugins.xLabelsOnTop && chart.options.plugins.xLabelsOnTop.active === false)) {
        return;
      }

      const ctx = chart.ctx;

      chart.data.datasets.forEach((dataset, i): any => {
        const meta = chart.getDatasetMeta(i);
        if (!meta.hidden) {
          meta.data.forEach((element, index): any => {
            // Drawing text in white, with specific font details
            ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
            const fontSize = 13;
            const fontStyle = 'normal';
            const fontFamily = 'Roboto, Helvetica Neue, Arial';
            ctx.font = (window as any).Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

            const dataString = dataset.data[index].toString() + 'k';

            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            const padding = 15;
            const startY = 24;
            const position = element.tooltipPosition();
            ctx.fillText(dataString, position.x, startY);

            ctx.save();

            ctx.beginPath();
            ctx.setLineDash([5, 3]);
            ctx.moveTo(position.x, startY + padding);
            ctx.lineTo(position.x, position.y - padding);
            ctx.strokeStyle = 'rgba(255,255,255,0.12)';
            ctx.stroke();

            ctx.restore();
          });
        }
      });
    }
  });
}

The function is called in the constructor of the component.

Even though I am aware that I need to run chart.update(), I keep encountering errors stating that the chart is undefined.

javascript angular typescript chart.js ngrx

Answer 1

Answer №1

Don't worry about calling chart.update() when using ng2-charts. Let Angular's change detection handle it for you. If things aren't working as expected, simply reassign the data array after adding a new value to it. You can achieve this by using Array.slice() like shown below.

this.yrSubscription = this.userDataStore.pipe(select(selectYrReport))
  .subscribe(el => {
    el.sessions.forEach(item => {
      this.datasetsSessions[0].data.push(+item);
      this.datasetsSessions[0].data = this.datasetsSessions[0].data.slice();
    });
  });

The main issue could be in the _registerCustomChartJSPlugin method. Instead of having a separate method, define its content inside a chartPlugins variable like this:

chartPlugins = [{
  afterDatasetsDraw: (chart, easing): any => {
    ...
  }
}];

In your HTML template, make sure to include the chartPlugins as follows.

<canvas baseChart
  [datasets]="datasetsSessions"
  [plugins]="chartPlugins"
  ...
</canvas>

For further reference, take a look at this StackBlitz.

Answer 2

Don't worry about calling chart.update() when using ng2-charts. Let Angular's change detection handle it for you. If things aren't working as expected, simply reassign the data array after adding a new value to it. You can achieve this by using Array.slice() like shown below.

this.yrSubscription = this.userDataStore.pipe(select(selectYrReport))
  .subscribe(el => {
    el.sessions.forEach(item => {
      this.datasetsSessions[0].data.push(+item);
      this.datasetsSessions[0].data = this.datasetsSessions[0].data.slice();
    });
  });

The main issue could be in the _registerCustomChartJSPlugin method. Instead of having a separate method, define its content inside a chartPlugins variable like this:

chartPlugins = [{
  afterDatasetsDraw: (chart, easing): any => {
    ...
  }
}];

In your HTML template, make sure to include the chartPlugins as follows.

<canvas baseChart
  [datasets]="datasetsSessions"
  [plugins]="chartPlugins"
  ...
</canvas>

For further reference, take a look at this StackBlitz.

Answer 3

Answer №2

If you are working with multiple charts within the same component, it is important to maintain a reference to your custom chart. Start by adding a reference to your custom chart instance in the component class like this:

myChart: CustomChart;

Next, in the afterDatasetsDraw method, assign the current chart instance to your custom chart variable:

this.myChart = chart;

Finally, make sure to update the chart in your subscription block:

this.chart.update();

Answer 4

If you are working with multiple charts within the same component, it is important to maintain a reference to your custom chart. Start by adding a reference to your custom chart instance in the component class like this:

myChart: CustomChart;

Next, in the afterDatasetsDraw method, assign the current chart instance to your custom chart variable:

this.myChart = chart;

Finally, make sure to update the chart in your subscription block:

this.chart.update();

Answer 5

Answer №3

The Component Decorator above contains the following code:

var require: any;
var Chart = require('chart.js');

A property is included in the component to hold an instance of the chart

public chart: Chart;

It's important to note that Chart.plugins.register will register a plugin globally for all charts. https://www.chartjs.org/docs/latest/developers/plugins.html#global-plugins

A chart is required for this plugin to be applied

Assuming you have a Canvas element in your HTML like this:

<div>
  <canvas id="canvas">{{ chart }}</canvas>
</div>

You should update your ngOnInit method to use ngrx Subscription for creating a new chart if it doesn't exist.

ngOnInit() {
this._registerCustomChartJSPlugin();
this.yrSubscription = this.userDataStore.pipe(select(selectYrReport))
  .subscribe(el => {
      if(!this.chart) {
        this.createChart();
      }
    el.sessions.forEach(item => {
      this.datasetsSessions[0].data.push(+item);
    });
    this.chart.update();
  });
}
public createChart() {
   this.chart = new Chart('canvas'); //Include if any object required as second Parameter
}

Answer 6

The Component Decorator above contains the following code:

var require: any;
var Chart = require('chart.js');

A property is included in the component to hold an instance of the chart

public chart: Chart;

It's important to note that Chart.plugins.register will register a plugin globally for all charts. https://www.chartjs.org/docs/latest/developers/plugins.html#global-plugins

A chart is required for this plugin to be applied

Assuming you have a Canvas element in your HTML like this:

<div>
  <canvas id="canvas">{{ chart }}</canvas>
</div>

You should update your ngOnInit method to use ngrx Subscription for creating a new chart if it doesn't exist.

ngOnInit() {
this._registerCustomChartJSPlugin();
this.yrSubscription = this.userDataStore.pipe(select(selectYrReport))
  .subscribe(el => {
      if(!this.chart) {
        this.createChart();
      }
    el.sessions.forEach(item => {
      this.datasetsSessions[0].data.push(+item);
    });
    this.chart.update();
  });
}
public createChart() {
   this.chart = new Chart('canvas'); //Include if any object required as second Parameter
}

Revamp your visual data displays using Chart.js in conjunction with Angular

Answer №1

Answer №2

Answer №3

Similar questions

JavaScript Conversion from Binary to Decimal

Receiving user input in Angular 6 for a function

Screen JSON data by applying filters

Discovering the geographical location of all users using Node.js: A step-by-step guide

Struggling with transitioning from TypeScript to React when implementing react-data-grid 7.0.0

Add aesthetic flair to scrollable containers

"Troubleshooting: Why is the JavaScript canvas.toDataURL method returning an

Reducer is unaware of my current state within react redux

Guide on accessing CGI Script response using AJAX

Transforming API Response into a structured format to showcase a well-organized list

Oops! You can only have one parent element in JSX expressions

Persist form input data using ajax without any back-end server logic involved

Adding a refresh feature to ui-sref in markup

Challenges with importing class-based decorators in Vue using Typescript

navigating to the start of a hyperlink

Joomla template experiencing issues with script loading

What sets apart assigning a React ref using a callback versus setting it directly?

Avoid reloading the page when the form is submitted using form.trigger('submit') command

Passing route parameters to child routes in Angular 2: A step-by-step guide

Node.js tutorial: Matching aggregations by UserId