Documentation

This Library is used to display/generate charts in our angular application

Installation

First we need to add chart.js file in application index.html file

npm install chart-angular

import ChartAngularModule in app.module

import { ChartAngularModule } from 'chart-angular';
imports: [
    ChartAngularModule
  ]

chart-angular library usage in our application

<lib-chart-angular [chartConfig]="chartConfig" [chartType]="'line'" (labelClicked)="ourMethod($event)"
    [isLabelShow]="true" (chartClicked)="chartClickedEvent($event)"></lib-chart-angular>

line/bar chart config

chartConfig = {
    labels: ["Tokyo", "Mumbai", "Mexico City", "Shanghai", "Sao Paulo"],
    datasets: [{
      label: 'Population', // Name the series
      data: [22006299, 15834918, 14919501, 14797756, 14433147],
      backgroundColor: [ // Specify custom colors
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)'
      ],
      borderWidth: 1 // Specify bar border width
    },
    {
      label: 'Second Label', 
      data: [120000, 15000000, 1454210, 240124, 3358452],
      backgroundColor: '#f443368c',
      borderColor: '#f443368c',
      borderWidth: 1,
      type: 'line',
      fill: false
    },
    {
      label: 'Third Label',
      data: [5024554, 2001424, 4454201, 4565420, 5659888],
      backgroundColor: '#2196f38c',
      borderColor: '#2196f38c',
      borderWidth: 1,
      type: 'line',
      fill: false
    }]
  };

pie/doughnut chart config

chartConfig = {
    labels: ['Jan','Feb','Mar', 'Apr'],
    datasets: [
        {
            data: [100, 80, 60, 40],
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56",
                "#EF09OM"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56",
                "#EF09OM"
            ]
        }]    
    };

polarArea chart config

chartConfig = {
    datasets: [{
      data: [
        15,
        10,
        8,
        4,
        2
      ],
      backgroundColor: [
        "#FF6384",
        "#4BC0C0",
        "#FFCE56",
        "#E7E9ED",
        "#36A2EB"
      ],
      label: 'Polar Area Chart Dataset'
    }],
    labels: [
      "Jan",
      "Feb",
      "March",
      "April",
      "May"
    ]
  };

radar chart config

chartConfig = {
    labels: ['Label1', 'Label2', 'Label3', 'Label4'],
    datasets: [
        {
            label: 'First Label Dataset',
            backgroundColor: 'yellow',
            borderColor: 'yellow',
            pointBackgroundColor: 'rgba(179,181,198,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(179,181,198,1)',
            data: [10, 20, 30, 40]
        },
        {
            label: 'Second Label Dataset',
            backgroundColor: 'purple',
            borderColor: 'brown',
            pointBackgroundColor: 'rgba(255,99,132,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(255,99,132,1)',
            data: [28, 48, 40, 19]
        },
        {
            label: 'Third Label Dataset',
            backgroundColor: 'blue',
            borderColor: 'blue',
            pointBackgroundColor: 'rgba(255,99,132,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(255,99,132,1)',
            data: [30, 40, 50, 60]
        }
    ]
};

bubble chart config

bubbleChartConfig = {
    datasets: [
      {
        label: 'Label1',
        data: [
          {
            x: 3,
            y: 7,
            r: 10
          }
        ],
        backgroundColor: "#ff6384",
        hoverBackgroundColor: "#ff6384"
      }
    ]}

scatter chart config

scatterChartConfig = {
    datasets: [{
      label: 'Label1',
      backgroundColor: "#ff6384",
      data: [{
        x: -10,
        y: 0
      }, {
        x: 0,
        y: 10
      }, {
        x: 10,
        y: 5
      }]
    }
}

Inputs

| Input | Type | Required/Optional| Uses | | ------ | ------ | ------ | ------ | | chartConfig | object |required | chart config including data, styles, labels | | chartType | string |required | Type of chart like line, pie, bar, doughnut, polarArea, radar, bubble, scatter | | isLabelShow | boolean |optional | It's true in case we want to display labels othewise false |

Events

| Output | Uses | | ------ | ------ | | labelClicked | This emitter will trigger when user click on any particular chart label and return that particular label information| | chartClicked | This emitter will trigger when user click on any specific chart section and return that particular section information|