c3 charts and LWC

I wanted to try out some charting on LWC and I thought what better framework than C3. In this post we will see a component which will display opportunities in various statues associated to an account.

accountCHart

As a prerequisite you would need c3 and d3 (c3 has a dependency on d3.js) framework loaded in static resource for the charting to work .

Download the latest version of the C3 and D3 from below.

C3 -> https://github.com/c3js/c3/releases/latest

D3 -> https://github.com/d3/d3/releases/download/v5.9.7/d3.zip

Couple of important points for charting:

  1. Load the dependency in the same order that I mentioned below. D3 first and then follow it up with C3.
  2. We have added the a parameter t and assigned the current time to it.
    This is done to make sure the cache is refreshed every time the scripts are loaded.
    If we do not do this then there is an issues if we add multiple charts in a single component.

This is just a simple example for one to start with C3. Please share the beautiful charts that you build. Enjoy Charting!!!

4 thoughts on “c3 charts and LWC”

  1. Do you have a gauge type of chart in this.
    like a speedometer with a needle.
    if yes can you share an example for the same.
    Thanks

      1. I do have a similar requirement and try to use the same C3 for gauge but facing the following error
        Error:
        This page has an error. You might just need to refresh it.
        [url or json or rows or columns is required.]
        Failing descriptor: {markup://c:pOC_Chart}

        HTML:

        JS:
        import { LightningElement } from ‘lwc’;
        import { loadScript,loadStyle} from ‘lightning/platformResourceLoader’;
        import chartjs from ‘@salesforce/resourceUrl/csone_C3’;
        import c3css from ‘@salesforce/resourceUrl/POC_c3’;
        import d3js from ‘@salesforce/resourceUrl/POC_d3’;

        export default class POC_Chart extends LightningElement {

        renderedCallback(){
        this.loadchart();
        }

        loadchart(){

        Promise.all([
        loadScript(this, chartjs),
        loadScript(this, d3js),
        loadStyle(this,c3css),
        ]).then((values) => {

        const ctx = this.template.querySelector(‘canvas.guage’);

        var chart = new c3.generate(ctx, this.config);
        });
        }
        config = {

        data: {
        columns: [
        [‘data’, 69.4]
        ],
        type: ‘gauge’,

        },
        gauge: {
        max: 100,
        width: 30,
        units: ‘ %’

        },
        color: {
        pattern: [‘#FF0000’, ‘#F97600’, ‘#F6C600’, ‘#60B044’], // the three color levels for the percentage values.
        threshold: {
        // unit: ‘value’, // percentage is default
        // max: 200, // 100 is default
        values: [30, 60, 90, 100]
        }
        },
        size: {
        height: 180
        }

        }

        }

  2. Couple of things:
    1. Make sure the html element has the lwc:dom=”manual”.
    2. Use the bindTo property in the c3 config to attach generated chart to the element.
    3. do no create a new instance of the c3.generate method.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s