swimlane/ngx-charts

:bar_chart: Declarative Charting Framework for Angular

ngx-charts

Declarative Charting Framework for Angular!

ngx-charts is unique because we don't merely wrap d3, nor any other chart engine for that matter. It is using Angular to render and animate the SVG elements with all of its binding and speed goodness, and uses d3 for the excellent math functions, scales, axis and shape generators. By having Angular do all of the rendering it opens us up to endless possibilities the Angular platform provides such as AoT, SSR, etc.

Data visualization is a science but that doesn't mean it has to be ugly. One of the big efforts we've made while creating this project is to make the charts aesthetically pleasing. The styles are also completely customizable through CSS, so you can override them as you please.

Also, constructing custom charts is possible by leveraging the various ngx-charts components that are exposed through the ngx-charts module.

For more info, check out the documentation and the demos.

Features

Chart Types

• Horizontal & Vertical Bar Charts (Standard, Grouped, Stacked, Normalized)
• Line
• Area (Standard, Stacked, Normalized)
• Pie (Explodable, Grid, Custom legends)
• Bubble
• Donut
• Gauge (Linear & Radial)
• Heatmap
• Treemap
• Number Cards
• Sankey Diagram

Customization

• Autoscaling
• Timeline Filtering
• Line Interpolation
• Configurable Axis Labels
• Legends (Labels & Gradient)
• Advanced Label Positioning
• Real-time data support
• Advanced Tooltips
• Data point Event Handlers
• Works with ngUpgrade

Install

To use ngx-charts in your project install it via npm:

npm i @swimlane/ngx-charts --save

Custom Charts

To learn how to use the ngx-charts components to build custom charts and find examples, please refer to our Custom Charts Page.

Release

• Checkout master (git checkout master)
• Pull master (git pull)
• Refresh node modules (npm ci)
• Run tests (npm test)
• Examine log to determine next version (X.Y.Z)
• Run git checkout -b release/X.Y.Z
• Update version in projects/swimlane/ngx-charts/package.json.
• Update changelog in projects/docs/changelog.md
• Run git commit -am "(release): X.Y.Z"
• Run git tag X.Y.Z
• Run git push origin HEAD --tags
• Run npm run publish:lib
• Submit PR

Credits

ngx-charts is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.

SecOps Hub is an open, product-agnostic, online community for security professionals to share ideas, use cases, best practices, and incident response strategies.

ngx-charts's Issues

Packaging

Add some packaging magic like: https://github.com/swimlane/angular2-data-table/blob/master/package.json#L33

Demo broken with official angular 2 release

It's easy to fix but I cannot as it's on plunker

Count-up animation on Pie Grid and Number Card charts

The number inside the doughnut in the pie grid, as well as the number in the number card chart should animate from 0 to the current value.

Example: https://inorganik.github.io/countUp.js/

Tests

• Unit Tests
• Functional
• Coverage Report

Semi related to #12

Generalize Data/Options API

Custom formatting for values

Allow specifying custom date formatting via input properties on the charts.

This would allow us to specify the representation of numbers and dates, as well as add prefixes and suffixes to their string representations in axis labels, legends, and tooltips.

Uncaught ReferenceError: __decorate is not defined

Trying to use ng2d3 with the angular2-FINAL release. I'm also using the latest angular-cli (beta-14), using webpack.

After "npm installing" the following d3 libraries (d3-array d3-brush d3-color d3-format d3-interpolate d3-scale d3-selection d3-shape), I managed to compile my project. However when I load my webapp, I get the following exception:

chart.component.js:32 Uncaught ReferenceError: __decorate is not defined

Anything else I should install?

every "rxjs" should be "rxjs/Rx"

"rxjs" has no root module, it should be some child

Move layout away from bootstrap

Chart.ts currently uses bootstrap classes to lay out the chart and it's legend. We need to remove those.

ng2d3.css missing on 1.4.0

ng2d3.css missing in release folder

Remove jQuery/moment dependency

A few files use jquery/moment functions/helpers, we have to remove these

Date values not having a friendly display (as in the demo)

Currently trying to reproduce the area-chart from the demo and with the same options and data passed to the table I'm getting this for the dates:

I'm also wondering if the epoch is supported in this current version?

Convert to TypeScript

Versions

• TypeScript 2.0

Type Definitions

If you are installing a new third-party project, you will likely need to install the typings for that
project like so npm install @types/body-parser --save-dev. If types are not available
for your module read here

Cannot find type definition file for 'core-js'.

I'm trying to use in my project (Angular 2 + angular-cli). I installed all dependencies by npm. If I install typings of core-js solve this issue but get many conflict errors like Duplicate identifier 'PropertyKey'. What it takes to make working properly?

(if you need any more information about my project, just ask)

Docs

Server-side rendering

Adjust file naming to official Angular 2 styleguide

