# Preview - Chart.js Charting Module **URL:** \ **Category:** 3rd Party Modules\ **Tags:** perspective\ **Created:** [February 28, 2024, 6:39am UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483 "2024-02-28T06:39:31Z")\ **Posts on this page:** 16\ **Page:** 1
**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:** [February 28, 2024, 6:39am UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483/1 "2024-02-28T06:39:31Z")
_ **Coming soon™** _ # [Embr Chart.js Module](https://github.com/mussonindustrial/embr) An Ignition module that adds [Chart.js](https://www.chartjs.org/) powered charting components for Ignition Perspective. ## Motivation Why do we need another Perspective charting module? Smoothly plotting real time data in Perspective is currently hard. Included in this latest snapshot build is a **Realtime Chart** component, intended for high speed charting. This example shows 6 charts updating every 100ms and rendering at 60fps. This is a teaser build, do not go building anything production related around these components yet. Current feedback I'd like from the community: 1. What update rates should I use as a performance benchmark? (10 charts at 250ms, 100 charts at 1s, etc.)? What rates/timescales are you trying to achieve in the real world? 2. If there were performance gains possible by tightly coupling the component to tags/tag history, would you be interested? Or would you prefer a component that was data-source agnostic? Latest signed module download is available here: > **[GitHub - mussonindustrial/embr: 🔥 Open-source modules for Ignition by Inductive...](https://github.com/mussonindustrial/embr/)** > > 🔥 Open-source modules for Ignition by Inductive Automation. The home of Charts, Thermo, Periscope, and more. ---
**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:** [February 28, 2024, 9:20am UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483/2 "2024-02-28T09:20:30Z")
> [@bmusson](#): > > tightly I like it a lot with pushing real-time data. Very useful. It is also nice, we have the option to push the dataset and see real-time charts like Apexchart: > **[Realtime - JavaScript Line Charts | ApexCharts.js](https://apexcharts.com/javascript-chart-demos/line-charts/realtime/)** > > Interactive Realtime chart in JavaScript, built with ApexCharts.js. Live demo plus copy-paste source code. ---
**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:** [February 28, 2024, 9:28am UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483/3 "2024-02-28T09:28:36Z")
I test it on 8.1.37 and get this error: 1. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/6/36732a78fb12c4eda8963aa050acd9b4e429fad9.png) 1. when I try to move the component in designer the mouse pointer has offset with the component. 2. There is no select handle around the component. ---
**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:** [February 28, 2024, 12:33pm UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483/4 "2024-02-28T12:33:39Z")
100ms is the rough boundary for human perception. If you smoothly update at that pace, it will look continuous to most people. I've had applications that displayed hours worth of a dozen pens sampled at 100ms. If you can do that in Perspective, I'll be both shocked and pleased. > [@bmusson](#): > > tightly coupling the component to tags/tag history We should talk. ---
**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:** [February 28, 2024, 1:43pm UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483/5 "2024-02-28T13:43:26Z")
The component defaults aren't renderable yet, here's a simple working real-time chart. ```auto [ { "type": "mussonindustrial.chart.chart-js.realtime", "version": 0, "props": { "data": { "datasets": [ { "label": "Dataset" }, { "label": "Dataset 2" } ] }, "options": { "elements": { "point": { "radius": 0 } }, "scales": { "x": { "realtime": { "delay": 2000, "duration": 10000, "fps": 60, "refresh": 100, "ttl": 15000 }, "type": "realtime" }, "y": {} } }, "values": [ { "value": 0 }, { "value": 500 } ] }, "meta": { "name": "Realtime Chart" }, "position": { "height": 300, "width": 484 }, "custom": {} } ] ``` > [@nader.chinichian](#): > > - when I try to move the component in designer the mouse pointer has offset with the component. > - There is no select handle around the component. I'm seeing this too, albeit randomly. Sometimes the movement just gets wonky. ---
**Author:** ![splata](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@splata](https://forum.inductiveautomation.com/u/splata)\ **Post date:** [May 2, 2024, 5:50pm UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483/6 "2024-05-02T17:50:32Z")
hello, thanks @bmusson, where can find docs about the component properties? I copy the properties from your video and it works. but I´d like to customize other properties. I looking to the git page but I can't find anything related. ---
**Author:** ![splata](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@splata](https://forum.inductiveautomation.com/u/splata)\ **Post date:** [May 2, 2024, 6:03pm UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483/7 "2024-05-02T18:03:57Z")
i think that the answer is [https://www.chartjs.org](https://www.chartjs.org) thanks. ---
**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:** [May 2, 2024, 6:32pm UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483/8 "2024-05-02T18:32:00Z")
Yup this is the full documentation. I’m working on getting the full schema into the designer. ---
**Author:** ![Jose\_Enrique\_Ogando](https://avatars.discourse-cdn.com/v4/letter/j/b5e925/32.png) [@Jose\_Enrique\_Ogando](https://forum.inductiveautomation.com/u/Jose_Enrique_Ogando)\ **Post date:** [May 2, 2024, 6:40pm UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483/9 "2024-05-02T18:40:59Z")
Are you planning to add a pie chart? ---
**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:** [May 2, 2024, 8:42pm UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483/10 "2024-05-02T20:42:26Z")
The component will render pie/doughnut charts, see the examples here: > **[Pie | Chart.js](https://www.chartjs.org/docs/latest/samples/other-charts/pie.html)** > > Open source HTML5 Charts for your website ---
**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:** [May 16, 2024, 9:23am UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483/11 "2024-05-16T09:23:05Z")
Just released another snapshot build `0.2.0-SNAPSHOT`. > **[Release embr-chart-js-0.2.0-SNAPSHOT · mussonindustrial/embr](https://github.com/mussonindustrial/embr/releases/tag/embr-chart-js-0.2.0-SNAPSHOT)** > > What's Changed > > Bump kotest from 5.8.0 to 5.8.1 by @dependabot in #27 > pull changes by @benmusson in #40 > > Full Changelog: embr-chart-js-0.1.5-SNAPSHOT...embr-chart-js-0.2.0-SNAPSHOT This release is a result of narrowing the feature set to just the basic Chartjs component, no fancy real-time or tag-history stuff yet. I'd like to get this to a stable `1.0.0` sometime this month. New things since the last update: - Improved component property schema. There are some conditional/complex things I can't get to map correctly, but most of it is there. - Corrected default properties. Dragging a new chart to the view results in a chart with no errors. - Chart properties have CSS custom property support. - Chart properties have JavaScript function support. - Added designer icons. - Chart is now grouped with the other built-in charting components. - Moved to functional component style. - Started on documentation. ---
**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:** [May 31, 2024, 2:44pm UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483/12 "2024-05-31T14:44:33Z")
0.2.2 release, and another performance teaser: 1. 100,000 data points (In `[{x: number, y: number},...]` format.) 2. Fast initial render (after all the data arrives to the session). 3. Zoom and pan @ 60+ fps. 4. Reasonable CPU usage. This is a release candidate, and any feedback would be greatly appreciated. ~~[(0.2.2) Embr-Charts-module.modl](https://github.com/mussonindustrial/embr/releases/download/embr-charts-0.2.2/Embr-Charts-module.modl)~~ Update: Module is officially released, see [this post](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618) for all future information. ---
**Author:** ![Pat\_Cunningham](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pat_cunningham/32/57710_2.png) [@Pat\_Cunningham](https://forum.inductiveautomation.com/u/Pat_Cunningham)\ **Post date:** [July 25, 2024, 10:10am UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483/14 "2024-07-25T10:10:07Z")
How do I hide the points on a line chart? Tried pointStyle=False and pointRadius=0 ---
**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:** [July 25, 2024, 2:27pm UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483/15 "2024-07-25T14:27:59Z")
There's a couple different places you can put those options, depending on what you want to accomplish. 1. Hide all points for all lines: ```js { "options": { "elements": { "point": { "radius": 0, "pointStyle": false } } } } ``` 1. Hide the points for specific dataset: ```js { "data": { "datasets": [ { "data": [], "label": "Dataset 1", "pointRadius": 0, "pointStyle": false } ] } } ``` You don't need both `pointRadius: 0` and `pointStyle: false`, either one alone will work to hide the points. My recommendation is to use `pointRadius: 0` because it is animatable (i.e. changing from `pointRadius: 0` to `pointRadius: 5` can happen smoothly) and gives you more options with the `hoverRadius` property. ---
**Author:** ![Human\_error](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/human_error/32/69876_2.png) [@Human\_error](https://forum.inductiveautomation.com/u/Human_error)\ **Post date:** [November 12, 2025, 7:47am UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483/16 "2025-11-12T07:47:32Z")
Is this module already compatible with version 8.3? ---
**Author:** ![andrew.budaiev](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andrew.budaiev/32/72921_2.png) [@andrew.budaiev](https://forum.inductiveautomation.com/u/andrew.budaiev)\ **Post date:** [November 12, 2025, 8:00am UTC](https://forum.inductiveautomation.com/t/preview-chart-js-charting-module/86483/17 "2025-11-12T08:00:26Z")
Yes, click the github link in the OP.