4

C3 does things like drawing values in pie charts by default, and as it is based on D3 perhaps has sone good animation capabilities. (The LWC recipe is using Chart.js.)

But before I waste hours on trying to get it to work inside an LWC (Lightning Web Component), if you have it working let me know, including the version number you are using.

3

Went ahead and tried it and it worked fine first time though of course this doesn't guarantee that everything works. I tried D3 v5.7.0 and C3 v0.7.15.

A downside is that the JavaScript is 500k for D3 plus 200k for C3 compared to 200k for Chart.js.

Sample output:

sample output

from this JavaScript:

import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import D3 from '@salesforce/resourceUrl/d3';
import C3 from '@salesforce/resourceUrl/c3';

export default class C3WorkforceCountChart extends LightningElement {

    error;
    chart;
    initialized = false;

    renderedCallback() {
        if (this.initialized) return;
        this.initialized = true;

        Promise.all([
            loadScript(this, D3 + '/d3.v5.min.js'),
            loadStyle(this, D3 + '/style.css'),
            loadScript(this, C3 + '/c3.min.js'),
            loadStyle(this, C3 + '/c3.min.css')
        ])
            .then(() => {
                this.chart = window.c3.generate({
                    bindto: this.template.querySelector('div.c3-chart'),
                    data: {
                        columns: [
                            ['Active employees', 20],
                            ['Employees on leave', 5],
                        ],
                        type : 'donut',
                        onclick: function (d, i) { console.log("onclick", d, i); },
                        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
                        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
                    },
                    donut: {
                        title: "25 Employees",
                        expand: true,
                        label: {
                            format: function (value, ratio, id) {
                                return value;
                            }
                        }
                    }
                });
            })
            .catch((error) => {
                this.error = error;
            });
    }
}

and template:

<template>
    <template if:true={error}>
        {error}
    </template>
    <div class="c3-chart" lwc:dom="manual" style="width: 300px; height: 300px;">
    </div>
</template>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.