Using Chart.js in Stencil

readme.md

Install chart.js

npm i chart.js
npm i @rollup/plugin-alias -D

Fix bundling in stencil.config.ts

import alias from '@rollup/plugin-alias';

....

export const config: Config = {
  ...
  rollupPlugins: {
    before: [
      alias({
        entries: [
          {
            find: 'chart.js',
            replacement:
              'node_modules/chart.js/dist/Chart.bundle.js'
          }
        ]
      })
    ]
  },
  ...
};

my-chart.tsx

import { Chart } from 'chart.js';

@Component({
  tag: 'chart-js',
  styleUrl: 'chart-js.scss'
})
export class ChartJs {
  @Prop()
  public data: any;
  @Watch('data')
  protected dataWatcher(newData: any): void {
    // console.log('chart-js::dataWatcher', newData);

    this.myChartInstance.data.labels = newData.labels;

    this.myChartInstance.data.datasets.forEach((dataset: any) => {
      dataset.data = newData.values;
      dataset.label = newData.caption[0];
    });

    this.myChartInstance.update();
  }
  @Prop()
  public colors: string[];
  @Watch('colors')
  protected colorsWatcher(newColors: string[]): void {
    console.log('chart-js::colorsWatcher', newColors);

    if (!newColors || !Array.isArray(newColors)) {
      return;
    }

    this.myChartInstance.data.datasets.forEach((dataset: any) => {
      dataset.backgroundColor = newColors[0];
      dataset.borderColor = newColors[0];
    });

    this.myChartInstance.update();
  }

  @Element()
  private el: HTMLElement;
  private canvas: HTMLCanvasElement;
  private context: CanvasRenderingContext2D;

  protected myChartInstance: any;

  protected componentDidLoad(): void {
    if (Build.isBrowser) {
      // this.canvas = this.el.shadowRoot.querySelector('canvas');
      this.canvas = this.el.querySelector('canvas');
      this.canvas.width = 400;
      this.canvas.height = 300;

      this.context = this.canvas.getContext('2d');

      const chartOptions: any = {
        type: 'line',
        data: {
          labels: this.data.labels,
          datasets: [
            {
              label: this.data.caption[0],
              data: this.data.values,
              backgroundColor: [
                '#113C81'
                // 'rgba(54, 162, 235, 0.2)',
                // 'rgba(255, 206, 86, 0.2)',
                // 'rgba(75, 192, 192, 0.2)',
                // 'rgba(153, 102, 255, 0.2)',
                // 'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                '#113C81'
                // 'rgba(54, 162, 235, 1)',
                // 'rgba(255, 206, 86, 1)',
                // 'rgba(75, 192, 192, 1)',
                // 'rgba(153, 102, 255, 1)',
                // 'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 2,
              lineTension: 0,
              fill: false,
              pointRadius: 0
            }
          ]
        },
        options: {
          legend: {
            position: 'bottom'
          },
          animation: {
            duration: 0
          },
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            xAxes: [
              {
                type: 'time',
                time: {
                  // parser: 'YYYY-MM-DDTHH:mm:ss.000Z'
                  // round: 'day'
                  // tooltipFormat: 'll HH:mm'
                  displayFormats: {
                    // SOURCE: https://stackoverflow.com/questions/37061945/how-to-format-x-axis-time-scale-values-in-chart-js-v2
                    millisecond: 'HH:mm:ss',
                    second: 'HH:mm:ss',
                    minute: 'HH:mm'
                  }
                },
                // ticks: {
                //   beginAtZero: false
                // },
                scaleLabel: {
                  display: true,
                  labelString: 'Zeitpunkt'
                }
              }
            ]
          },
          yAxes: [
            {
              scaleLabel: {
                display: true,
                labelString: 'Wert'
              }
            }
          ]
        }
      };

      this.myChartInstance = new Chart(this.context, chartOptions);
    }
  }

  protected render(): HTMLElement {
    return (
      <div
        class='chart-container'
        style={{ position: 'relative', height: '30vh', width: '100%' }}
      >
        <canvas width='400' height='300' />
      </div>
    );
  }
}