Draw BarChart / LineChart using Chart.js in Lightning Component

  1. Download chart.js file from https://cdnjs.com/libraries/Chart.js and add it as a static Resource in your org and name it “Chart”.

2. Create a new lightning Component “ChartComp”.

3) Click on the Controller and paste the following code.

4) Click helper and paste the following code.

5) Create a new Apex class “GraphController” and paste the following code.

These are just the mock data for this tutorial.

6) You can test this component by adding it to the lightning app and the graph looks like this:

7 thoughts on “Draw BarChart / LineChart using Chart.js in Lightning Component

  1. Just desire to say your article is as astonishing.
    The clarity for your publish is just cool and that i could think you’re knowledgeable on this subject.
    Fine together with your permission allow me to clutch your RSS
    feed to stay updated with coming near near post.

    Thanks 1,000,000 and please carry on the rewarding work.

  2. Pretty nice post. I just stumbled upon your blog and wished to
    mention that I’ve truly enjoyed surfing around your weblog posts.
    After all I will be subscribing in your rss feed and I am hoping you
    write once more very soon!

  3. Howdy I am so excited I found your webpage, I really
    found you by accident, while I was looking on Askjeeve for something else, Anyways I am here
    now and would just like to say kudos for a marvelous post and a all round enjoyable
    blog (I also love the theme/design), I don’t have time to read through it all at the minute but I have bookmarked
    it and also included your RSS feeds, so when I have time
    I will be back to read a lot more, Please do keep up the awesome work.

  4. Excellent post. I was checking constantly this weblog and I am inspired!
    Extremely helpful information specially the remaining phase 🙂 I handle such info much.
    I used to be seeking this certain information for a long time.
    Thank you and best of luck.

Leave a Reply

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