# Musson Industrial’s Embr-Charts Module

**URL:** <https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618>\
**Category:** 3rd Party Modules\
**Tags:** perspective\
**Created:** [June 10, 2024, 12:53pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618 "2024-06-10T12:53:46Z")\
**Posts on this page:** 1\
**Showing post:** 1

<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:** [June 10, 2024, 12:53pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/1 "2024-06-10T12:53:46Z")

</div>

# 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 performant, especially for large datasets and complex visualizations that would otherwise require thousands of SVG nodes in the DOM tree.

The following video demonstrates the performance of panning and zooming through 100,000 data points:

The Chart.js component supports the following chart types:

1. `bar`
2. `boxplot`
3. `bubble`
4. `dendrogram`
5. `doughnut`
6. `euler`
7. `forceDirectedGraph`
8. `funnel`
9. `graph`
10. `line`
11. `matrix`
12. `pcp`
13. `pie`
14. `polarArea`
15. `radar`
16. `scatter`
17. `sankey`
18. `tree`
19. `treemap`
20. `venn`
21. `violin`
22. `wordCloud`

Details on how to configure the component can be found on the [Chart.js documentation site](https://www.chartjs.org/docs/latest/).  
All configurations supported by Chart.js are supported on the Perspective component.

**Notable Features**

- CSS Custom Properties
  - The Perspective component supports CSS Custom Properties for all property values.

- Scriptable Options
  - Chart.js scriptable options are supported.
  - Any component property value containing an arrow function `() =>` statement will be converted into a JavaScript function that is called at render-time.

- Plugin Support
  - Several of the most feature-rich community plugins are included.

## Download

Full documentation and the latest release is available [here](https://github.com/mussonindustrial/embr/tree/main/modules/embr-charts).

> **[embr-charts · Releases · mussonindustrial/embr](https://github.com/mussonindustrial/embr/releases?q=embr-charts&expanded=true)**
>
> 🔥 Open-source modules for Ignition by Inductive Automation. The home of Charts, Thermo, Periscope, and more. - mussonindustrial/embr

* * *

## Sponsorship

If you benefit from this module for commercial use, we ask you to consider sponsoring our efforts through [GitHub sponsors](https://github.com/sponsors/mussonindustrial). Your support will allow us to continue development of open-source modules and tools that benefit the entire community (plus there are some bonuses for sponsors 🙂).

---

_[View the full topic](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618)._