Charts

Chart components are based on Charts.js and PrimeNG.

[TOC]

Installation

yarn add @og_soft/charts

Prerequisites

The library is dependent on Charts.js (^3.6.0) and PrimeNG (^12.2.2), so please make sure, you have them installed.

yarn add chart.js@^3.6.0
yarn add primeng@^12.2.2

And include the necessary PrimeNG styles into your project configuration (project.json or angular.json) or your stylesheet (see docs for more information):

{
  "styles": [
    // ...
    "node_modules/primeng/resources/themes/saga-blue/theme.css",
    "node_modules/primeng/resources/primeng.min.css"
  ]
}

And also include Chart.js in your project configuration (project.json or angular.json):

{
  "scripts": [
    // ...
    "node_modules/chart.js/dist/Chart.js"
  ]
}

Usage

Import module

import { ChartModule } from '@og_soft/charts';

@NgModule({
  imports: [
    // ...
    ChartModule,
  ],
})
export class YourModule {}

Bar Chart

Create data:

const data: ChartData = {
  labels: ['1.11.', '2.11.', '3.11.', '4.11.', '5.11.', '6.11.', '7.11.'],
  datasets: [
    {
      label: 'My Dataset',
      backgroundColor: '#689F38',
      data: [4000, 2300, 3100, 1700, 1800, 2400, 3200],
    },
  ],
};

And use in template:

<og-chart type="bar" [data]="data"></og-chart>

Line Chart

Create data:

const data: ChartData = {
  labels: ['1.11.', '2.11.', '3.11.', '4.11.', '5.11.', '6.11.', '7.11.'],
  datasets: [
    {
      label: 'My Dataset',
      borderColor: '#689F38',
      data: [4000, 2300, 3100, 1700, 1800, 2400, 3200],
    },
  ],
};

And use in template:

<og-chart type="line" [data]="data"></og-chart>

Changelog

See the CHANGELOG file.