All the files should be named following the official Angular 2 styleguide. Example: Chart.ts -> chart.component.ts etc..

D3 Transitions to Angular2 Animations

Remove all the D3 Transitions for animations and switch it to Angular2 Animations

• Example: https://github.com/sghall/react-d3-transitions

CI

• TravisCI
• Hook coverage reports to codeclimate
• Browserstack?

Add spline interpolation option for lines and areas

Add an input property to line and area charts that specifies the interpolation algorithm used to generate the paths.

The available values would be 'linear', 'cardinal', and 'monotone'.

Example:
http://bl.ocks.org/mbostock/4342190

API property names

Decide on how to name the input properties:

Example: results vs data vs model

Bubble Chart

Bubble Chart, like: http://www.screencast.com/t/rP2MpdfYdOG

only works with cjs

umd format not working

with systemjs

only ng2d3.cjs.js
and ng2d3.umd.js with ( format:'cjs' ) works

angular version: 2.1.0.beta.0

HMR

Hot module reloading to webpack dev setup

Responsive Layout

I know this is in your coming soon features, but I'm still adding it as the other coming soon features are open issues. I'm also interested to know if someone is already working on this? I would surely like to give a hand as this feature is a must have for responsive components!

index.d.ts missing

need index.d.ts with
export { NG2D3Module } from './src/ng2d3';

is needed for typescript compile

self.context error when clicking bar on gitbook sample

"self.context.clickHandler is not a function"

this message can be seen when you click bar on "https://swimlane.gitbooks.io/ng2d3/content/charts/bar-vertical.html"

NgModules for RC5

We should refactor the app to use NgModules, this way we can remove the directives/pipes from all components.
Should we make an NgModule / chart type, and a global one that export everything ?

Documentation missing

The link to gitbook is not working.

Theme'ing System

Webpack Setup

Aot incompatible

ng2d3 seems to be incompatible with AoT compilation

can not use this module into shared module

We can not use this module in to shared module since common module use browser module can we fix this please?
basically lazy loaded module

Multi-Canvas Charts

• Bar + Line

RxJS Support

Requirement

Rather than have watchers/etc, use RxJS for more 'reactive' design.

Support negative values

Charts need to support negative values (except the ones where it doesn't make sense, like pie charts).

Example:
http://www.screencast.com/t/k4pidKg8u

Current support is buggy:

Toggle grid lines

Add an option to toggle the grid lines on bar, line, and area charts.

Scatter Plot

Scatter Plot, like: http://www.screencast.com/t/rBL8NOoheZD

When transitioning off the line chart to area and stacked charts the line markers remain

http://screencast.com/t/yxZAnwgwwShX

Upgrade to D3 4.0

Implement smarter axis labels

Axis labels overlap. The axis components need to handle this automatically. To prevent overlap, first try to use rotation (by increasing the angle).

If the angle is 90, and there is still overlap, reduce the number of labels.

Demo Page

Demo page that lets me explore all types of data/formats/etc

Tooltip template as ContentChild on BaseChart

I'd like to be able to customize the tooltip for any chart that extends BaseChart.

I'll make a PR if you like the idea.

Something like this:

<some-chart>
  <template #tooltipTemplate let-model>
    {{model.customValue}} and {{some.outside.value}}
  </template>
</some-chart>

BaseChart would register @ContentChild('tooltipTemplate') tooltipTemplate: TemplateRef

And each chart would be responsible for plugging this.tooltipTemplate into the swui-template directive.

Note: I haven't thought of a good way to override the area-tooltips. I won't touch them in this PR.

Let me know what you think.

Force directed graph

I'd like to have a force directed graph as part of this library. I'm working on a PR to add it.

Missing files

It looks like a few source files are missing:

• common/utils/number/format: in src/treemap/Cell.ts
• common/utils/truncate: in src/pieChart/AdvancedPieChart.ts
• countUp: in src/Cards.ts

Add tooltips

The charts are wired to use the Popover component in common/popover. The Popover component uses angular.element from angular 1 and needs to be updated to work without it though.

1.4.0 has still 1.3.0 commented on release file

release/ng2d3.js has comment which says it is 1.3.0

Not AoT Compatible

I'm planning to use this library, and I noticed that it isn't AoT compatible yet.

I've written an article that walks through generating *.metadata.json files for your library and troubleshooting errors that might come up. I'll work on a PR if I get a chance.

Legend taking too much space on large screens and doesn't fit on small one

Big screen:

Small screen:

Add event listener to manually trigger update

After adding chart resize functionality, the charts can now be resized to fit their parent containers when the window is resized. This is done by not specifying the view input property of the chart.

However, if the parent container dimensions change without the window being resized, window.resize will not fire and the chart will not be resized.

We need to add an event listener to the charts that can manually trigger update() from outside.