How add C3 charts to angular 2+ project

Question

I searched a lot about Angular2 chart packages but there was no name of C3.js till I found an example of C3.js charts in link below
ani-angular.strapui.com/dashboard/charts/c3-chart

Then I searched for "C3 charts for angular" founded results was all about AngularJS projects. Even on their website was no guide to how to setup this package for angular

I'm sure there is a way that you can add C3 chart to angular2+ project. Is there anyone that know how you do this?

Immunogenetics

You can also try to use this github.com/jsHurdle/ng2-c3 – Zeus

Answer 1

There wasn't an answer on stackoverflow so I answer it by my self

1- run this command in your project root:

npm install c3
npm install @types/c3

2- add "../node_modules/c3/c3.min.css", to .angular-cli.json => style section

    (In angular 6+ add @import "../node_modules/c3/c3.min.css"; to styles.css)

3- add <div id="chart"></div> to your component template

4- add import * as c3 from 'c3'; to your component

5- add bellow codes to your typescript

ngAfterViewInit() {
    let chart = c3.generate({
    bindto: '#chart',
        data: {
            columns: [
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 50, 20, 10, 40, 15, 25]
            ]
        }
    });
}

I hope will it be helpful for you, comment if there was any problem

Immunogenetics

Can you can send a link of exact thing that you want ? @arun-bertil – Immunogenetics

I mean c3.generate but I need c3.Sankey.Butterfly to work in Angular 4 – Heder

Also the javascript used in C3 for Angular 1 was cofeescript – Heder

Hello , how can i generate chart in *ngFor ? – Gono

Does anyone know if there is a package bundling c3 that can avoid having this warning when migrating to Angular 10 (is that even possible?) WARNING in financial-figure.js depends on 'c3'. CommonJS or AMD dependencies can cause optimization bailouts. – Helenahelene