# Chart.css — open source js-free charts library

**URL:** https://community.glideapps.com/t/chart-css-open-source-js-free-charts-library/56994
**Category:** Community Resources
**Created:** [January 22, 2023, 11:50am UTC](https://community.glideapps.com/t/chart-css-open-source-js-free-charts-library/56994 "2023-01-22T11:50:47Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![11183](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11183/32/29797_2.png) [@11183](https://community.glideapps.com/u/11183)
#### Post date: [January 22, 2023, 11:50am UTC](https://community.glideapps.com/t/chart-css-open-source-js-free-charts-library/56994/1 "2023-01-22T11:50:47Z")

</div>

Did anyone try this? Looks pretty promising i think.

> **[Charts.css](https://chartscss.org/)**
>
> CSS data visualization framework

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [January 22, 2023, 12:14pm UTC](https://community.glideapps.com/t/chart-css-open-source-js-free-charts-library/56994/2 "2023-01-22T12:14:12Z")

</div>

Very cool 🙂

Just had a quick play with it - works nicely in a webview component…

 ![Screen Shot 2023-01-22 at 8.12.27 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/e/fe726bab5f776cef46d445ebf7868452976765c8.png)

This could be a nice alternative to quickcharts.

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [January 22, 2023, 1:49pm UTC](https://community.glideapps.com/t/chart-css-open-source-js-free-charts-library/56994/3 "2023-01-22T13:49:00Z")

</div>

Thanks for sharing!

---

<div class="post-metadata">

### Author: ![11183](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11183/32/29797_2.png) [@11183](https://community.glideapps.com/u/11183)
#### Post date: [January 22, 2023, 2:30pm UTC](https://community.glideapps.com/t/chart-css-open-source-js-free-charts-library/56994/4 "2023-01-22T14:30:15Z")

</div>

Hmm webview? I thought we could kinda generate this in template column and render in RichText) Didn’t dive deep into docs though.

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [January 22, 2023, 2:41pm UTC](https://community.glideapps.com/t/chart-css-open-source-js-free-charts-library/56994/5 "2023-01-22T14:41:24Z")

</div>

Well, it requires a CSS library.  
Ignore anything we can do with Glide Apps - because that is only temporary and will go away.

So I’m only considering how it could be used in Pages.

If you have an Enterprise plan, then sure you could download the minimised library and use that.  
But on the lower plans you won’t have that option.  
The next best option (that I’m aware of) would be to generate a HTML template that includes a link to the CDN library, convert that to a URI with JavaScript, and use that URI as the source of a webview component (which is what I did above).

---

<div class="post-metadata">

### Author: ![11183](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11183/32/29797_2.png) [@11183](https://community.glideapps.com/u/11183)
#### Post date: [January 22, 2023, 2:54pm UTC](https://community.glideapps.com/t/chart-css-open-source-js-free-charts-library/56994/6 "2023-01-22T14:54:21Z")

</div>

OR) We could take a look at CSS library and try to put together something similar (may be less functional) using inline styles) Sounds like a challenge

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [January 22, 2023, 3:00pm UTC](https://community.glideapps.com/t/chart-css-open-source-js-free-charts-library/56994/7 "2023-01-22T15:00:34Z")

</div>

Yeah, that thought did flash through my mind. I’ll leave that one to you 😉

---

<div class="post-metadata">

### Author: ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)
#### Post date: [January 22, 2023, 4:16pm UTC](https://community.glideapps.com/t/chart-css-open-source-js-free-charts-library/56994/8 "2023-01-22T16:16:24Z")

</div>

Hola!

From my point of view, If you want to invest time, money, and energy, the best option is to go and use amCharts: [Chart Demos - amCharts](https://www.amcharts.com/demos/)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/f/1f24f310728b6fe5559ebfba8f5cf8c6c71cef7c.png)

Saludos!

---

<div class="post-metadata">

### Author: ![11183](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11183/32/29797_2.png) [@11183](https://community.glideapps.com/u/11183)
#### Post date: [January 22, 2023, 6:24pm UTC](https://community.glideapps.com/t/chart-css-open-source-js-free-charts-library/56994/9 "2023-01-22T18:24:29Z")

</div>

My gosh this thing is absolute killer) But i was looking for something simple, with no javascript required.

Quickchart is good but charts are loaded as images which is not always good. The solution which is using basic HTML/CSS is the best for Glide i think.

---

<div class="post-metadata">

### Author: ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)
#### Post date: [January 22, 2023, 7:59pm UTC](https://community.glideapps.com/t/chart-css-open-source-js-free-charts-library/56994/10 "2023-01-22T19:59:37Z")

</div>

I agree!

amCharts is a pro tool and some programming knowledge is needed to create an Experimental Column and then, see your chart in a Web View component.

If your customer is high level or your competitors have a good UI, amCharts can help you to highlight your APP without problem.

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [January 24, 2023, 12:43am UTC](https://community.glideapps.com/t/chart-css-open-source-js-free-charts-library/56994/11 "2023-01-24T00:43:46Z")

</div>

> [@11183](#):
>
> Quickchart is good but charts are loaded as images which is not always good.

Yeah, I agree with this. I want my charts to be a bit interactive, so I almost always use Chart.js instead.

---

<div class="post-metadata">

### Author: ![11183](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11183/32/29797_2.png) [@11183](https://community.glideapps.com/u/11183)
#### Post date: [January 25, 2023, 7:39am UTC](https://community.glideapps.com/t/chart-css-open-source-js-free-charts-library/56994/12 "2023-01-25T07:39:10Z")

</div>

And also I think the Quickchart endpoint could expire or smth)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/c/bccdc0051f47d01eaa8bf889201e93651b683af3.jpeg)
