How to create pie chart in lightning component

30 different types of Charts and renders are supported by CanvasJS across devices like iPhone, iPad, Android, Mac & PCs. This give us the facility to create an attractive and rich dashboard that work across devices without compromising on things like maintainability or functionality of any web application. Graphs include several good looking themes and are very fast– resulting in lightweight, beautiful and responsive dashboards.

It is very simple and intuitive API, comes with Beautiful and Elegant looking themes.

The various interactive features supported by canvas Js bar chart are:-

  • Tooltips
  • Zooming
  • Panning
  • Animation
  • Events
  • Drilldown
  • Exporting

One of the best things of this library is that, without any performance lag, it can easily render thousands of data-points.

CanvasJS Bar Chart is Standalone which means that it does not depend on any other library and this is one of the reason that why it is a fanatic Support from developers.


Area Chart


Doughnut Chart


Bar Chart


Line Chart


Bubble Chart


Pie Chart


Column Chart


Spline Chart


Spline Area Chart


Step Line Chart


Scatter (Point) Chart


Step Area Chart


Stacked Area Chart


Stacked Column 100% Chart


 Stacked Area 100% Chart


Stacked Column Chart


Stacked Bar Chart


 Stacked Bar 100% Chart


Range Bar Chart


Range Column Chart


Range Area Chart


OHLC (Stock) Chart


Range Spline Area Chart


Box and Whisker Chart


Candlestick Chart


Pyramid Chart


Error Chart


Funnel Chart


Waterfall chart



Let’s take an example of basic Column Chart. Here are some steps to create any basic chart :-

  1. Make a component and create a variable for a new canvas js line chart object by sending the ID of div element where the chart is to be rendered (In lightning component) we can also pass the DOM element in the place of ID and add lightning required script in it.
  2. After doing the above step pass all the Chart related “options” to the constructor as the second parameter.

Chart “options” basically consists of 4 important items

    • title object with its text property set, just like heading.
    • dataPoints – which is an array or collection of all data items that is to be rendered
    • dataSeries – dataPoints is the child of dataSeries, that also defines type of chart and other series wide options
  • data – array element which is collection of one or more dataSeries objects.

3.Now the last and the main step is to render the chart by calling chart.render() method.

Sample Code



<ltng:require scripts=”{!$Resource.CanvasJS}” afterScriptsLoaded=”{!c.generateChart}”/>

<div id=”chartContainer1″ style=”height: 400px; width: auto; margin-left: 0px; margin-top: 0px;”></div>



generateChart: function (component, event, helper) {

var chart = new CanvasJS line Chart(“chartContainer1”, {

animationEnabled: true,

title:{ text: “Canvas js bar chart”


data: [      {

type: “column”, //here we can change the type to bar, area, line, pie etc

dataPoints: [

{ x: 10, y: 71 },

{ x: 20, y: 55},

] } ]



}  }

lightning component chart

How to create pie chart in Lightning Component

Here in dataPoints, axisX is the horizontal Axis and axisY is the vertical important thing to focus is that if we want to pass a string value in the chart axis we have to use “label” instead of “x”.

This way we can implement different types of Canvas js bar chart in lightning component and we can make it dynamic as well to make the chart live.

Posted in Canvajs in Salesforce Lightning.

Leave a Reply

Your email address will not be published. Required fields are marked *