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?

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