# Charts.js

**URL:** <https://forums.knack.com/t/charts-js/11197>\
**Category:** Knacksters' Idea Lab\
**Created:** [September 23, 2021, 11:12am UTC](https://forums.knack.com/t/charts-js/11197 "2021-09-23T11:12:10Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dagmar](https://avatars.discourse-cdn.com/v4/letter/d/71c47a/32.png) [@Dagmar](https://forums.knack.com/u/Dagmar)\
**Post date:** [September 23, 2021, 11:12am UTC](https://forums.knack.com/t/charts-js/11197/1 "2021-09-23T11:12:10Z")

</div>

Hi Guys, has anyone managed to get Charts.js working in Knack?

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [September 23, 2021, 12:14pm UTC](https://forums.knack.com/t/charts-js/11197/2 "2021-09-23T12:14:00Z")

</div>

Sorry, nope, never tried 😥

---

<div class="post-metadata">

**Author:** ![Arjun](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/arjun/32/4149_2.png) [@Arjun](https://forums.knack.com/u/Arjun)\
**Post date:** [September 28, 2021, 4:51am UTC](https://forums.knack.com/t/charts-js/11197/3 "2021-09-28T04:51:35Z")

</div>

Hey Dagmar.

Yes I’ve implemented chart.js for a client of mine… What is the issue you’re facing?

---

<div class="post-metadata">

**Author:** ![Dagmar](https://avatars.discourse-cdn.com/v4/letter/d/71c47a/32.png) [@Dagmar](https://forums.knack.com/u/Dagmar)\
**Post date:** [October 11, 2021, 11:07am UTC](https://forums.knack.com/t/charts-js/11197/4 "2021-10-11T11:07:01Z")

</div>

Hi Arjun, thanks for the response.

The Charts.js documentation is very clear, but it only explains how to implement charts directly in a webpage. I am struggling, however, with taking that to the Knack environment where the Javascript does not form part of the initial page, but is coded in a separate environment.

Would it be possible to show me an example? Any help would be greatly appreciated.

---

<div class="post-metadata">

**Author:** ![Arjun](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/arjun/32/4149_2.png) [@Arjun](https://forums.knack.com/u/Arjun)\
**Post date:** [October 11, 2021, 11:28am UTC](https://forums.knack.com/t/charts-js/11197/5 "2021-10-11T11:28:34Z")

</div>

Of course. It’s pretty simple actually.

You first need to lazyload the chart.js script:

```auto
LazyLoad.js(['https://cdn.jsdelivr.net/npm/chart.js@2.7.1/dist/Chart.min.js', 'https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0'], function () {
    //console.log('All my files have completed loading!');
});

```

Then you need to add a div element where you’d like to render the chart and use the new Chart() function to render it with the data you’d like:

```auto
$(document).on('knack-view-render.view_xx', function(event, view, records) {
    $("#view_xx > section > div.kn-details-column.first.column.is-horizontal > div > div > div > div.kn-detail.field_yy").before("<canvas id=\"myChart\"></canvas>");
    new Chart(document.getElementById("myChart"), {
        // Your chart preferences and data
    });
});

```

Let me know if this makes sense or if you run into any issues implementing this.

---

<div class="post-metadata">

**Author:** ![IAmAKnacker](https://avatars.discourse-cdn.com/v4/letter/i/5f9b8f/32.png) [@IAmAKnacker](https://forums.knack.com/u/IAmAKnacker)\
**Post date:** [April 5, 2022, 10:48pm UTC](https://forums.knack.com/t/charts-js/11197/6 "2022-04-05T22:48:57Z")

</div>

@Arjun - Do you have a screenshot example of what this looks like?

---

<div class="post-metadata">

**Author:** ![Ray](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@Ray](https://forums.knack.com/u/Ray)\
**Post date:** [June 22, 2022, 1:05pm UTC](https://forums.knack.com/t/charts-js/11197/7 "2022-06-22T13:05:28Z")

</div>

I’m also curious about this - very new to java script (but use python and R extensively) — is it possible to use plotly.js in a similar manner?