@covalent/charts v1.0.0-beta.2-1

td-charts

<td-charts> is a directive for Ng2 + D3 V4 Chart. This is a parent element and all the charts would be rendered inside this.

API Summary

Properties:

Setup

Import the CovalentChartsModule using the forRoot() method in your NgModule:

import { CovalentChartsModule } from '@covalent/charts';
@NgModule({
  imports: [
    CovalentChartsModule.forRoot(),
    ...
  ],
  ...
})
export class MyModule {}

Usage

Example for HTML usage:

<td-charts title="Sales Bar/Line Combo Chart"
         [margin]="{top: 50, bottom: 50}"
         chartHeight="450"
         [shadow]="true"
         [shadowDepth]="['125%', 2, 0, 2]"
         shadowColor="rgba(0, 0, 0, 0.54)"
         fillOpacity="0.95">
 <td-axis-x [link]="chartLine1" [ticks]="true" [show]="true" [grid]="false" legend="Day Offset"></td-axis-x>
 <td-axis-y-left [link]="chartLine1" [ticks]="true" [show]="true" [grid]="false" legend="Sales"></td-axis-y-left>
 <td-axis-y-right [link]="chartBar1" [ticks]="true" [show]="true" [grid]="true" legend="Sales 2"></td-axis-y-right>
 <td-chart-bar #chartBar1 [colors]="['amber', 'orange']"
               dataSrc="platform/charts/chart-line/datatime.csv"
               [padding]="0.1"
               bottomAxis="date"
               columns="close"
               titles="close"
               [transition]="true"
               transitionDuration="2050"
               transitionDelay="5000">
 </td-chart-bar>
 <td-chart-line #chartLine1 dataSrc="platform/charts/chart-line/datatime.csv"
               timeSeries="true"
               bottomAxis="date"
               [columns]="['close']"
               [titles]="['close']"
               [colors]="['#03a9f4']"
               [transition]="true"
               transitionDuration="2000"
               transitionDelay="5000">
 </td-chart-line>
</td-charts>