How add C3 charts to angular 2+ project

扶醉桌前 提交于 2019-12-03 02:08:47
Vala Khosravi

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!