# Musson Industrial’s Embr-Charts Module **URL:** \ **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:** 20\ **Page:** 2
**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\ **Post date:** [August 9, 2024, 9:04pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/21 "2024-08-09T21:04:46Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/5/35befad143eab6b4ffc385650eba97498726ad48.png) Is it possible to have the area background in the radar chart a different color than the points? Whenever I try to do both, the points get overridden. Also, can text labels be added to the points and area? ---
**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:** [August 9, 2024, 9:25pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/22 "2024-08-09T21:25:14Z")
> [@dcan87](#): > > Is it possible to have the area background in the radar chart a different color than the points? Whenever I try to do both, the points get overridden. Use an array for `pointBackgroundColor`, and set a single `backgroundColor`. > [@dcan87](#): > > Also, can text labels be added to the points and area? The Chart.js component comes with [chartjs-plugin-datalabels](https://chartjs-plugin-datalabels.netlify.app/) installed, you should be able to use this to add labels to both the points and the area. There is currently no schema information included in the designer for the plugin, so you're on your own as far as configuration goes. Here's a simple example: ![java_xXleu43BPw](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/b/ab04c374aa7eea2c46f7de6439f7021364ea653e.png) ---
**Author:** ![justice5555](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@justice5555](https://forum.inductiveautomation.com/u/justice5555)\ **Post date:** [August 10, 2024, 2:12pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/23 "2024-08-10T14:12:36Z")
I have a mixed chart (one bar and two lines) and am trying to add data labels to just the bar chart, but I get a component error when setting datalabels to true. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/c/6c2886700850992c99fbc2d423df00c0d2d36dbb.png) ---
**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\ **Post date:** [August 10, 2024, 2:14pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/24 "2024-08-10T14:14:21Z")
Great! I originally had 'pointbackgroundcolor' instead of 'pointBackgroundColor' that did the trick plus adding pointRadius to the dataset section and not options\>elements\>point. ---
**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\ **Post date:** [August 10, 2024, 2:16pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/25 "2024-08-10T14:16:00Z")
I had the same issue. You have to add an object or value under the datalabels. See above where he fixed mine. ---
**Author:** ![justice5555](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@justice5555](https://forum.inductiveautomation.com/u/justice5555)\ **Post date:** [August 10, 2024, 2:25pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/26 "2024-08-10T14:25:21Z")
Eventually it loaded and the error went away, but it shows labels for all three charts as well as showing x and y values instead of just y. There is no + icon next to datalabels. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/c/7c8ed9d9e3d9fcd918aba7a94a94255a82db8308.png) ---
**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\ **Post date:** [August 10, 2024, 3:25pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/27 "2024-08-10T15:25:50Z")
Right-click is your friend! ---
**Author:** ![justice5555](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@justice5555](https://forum.inductiveautomation.com/u/justice5555)\ **Post date:** [August 10, 2024, 4:35pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/28 "2024-08-10T16:35:05Z")
Added to just dataset 0 with color, anchor, and align values, but the labels are not showing yet. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/d/bd9eb4e0fe6f4ec9b303208dc44e5075025d24a9.png) ---
**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\ **Post date:** [August 10, 2024, 7:04pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/29 "2024-08-10T19:04:12Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/8/68a1338685efb6474f6c771e049670f304ca1cab.png) Ok last question on the radar chart I believe. Trying to increase font size but the font size property seems to have no effect. The font weight did change but size is doing nothing... ---
**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:** [August 10, 2024, 8:21pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/30 "2024-08-10T20:21:19Z")
Here's an example of a mixed chart with datalabels enabled for the bar chart, and disabled for the line chart. ![20240810_161726](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/2/c25d9c12dc3a7221c9783d14d744e1edfe272389.png) I would highly recommend reading [this section of the Chart.js manual](https://www.chartjs.org/docs/latest/general/options.html), which discusses how options are resolved from top to bottom. EDIT: Also, there is a `datalabels.display` option you can use to control the visibility; use this instead of `labels.title`. ---
**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:** [August 10, 2024, 8:31pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/31 "2024-08-10T20:31:17Z")
> [@dcan87](#): > > Ok last question on the radar chart I believe. Trying to increase font size but the font size property seems to have no effect. The font weight did change but size is doing nothing... ![20240810_162836](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/d/6dc61a5ff91b0a48efda72fb04be477e56f385e4.png) The `radar` chart uses a radial axis, it has it's own set of properties: [Radial Axes | Chart.js](https://www.chartjs.org/docs/latest/axes/radial/) There's definitely room for improvement with the property schema here too. > > > https://www.chartjs.org/docs/latest/axes/radial/ > > \`options.scales.r\` has its o…wn special schema that is not used in the designer. ---
**Author:** ![justice5555](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@justice5555](https://forum.inductiveautomation.com/u/justice5555)\ **Post date:** [August 10, 2024, 9:42pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/32 "2024-08-10T21:42:46Z")
Almost there... The bar labels need to show just the y value. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/5/75758c6679a2950c9ccdec84bc470fbedc383236.png) ---
**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:** [August 10, 2024, 10:02pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/33 "2024-08-10T22:02:05Z")
Ah, my example had a category axis, but your chart has a linear axis. You will need to add a [custom formatter](https://master--chartjs-plugin-datalabels.netlify.app/guide/formatting.html#data-transformation). ```python data.datasets[0].data.datalabels { ... formatter: (value, context) => return value.y ... } ``` `formatter` is a [scriptable option](https://github.com/mussonindustrial/embr/blob/739afb0db7275b8acf94316d6eb9fc7acf38cb12/modules/charts/README.md#scriptable-options), so you have a lot of flexibility here. ![20240810_180459](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/2/3289948ab964b0adf9d0275f80fbaa6311434e3c.png) EDIT: Also, there is a `datalabels.display` option you can use to control the visibility; use this instead of `labels.title`. ---
**Author:** ![justice5555](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@justice5555](https://forum.inductiveautomation.com/u/justice5555)\ **Post date:** [August 10, 2024, 10:17pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/34 "2024-08-10T22:17:52Z")
That did it I think!! ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/5/3591d44ccbe3f41aa33682598318778f4cba11a3.png) ---
**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\ **Post date:** [August 11, 2024, 4:56pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/35 "2024-08-11T16:56:03Z")
Ok at least I know the right place now. Unfortunately, I think something is overwriting the chart font values, maybe the container it is in? ---
**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:** [August 11, 2024, 5:35pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/36 "2024-08-11T17:35:08Z")
Can you give some more information about what you’re expecting to see vs what is happening? ---
**Author:** ![justice5555](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@justice5555](https://forum.inductiveautomation.com/u/justice5555)\ **Post date:** [August 19, 2024, 3:24pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/37 "2024-08-19T15:24:56Z")
Trying to change the font color to white on the doughnut data labels (39 and 61 in the screenshot). Tried adding color, fontColor, etc. to dataset 0. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/8/48d4c5784772fca775b3c162479c8e59c491ed5c.png) ---
**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:** [August 19, 2024, 10:43pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/38 "2024-08-19T22:43:12Z")
Since those labels are provided by the `datalabels` plugin, you'll have to set the color there. ```js // For all datasets options.plugins.datalabels.color: #FFFFFF // For a single dataset data.datasets[index].datalabels.color: #FFFFFF ``` This same pattern holds for basically all properties; you can define something "higher up" the tree it and let it cascade down, or define it for a specific dataset. ---
**Author:** ![justice5555](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@justice5555](https://forum.inductiveautomation.com/u/justice5555)\ **Post date:** [August 20, 2024, 1:13pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/39 "2024-08-20T13:13:45Z")
Thanks Ben! I keep forgetting the defaults can be changed from value to object, etc., when needed. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/9/89de511e9f90b82200b5d410f85976eb43a64f89.png) ---
**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\ **Post date:** [August 21, 2024, 6:03pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/40 "2024-08-21T18:03:56Z")
> [@bmusson](#): > > [Missing Designer Properties - Radial Axes · Issue #167 · mussonindustrial/embr · GitHub](https://github.com/mussonindustrial/embr/issues/167) I went back and retried, and these settings worked for what I was trying to accomplish, thank you! [Previous page](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618.md?page=1) [Next page](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618.md?page=3)