Get started

Resources

Carbon Charts Angular

Carbon Charts Angular library

The library provides front-end developers & engineers a collection of reusable charting components to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.

Install

Using yarn


$ yarn add @carbon/charts @carbon/charts-angular d3

If you prefer npm


$ npm install --save @carbon/charts @carbon/charts-angular d3

Getting started

To start using the BarChart component, try the example below:

app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartsModule } from '@carbon/charts-angular';
import { AppComponent } from './app.component';
@NgModule({
  imports: [BrowserModule, ChartsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}
app.component.html
<n-bar-chart
  class="n-chart"
  [data]="stackedBarData"
  [options]="stackedBarOptions"
  width="100%"
  height="400"
  #stackedBarChart
></n-bar-chart>
app.component.ts
import { Component } from '@angular/core';
import { defaultColors } from '@carbon/charts';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  stackedBarData = {
    // ...see next section
  };
  stackedBarOptions = {
    // ...see next section
  };
}

Data and options

Data and options follow the same model in all charts, with minor exceptions and differences in specific components.

For instance, in the case of pie and donut charts, you would only provide one data set. In the case of donut charts, you can pass in an additional field called center in your options configuring the donut center.

There are also additional options available depending on the chart type being used, for more examples please see here.

Below are sample data and options that can be used in a stacked bar chart:

import { BarChart, defaultColors } from '@carbon/charts';
// Use the below if you're loading bundles through a CDN
// const { BarChart, defaultColors } = Charts;
const stackedBarData = {
  labels: ['Quantity', 'Leads', 'Sold', 'Restocking', 'Misc'],
  datasets: [
    {
      label: 'Dataset 1',
      backgroundColors: [defaultColors[0]],
      data: [65000, 29123, 35213, 51213, 16932],
    },
    {
      label: 'Dataset 2',
      backgroundColors: [defaultColors[1]],
      data: [32432, 21312, 56456, 21312, 34234],
    },
    {
      label: 'Dataset 3',
      backgroundColors: [defaultColors[2]],
      data: [12312, 23232, 34232, 12312, 34234],
    },
  ],
};
const stackedBarOptions = {
  scales: {
    x: {
      title: '2018 Annual Sales',
    },
    y: {
      title: 'Figures',
      formatter: axisValue => {
        return `${axisValue / 1000}k`;
      },
      stacked: true,
    },
  },
  legendClickable: true,
  containerResizable: true,
};

Development

Please refer to the Contribution Guidelines before starting any work.

Using the server

We recommend the use of Angular Storybook for developing components.

Start the server


cd packages/angular
yarn run storybook

Open browser to http://localhost:9006/.

List of available components

View available components here.

Troubleshooting

If you experience any issues while getting set up with Carbon Charts, please head over to the GitHub repo for more guidelines and support. Please create an issue if your issue does not already exist.

Edit this page on GitHub
Previous
Get started: React
Next
Get started: Vue