How to create charts using D3 Library in Lightning Components

D3.js is the most popular library for creating interactive charts in any web application. You can also use D3.js library in Lightning components for graphical representation of data. These charts can be used to give sales insights to a member ( Salesforce user) of the sales team.  This article will show how can we leverage D3.js to build charts with a simple example.

First, let’s see the component code.



    initD3Charts : function(component, event, helper) {

        var width = 960;
        var height = 500;

        // Create SVG element, we can't just use  tag in lightning component
        // So creating one dynamically using jquery
        var svg ="body")
        .attr("width", width)
        .attr("height", height);	

        // Calling server-action to get the data
        var action = component.get("c.getData");

        // Create a callback that is executed after
        // the server-side action returns
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                let data = response.getReturnValue();
                // Render the returned data as a pie chart
                helper.renderChart( component, data );
            else if(state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " +
                } else {
                    console.log("Unknown error");


    renderChart : function( component, data ) {
        var svg ="svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height"),
            radius = Math.min(width, height) / 2,
            g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        var color = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

        var pie = d3.pie()
        .value(function(d) { return d.candidates; });

        var path = d3.arc()
        .outerRadius(radius - 10)

        var label = d3.arc()
        .outerRadius(radius - 80)
        .innerRadius(radius - 80);

        var arc = g.selectAll(".arc")
        .attr("class", "arc");

        .attr("d", path)
        .attr("fill", function(d) { return color(; });

        .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
        .attr("dy", "0.35em")
        .text(function(d) { return; });

So, we have included d3.js library along with jquery.js and then called a server-side action when the script has loaded in order to fetch the chart data. In the defined callback function we passed that data to a helper function which rendered the chart.

public class D3ChartsController {
    public static List getData(){
        // For this example, it's just a static data but it can be generated 
        // as per any business logic
        List lstData = new List();
        lstData.add( new PieChart( '=65', 61 ) );
        return lstData;
    public class PieChart {
        @AuraEnabled public String age;
        @AuraEnabled public Integer candidates;
        public PieChart( String age, Integer candidates ) {
            this.age = age;
            this.candidates = candidates;


Reference to resources –


8 thoughts on “How to create charts using D3 Library in Lightning Components

  1. Dave Roberts

    Hi Naval,
    Thanks for the example.
    However, I have a problem.
    The afterScriptsLoaded=”{!c.initD3Charts}” isn’t being called/actioned.
    I can’t see why.
    Any suggestions?

    1. David Roberts

      Hi Naval,
      I found that the $Resource syntax doesn’t work.
      Instead I used

      (Couldn’t get a join to work either).
      So the libraries load OK but I don’t see a pie chart.
      I suspect a “div” or “canvas” is needed in the cmp but don’t know for sure.

  2. David Roberts

    I found a way to ‘tag’ to a thanks to joshbirk at
    It seems D3 can select a if the name is prefixed with a ‘#’ sign.

    add a div to your component:

    then replace the dynamic scalable vector graphic creation with new code:

    var svg =“body”)
    .attr(“width”, width)
    .attr(“height”, height);
    var svg =“#diagram”).append(“svg”)
    .attr(“width”, width)
    .attr(“height”, width)
    .attr(“preserveAspectRatio”, “xMidYMid”)
    .attr(“viewBox”, “-50 -50 1200 1200”);

    nb: there’s a couple of extra attributes there that look fun and will need more research!

  3. Dmitry

    I can’t compile the apex controller, because of wrong return type in this line:
    public static List getData(). There should probably be a ‘String’ (if the list of PieChart-s gets serialized) or just a ‘List’. Please confirm on either one.

    In any case nothing is shown – the component simply renders empty.

    1. Naval Sharma Post author

      It’s just a list and it’s automatically gets serialized when you get the result in the callback.

      In the lightning component controller –
      let data = response.getReturnValue();

      variable ‘data’ will have an array of JS objects. You could be doing something wrong and that is leading the empty chart issue.

  4. Bhuvana

    Can you please provide me how to add tooltip and lengend to d3 scatter plot chart in lightening web component


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.