@optalitix/chartjs-angular-wrapper

Chart.js Angular Package for Optalitix Products

This library provides an easy plug-and-play option for rendering charts. It is based on chart.js.

Installing

Run npm i @optalitix/chartjs-angular-wrapper and import the ChartjsAngularWrapperModule to your app.module.ts or as a standalone module

Usage

Add the following element to wherever you want the chart to be drawn:

<chartjs-wrapper [chartData]="outputChart" [chartSchema]="outputChartSchema"></chartjs-wrapper>

where the ChartData must conform to the model:

export class OutputChart {
    public name?: string;
    public chartData: ChartData;
}

export class OutputChartSchema {
  public title?: string;
  public order: number;
  public type: ChartType;
  public chartMetadata?: ChartMetadata;
}

export class ChartMetadata {
  public xTitle?: string;
  public yTitle?: string;
  public multipleAxes?: boolean;
  public horizontalLines?: boolean;
}

export class ChartData {
  public xValues: Array<string>;
  public datasets: Array<DataSet>;
}

export class DataSet {
  public seriesName: string;
  public yValues: Array<string>;
}

export class ChartCoordinates {
  public x: string;
  public y: string;
}

A helpful function for deriving the chart's schema from a Models API response is:

getChartSchema(chartName: string): any {
  const chartSchemas = this.responseData.outputChartsSchema;

  const matchingKey = Object.keys(chartSchemas).find(
    (key) => key.toLowerCase() === chartName.toLowerCase()
  );

  return matchingKey ? chartSchemas[matchingKey] : null;
}