# Possible get more modern looking charts?

**URL:** <https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467>\
**Category:** Maker\
**Created:** [December 12, 2020, 11:12pm UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467 "2020-12-12T23:12:16Z")\
**Posts on this page:** 16\
**Page:** 2

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [January 21, 2022, 5:47pm UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/21 "2022-01-21T17:47:27Z")

</div>

34 posts were split to a new topic: [KyvisLabs ApexChart Module](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263)

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [August 29, 2021, 3:01am UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/37 "2021-08-29T03:01:28Z")

</div>

But you have to add $1600 for web dev module which unacceptable and also the management of code is very hard

---

<div class="post-metadata">

**Author:** ![PRAMANJ](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pramanj/32/66935_2.png) [@PRAMANJ](https://forum.inductiveautomation.com/u/PRAMANJ)\
**Post date:** [August 29, 2021, 6:13am UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/38 "2021-08-29T06:13:35Z")

</div>

We have a nodejs module instead.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [August 29, 2021, 9:02am UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/39 "2021-08-29T09:02:14Z")

</div>

How does it work here?  
And how much does it cost?

---

<div class="post-metadata">

**Author:** ![PRAMANJ](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pramanj/32/66935_2.png) [@PRAMANJ](https://forum.inductiveautomation.com/u/PRAMANJ)\
**Post date:** [August 29, 2021, 12:30pm UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/40 "2021-08-29T12:30:15Z")

</div>

I will soon release a video on it.

---

<div class="post-metadata">

**Author:** ![PRAMANJ](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pramanj/32/66935_2.png) [@PRAMANJ](https://forum.inductiveautomation.com/u/PRAMANJ)\
**Post date:** [September 27, 2021, 5:10pm UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/48 "2021-09-27T17:10:40Z")

</div>

please see [intro video](https://youtu.be/YrcScJZWeoU) of the NodeJs based appraoch.

---

<div class="post-metadata">

**Author:** ![Jaime\_Casal](https://avatars.discourse-cdn.com/v4/letter/j/e9bcb4/32.png) [@Jaime\_Casal](https://forum.inductiveautomation.com/u/Jaime_Casal)\
**Post date:** [February 28, 2022, 6:37am UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/56 "2022-02-28T06:37:45Z")

</div>

this looks great, I’m sure it was a lot of work, unfortunately.  
This is all in perspective?

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [March 30, 2022, 3:23pm UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/57 "2022-03-30T15:23:09Z")

</div>

I agree. I’ll take a correct chart over a pretty one any day of the week.

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [March 30, 2022, 3:23pm UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/58 "2022-03-30T15:23:58Z")

</div>

Yeah, that was all perspective controls

---

<div class="post-metadata">

**Author:** ![Abiiiiii22](https://avatars.discourse-cdn.com/v4/letter/a/a3d4f5/32.png) [@Abiiiiii22](https://forum.inductiveautomation.com/u/Abiiiiii22)\
**Post date:** [December 31, 2024, 2:00pm UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/59 "2024-12-31T14:00:31Z")

</div>

May I ask how you did the shadows on the buttons, charts, and gauges? I love the look of yours and would love to recreate them but cannot figure out how, I'm guessing its CSS but having a hard time finding out which values to add/alter to get it to look awesome like yours!! I also 100% agree they need to have better looking charts out of the box!

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [December 31, 2024, 2:11pm UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/60 "2024-12-31T14:11:50Z")

</div>

For base amcharts you will need to use CSS. You can inspect them and see the class names to override as well as just add to the style prop for the charts.

Its really just a matter of how in depth you want to go on styling.

I perfer using @bmusson chartjs module but I have more experience with chartjs from previous development roles.

---

<div class="post-metadata">

**Author:** ![Abiiiiii22](https://avatars.discourse-cdn.com/v4/letter/a/a3d4f5/32.png) [@Abiiiiii22](https://forum.inductiveautomation.com/u/Abiiiiii22)\
**Post date:** [December 31, 2024, 2:20pm UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/61 "2024-12-31T14:20:06Z")

</div>

Do you know of any youtube videos that walks you through how to set this up/ get started using the ChartJS? I tried to get it from GitHub but it only renders about 3 charts and can't figure out how to customize them. Thank you for your reply!

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [December 31, 2024, 2:30pm UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/62 "2024-12-31T14:30:23Z")

</div>

> [@Musson Industrial’s Embr-Charts Module](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618):
>
> Embr-Charts Musson Industrial is excited to announce the release of embr-charts, an Ignition module that adds a collection of enhanced Perspective charting components. Chart.js Component This initial release contains a [Chart.js](https://www.chartjs.org/) component. [https://github.com/mussonindustrial/embr/raw/main/modules/embr-charts/docs/examples/chart-js.png](https://github.com/mussonindustrial/embr/raw/main/modules/embr-charts/docs/examples/chart-js.png) Chart.js renders chart elements on an HTML5 canvas unlike other D3.js-based charting libraries that render as SVG. Canvas rendering makes Chart.js very performa…

This is the page for the module with some examples, but chartjs has pretty extensive documentation and examples. You won't be able to find much about chartjs + Ignition but you should be able to apply the chartjs options etc to them.

I should also mention its a third-party module, so always make sure your customer and or employer is okay and comfortable with that. I may know how reputable Ben is, but they may not so please be mindful of that!

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [December 31, 2024, 2:37pm UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/63 "2024-12-31T14:37:54Z")

</div>

> [@Benjamin\_Furlani](#):
>
> your customer and or employer

This topic is in the **Maker** category, FWIW.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [December 31, 2024, 2:42pm UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/64 "2024-12-31T14:42:58Z")

</div>

> [@Benjamin\_Furlani](#):
>
> chartjs has pretty extensive documentation and examples

All the Chart.js examples should match 1-to-1; the only examples that require rework are the ones with advanced interactivity (adding points, adjusting ranges, etc.).

> [@Abiiiiii22](#):
>
> I tried to get it from GitHub but it only renders about 3 charts and can't figure out how to customize them.

If you’ve got any specific questions, throw them in the thread over here: [Musson Industrial’s Embr-Charts Module](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618)

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [December 31, 2024, 2:46pm UTC](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/65 "2024-12-31T14:46:10Z")

</div>

> [@Benjamin\_Furlani](#):
>
> I should also mention its a third-party module

> [@pturmel](#):
>
> This topic is in the **Maker** category, FWIW.

Hey, if anyone wants to pay us for support of their Maker installation, we’d be happy to oblige (assuming their use of Maker Edition falls within its terms and conditions) 😆.

> **[Support | Musson Industrial](https://docs.mussonindustrial.com/support/)**
>
> Paid Support

[Previous page](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467.md?page=1)
