Angular6 BoxPlot example

README.md

1. create the app

npm install -g @angular/cli

# create a new app
ng new chart-app
cd chart-app

1. create boxplot component and install dependencies

# install extra dependencies
npm install @types/chart.js chart.js chartjs-chart-box-and-violin-plot

# create a boxplot component
ng generate component boxplot

1. replace the content of src/app/boxplot/boxplot.component.ts with the file of this Gist
2. render the component by adding <app-boxplot></app-boxplot> to src/app/app.component.html

boxplot.component.ts

import { Component, OnInit, OnChanges, ElementRef, SimpleChanges, NgZone } from '@angular/core';
import { Chart, ChartData } from 'chart.js';
import 'chartjs-chart-box-and-violin-plot';

// based on https://github.com/emn178/angular2-chartjs/blob/master/src/chart.component.ts

@Component({
  selector: 'app-boxplot',
  template: `<div class="chart-wrapper"><canvas></canvas></div>`,
  styles: [`.chart-wrapper {
    width: 500px;
    height: 500px;
    position: relative;
  }`]
})
export class BoxplotComponent implements OnInit, OnChanges {

  private readonly boxPlotData: ChartData = {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'Dataset 1',
      backgroundColor: 'steelblue',
      data: <any[]>[
        Array.from({length: 100}).map(() => Math.random()),
        Array.from({length: 100}).map(() => Math.random() * 0.6 + 0.2),
        Array.from({length: 100}).map(() => Math.random())
      ]
    }]
  };
  private chart: Chart;

  constructor(private readonly elementRef: ElementRef, private readonly ngZone: NgZone) {

  }

  ngOnChanges(changes: SimpleChanges) {
    if (!this.chart) {
      return;
    }

    // TODO handle updates

    this.chart.update();
  }

  ngOnInit() {
    this.build();
  }

  private build() {
    this.ngZone.runOutsideAngular(() => {
      const node: HTMLElement = this.elementRef.nativeElement;
      this.chart = new Chart(node.querySelector('canvas'), {
        type: 'boxplot',
        data: this.boxPlotData
      });
    });
  }
}

in my case this results in:

Hello, thanks for the code!
What is the point of the ngOnChanges in this case?
In my case, there doesn't seem to be anything changing, even when I change the dataset, so ngOnChanges() never gets fired.
Cheers!

I'm getting this error message when running "npm start" after all the steps above:
ERROR in ./node_modules/chartjs-chart-box-and-violin-plot/build/Chart.BoxPlot.mjs 604:12-19
Can't import the named export 'Element' from non EcmaScript module (only default export is available)

Do you know what can be causing it?

I assume it is a similar issue as in vue (https://github.com/sgratzl/vue-chartjs-boxplot) -> webpack needs to be configured to proper recognize the .mjs extension

haven't tried it but https://netbasal.com/customize-webpack-configuration-in-your-angular-application-d09683f6bd22?gi=851d313dd736 sounds promising to extend the webpack config.