How to integrate C3 Gauge Chart into Angular 5?

Question

I am trying to integrate C3 Gauge Chart: http://c3js.org/samples/chart_gauge.html to a fresh Angular 5 application.

Here is my code chart.component.ts :

import { Component, OnInit, AfterViewInit } from '@angular/core';

import * as c3 from 'c3';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit, AfterViewInit {

  constructor() { }

  ngOnInit() {
  }

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

}

Here is my chart.component.html

<div id="chart"></div>

But I am getting the following error.

Following what's in here didn't solve my problem: How add C3 charts to angular 2+ project

[Please don't put tags in question titles](https://stackoverflow.com/help/tagging) — Liam, Apr 24 '18 at 13:27

SrAxi · Accepted Answer · 2018-04-24T14:30:56.967

4

In you angular-cli.json add the following:

scripts: [
   "/path/to/d3.v4.min.js",
   "/path/to/c3.min.js"
]

Apparently, c3.js library depends on the d3.js library, but recent versions of c3.js library now depend on the version 4 of d3.js.

So, make sure you have that version of d3.js before attemtping to use c3.js.

In the Github repository you'll find this:

Dependency:

D3.js ^4.12.0

Update:

As an alternative, @BadisMerabet found a workaround downgrading the library. If you already have functionality that depend on an older version of d3.js, this can be a good short-time solution.

npm install --save c3@0.4.22

edited Apr 24 '18 at 14:30

answered Apr 24 '18 at 13:45

SrAxi

19,787
11
46
65

1

I didn't add anything to scripts. Upgrading d3 to version 4 fixed my issue. thanks ! – Badis Merabet Apr 24 '18 at 13:55
@BadisMerabet great! I'm glad! Have fun with `c3.js`! :D – SrAxi Apr 24 '18 at 13:55
Now my ng2-nvd3 charts are broken :) as they are dependent to d3 v3 : https://github.com/krispo/ng2-nvd3 . I will see if I will create another issue. – Badis Merabet Apr 24 '18 at 13:57
Just use directly the library instead of a package if you're having issues with that package. Or open a new issue and let's see how to resolve that one! :D – SrAxi Apr 24 '18 at 13:59
I have used a downgraded version of C3 – Badis Merabet Apr 24 '18 at 14:18
@BadisMerabet Nice! That's also a good solution. If you want, and with your permission, I would add it to my answer, so people with the same issue find all the solutions in the same place. Is it ok for you? – SrAxi Apr 24 '18 at 14:27

score 1 · Answer 2 · answered Apr 24 '18 at 14:18

1

I have run: npm install --save c3@0.4.22 to fix my issue as I am already using d3 version 3.

Latest versions of C3 use D3 version 4.

answered Apr 24 '18 at 14:18

Badis Merabet

13,970
9
40
55

How to integrate C3 Gauge Chart into Angular 5?

2 Answers2