CODEWITHSUNDEEP
javascriptangularc3.js
Bmaed Riasbet
Bmaed Riasbet

Reputation: 14998

How to integrate C3 Gauge Chart into Angular 5?

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.

enter image description here

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

Upvotes: 3

Views: 2155

Answers (2)

SrAxi
SrAxi

Reputation: 20005

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 [email protected]

Upvotes: 4

Bmaed Riasbet
Bmaed Riasbet

Reputation: 14998

I have run: npm install --save [email protected] to fix my issue as I am already using d3 version 3.

Latest versions of C3 use D3 version 4.

Upvotes: 1

Related Questions