Hmm, using this seems to have broken the data points tooltip functionality (hovering on data points no longer brings up a "tooltip")
Edit: it kind of works, but only for the first dataset, and the interaction mode doesn't work for a lot of the options, like "x".
Edit2:
This might be a big one... but, how would I go about mimicking the "x trace" from this chart?
Click on "Price and Demand"
Not dumb questions 
The callback property is what you want, but you have to use arrow function syntax instead of the normal function syntax used in the linked example.
So, to make that example work, you’d set ticks.callback with the following:
(value) => {
return '$' + value
}
It should be under options.scales[scaleId].title, I think at minimum you need to set display and text to get it to appear.
I’ll check this out later, maybe @ryan.white knows something about this?
Hmm, that killed the component, but setting it to this works:
Nope, it was just the forum-converted dodgy apostrophe characters that I blindly pasted in... replacing with un-adultered versions worked 
(value, index, ticks) => {
return '$' + value;
}
Oh right, I completely misread that doc section when I looked at it before... got it working now, cheers!
Eww, my bad. I'll blame it on my phone 
.
Are you looking at the line setup or the split tooltip setup? Or both?
Anything split on the tooltips requires you to write a tooltip handler on the external property of the tooltips plugin. In there, you'll need to handle creating an HTML tooltip, which in my case was creating a div for each Y axis.
Can you post a screenshot of the chart config? Or the JSON?
I'm trying to do something similar to do a stack total, like this:
but having trouble visualizing exactly how i do the function.
Thanks!
Much love for these charts, all my new projects are including them.
Any chance you could add the doughnutlabels plugin to the package?
Thanks!
Unfortunately that plugin isn't compatible with the version of Chart.js included in Embr-Charts.
Embr-Charts includes Chart.js version 4.4.8, and the plugin is only compatible with version 2.
// chartjs-plugin-doughnutlabel/package.json
...
"peerDependencies": {
"chart.js": ">= 2.7.0 < 3"
}
...
This might be a simple enough task that you can get away with an inline plugin. Here's a little bit to get you started:
// plugins[0].beforeDatasetDraw
(chart, args, options) => {
const { ctx, data } = chart
ctx.save()
const xCenter = chart.getDatasetMeta(0).data[0].x
const yCenter = chart.getDatasetMeta(0).data[0].y
ctx.translate(xCenter, yCenter)
ctx.font = options.font
ctx.textAlign = 'center'
ctx.fillText(options.text, 0, 0)
ctx.restore()
}
// options.plugin.doughnutText
{
text: 'Testing!'
font: 'bold 32px sans-serif'
}
Thanks again!
I wanted to share what I ended up going with to get it working for me.
// plugins[0].afterDatasetDraw
// use after for the label to be above the chart z level
(chart) => {
const { ctx, chartArea, data, options } = chart
if (!chartArea) return // Check if chart is initialized
ctx.save()
// Get center of the chart
const xCenter = (chartArea.left + chartArea.right) / 2
const yCenter = (chartArea.top + chartArea.bottom) / 2
// Get first data value
const firstValue = data.datasets[0]?.data[0] ?? 0 // Default to 0 if missing
const text = `${firstValue}`
// Font & color (override in options if needed)
const font = options.plugins.doughnutText?.font || "bold 20px Arial"
const color = options.plugins.doughnutText?.color || "#000"
ctx.font = font
ctx.fillStyle = color
ctx.textAlign = "center"
ctx.textBaseline = "middle"
ctx.fillText(text, xCenter, yCenter)
ctx.restore()
}
also, have you noticed that the chart doesn't play nicely with css color themes? using var() colors will cause the chart colors to initialize as all black then it gets fixed when the chart redraws.
edit: how do you get the fancy color formatting in your code pasting?
I have noticed some weirdness with CSS properties…
Chart.js renders to a canvas, meaning that it doesn’t support CSS the same way as other elements. To get around this, component properties that contain the var() syntax are dereferenced and then their values are passed into the chart. EDIT: To clarify, this is a unique feature of Embr-Charts, not a Chart.js feature.
If you can post a reproducible example it’d help with solving any weird behaviors present.
Version 2.2.5 is out and provides a fix for the gateway schema validation errors that were occurring during installation and startup.
Hi, I’m working on implementing linked line charts similar to the example shown on the Chart.js Crosshair Plugin sample page (chartjs-plugin-trace / sample), where the zoom and tooltip are synchronized across two charts (as shown in the screenshot attached).
Could you please advise on the correct configuration needed to achieve synchronized zooming and tooltip between two charts using the Chart.js Crosshair Plugin? Specifically:
testView.zip (18.7 KB)
Thanks in advance for your help!
To quote past me:
I tried to get the same behavior as the sample page without any luck.
It looks like the mouse events are propagating between the charts because the pointHover events are happening, but the trace/crosshair isn't being rendered. It seems like other users have the same issue.
{
"custom": {},
"params": {},
"props": {},
"root": {
"children": [
{
"meta": {
"name": "Chartjs"
},
"position": {
"height": 181,
"width": 659,
"x": 37,
"y": 86
},
"props": {
"data": {
"datasets": [
{
"data": [
{
"x": 0,
"y": 20.790464349448122
},
{
"x": 1,
"y": 27.541905413990484
},
{
"x": 2,
"y": 9.044548907913263
},
{
"x": 3,
"y": 63.58544584440057
},
{
"x": 4,
"y": 40.57122042169531
},
{
"x": 5,
"y": 46.17945691520222
},
{
"x": 6,
"y": 5.272367698783542
},
{
"x": 7,
"y": 78.62029735550435
},
{
"x": 8,
"y": 1.384758302338518
},
{
"x": 9,
"y": 8.094105544748587
},
{
"x": 10,
"y": 93.29711393437752
},
{
"x": 11,
"y": 78.54999817500953
},
{
"x": 12,
"y": 30.022085778849018
},
{
"x": 13,
"y": 68.38927062938775
},
{
"x": 14,
"y": 93.84973459203651
},
{
"x": 15,
"y": 85.15266831524416
},
{
"x": 16,
"y": 3.3272574045278946
},
{
"x": 17,
"y": 3.4738230710669837
},
{
"x": 18,
"y": 76.78237778113568
},
{
"x": 19,
"y": 76.13468451530511
},
{
"x": 20,
"y": 88.63284915490885
},
{
"x": 21,
"y": 92.74877419440537
},
{
"x": 22,
"y": 94.12886888152015
},
{
"x": 23,
"y": 97.06398992204936
},
{
"x": 24,
"y": 46.71625167184086
},
{
"x": 25,
"y": 13.224799335767212
},
{
"x": 26,
"y": 35.052260048430696
},
{
"x": 27,
"y": 29.46821488097423
},
{
"x": 28,
"y": 90.27395392440542
},
{
"x": 29,
"y": 7.832816289114186
},
{
"x": 30,
"y": 15.799390058813623
},
{
"x": 31,
"y": 80.66585380750348
},
{
"x": 32,
"y": 4.629220116475031
},
{
"x": 33,
"y": 24.00958904699422
},
{
"x": 34,
"y": 8.133906226255029
},
{
"x": 35,
"y": 81.93116748921958
},
{
"x": 36,
"y": 82.82333811028309
},
{
"x": 37,
"y": 95.37635776015469
},
{
"x": 38,
"y": 74.00252644137744
},
{
"x": 39,
"y": 27.90694570663671
},
{
"x": 40,
"y": 30.569029278167793
},
{
"x": 41,
"y": 11.104072480586257
},
{
"x": 42,
"y": 68.15581447149303
},
{
"x": 43,
"y": 27.051454957054943
},
{
"x": 44,
"y": 48.477001171626725
},
{
"x": 45,
"y": 73.62917163080661
},
{
"x": 46,
"y": 7.528701180738118
},
{
"x": 47,
"y": 21.794180888547032
},
{
"x": 48,
"y": 17.0019331614802
},
{
"x": 49,
"y": 80.4420964468141
}
],
"label": "Dataset 1"
},
{
"data": [
{
"x": 25,
"y": 99.00283352088223
},
{
"x": 26,
"y": 36.743648170189644
},
{
"x": 27,
"y": 33.58269158236888
},
{
"x": 28,
"y": 70.52608530981715
},
{
"x": 29,
"y": 78.48664561425423
},
{
"x": 30,
"y": 99.80258881269653
},
{
"x": 31,
"y": 23.56577175483505
},
{
"x": 32,
"y": 27.6260054014127
},
{
"x": 33,
"y": 11.84780583914382
},
{
"x": 34,
"y": 78.95435294680595
},
{
"x": 35,
"y": 89.0983947949238
},
{
"x": 36,
"y": 87.63589420154018
},
{
"x": 37,
"y": 82.4714423791225
},
{
"x": 38,
"y": 46.29407127415893
},
{
"x": 39,
"y": 12.463880984334686
},
{
"x": 40,
"y": 91.82293604614682
},
{
"x": 41,
"y": 9.645637547490315
},
{
"x": 42,
"y": 23.87358763050218
},
{
"x": 43,
"y": 64.35308758482624
},
{
"x": 44,
"y": 61.30614039090162
},
{
"x": 45,
"y": 60.123113026673906
},
{
"x": 46,
"y": 11.262924017594045
},
{
"x": 47,
"y": 36.72684549715057
},
{
"x": 48,
"y": 19.144808134626057
},
{
"x": 49,
"y": 11.499648689135334
},
{
"x": 50,
"y": 48.862954644422615
},
{
"x": 51,
"y": 44.0188922198424
},
{
"x": 52,
"y": 1.4731641405698048
},
{
"x": 53,
"y": 76.62654204425371
},
{
"x": 54,
"y": 97.09498548555429
},
{
"x": 55,
"y": 68.88623969428103
},
{
"x": 56,
"y": 9.347347267187478
},
{
"x": 57,
"y": 27.59945299037486
},
{
"x": 58,
"y": 38.62680310622668
},
{
"x": 59,
"y": 64.48467246665813
},
{
"x": 60,
"y": 99.50148874944306
},
{
"x": 61,
"y": 59.35003045509352
},
{
"x": 62,
"y": 7.407803152895475
},
{
"x": 63,
"y": 62.077958133975066
},
{
"x": 64,
"y": 19.550924069869623
},
{
"x": 65,
"y": 59.290461562229346
},
{
"x": 66,
"y": 15.46272365498117
},
{
"x": 67,
"y": 27.411246578970218
},
{
"x": 68,
"y": 59.515203740704415
},
{
"x": 69,
"y": 76.39871363134311
},
{
"x": 70,
"y": 20.255435491968
},
{
"x": 71,
"y": 57.26165130029921
},
{
"x": 72,
"y": 73.41996375745644
},
{
"x": 73,
"y": 68.57751118650746
},
{
"x": 74,
"y": 25.40840081665815
}
],
"label": "Dataset 2"
}
]
},
"options": {
"elements": {
"point": {
"hoverRadius": 12
}
},
"plugins": {
"crosshair": {},
"tooltip": {
"animation": false,
"intersect": false,
"mode": "interpolate",
"position": "nearest"
},
"zoom": {
"pan": {
"modifierKey": null
}
}
},
"scales": {
"x": {
"type": "linear"
},
"y": {
"type": "linear"
}
}
}
},
"type": "embr.chart.chart-js"
},
{
"meta": {
"name": "Chartjs_0"
},
"position": {
"height": 181,
"width": 659,
"x": 62,
"y": 376
},
"props": {
"data": {
"datasets": [
{
"data": [
{
"x": 0,
"y": 20.790464349448122
},
{
"x": 1,
"y": 27.541905413990484
},
{
"x": 2,
"y": 9.044548907913263
},
{
"x": 3,
"y": 63.58544584440057
},
{
"x": 4,
"y": 40.57122042169531
},
{
"x": 5,
"y": 46.17945691520222
},
{
"x": 6,
"y": 5.272367698783542
},
{
"x": 7,
"y": 78.62029735550435
},
{
"x": 8,
"y": 1.384758302338518
},
{
"x": 9,
"y": 8.094105544748587
},
{
"x": 10,
"y": 93.29711393437752
},
{
"x": 11,
"y": 78.54999817500953
},
{
"x": 12,
"y": 30.022085778849018
},
{
"x": 13,
"y": 68.38927062938775
},
{
"x": 14,
"y": 93.84973459203651
},
{
"x": 15,
"y": 85.15266831524416
},
{
"x": 16,
"y": 3.3272574045278946
},
{
"x": 17,
"y": 3.4738230710669837
},
{
"x": 18,
"y": 76.78237778113568
},
{
"x": 19,
"y": 76.13468451530511
},
{
"x": 20,
"y": 88.63284915490885
},
{
"x": 21,
"y": 92.74877419440537
},
{
"x": 22,
"y": 94.12886888152015
},
{
"x": 23,
"y": 97.06398992204936
},
{
"x": 24,
"y": 46.71625167184086
},
{
"x": 25,
"y": 13.224799335767212
},
{
"x": 26,
"y": 35.052260048430696
},
{
"x": 27,
"y": 29.46821488097423
},
{
"x": 28,
"y": 90.27395392440542
},
{
"x": 29,
"y": 7.832816289114186
},
{
"x": 30,
"y": 15.799390058813623
},
{
"x": 31,
"y": 80.66585380750348
},
{
"x": 32,
"y": 4.629220116475031
},
{
"x": 33,
"y": 24.00958904699422
},
{
"x": 34,
"y": 8.133906226255029
},
{
"x": 35,
"y": 81.93116748921958
},
{
"x": 36,
"y": 82.82333811028309
},
{
"x": 37,
"y": 95.37635776015469
},
{
"x": 38,
"y": 74.00252644137744
},
{
"x": 39,
"y": 27.90694570663671
},
{
"x": 40,
"y": 30.569029278167793
},
{
"x": 41,
"y": 11.104072480586257
},
{
"x": 42,
"y": 68.15581447149303
},
{
"x": 43,
"y": 27.051454957054943
},
{
"x": 44,
"y": 48.477001171626725
},
{
"x": 45,
"y": 73.62917163080661
},
{
"x": 46,
"y": 7.528701180738118
},
{
"x": 47,
"y": 21.794180888547032
},
{
"x": 48,
"y": 17.0019331614802
},
{
"x": 49,
"y": 80.4420964468141
}
],
"label": "Dataset 1"
},
{
"data": [
{
"x": 25,
"y": 99.00283352088223
},
{
"x": 26,
"y": 36.743648170189644
},
{
"x": 27,
"y": 33.58269158236888
},
{
"x": 28,
"y": 70.52608530981715
},
{
"x": 29,
"y": 78.48664561425423
},
{
"x": 30,
"y": 99.80258881269653
},
{
"x": 31,
"y": 23.56577175483505
},
{
"x": 32,
"y": 27.6260054014127
},
{
"x": 33,
"y": 11.84780583914382
},
{
"x": 34,
"y": 78.95435294680595
},
{
"x": 35,
"y": 89.0983947949238
},
{
"x": 36,
"y": 87.63589420154018
},
{
"x": 37,
"y": 82.4714423791225
},
{
"x": 38,
"y": 46.29407127415893
},
{
"x": 39,
"y": 12.463880984334686
},
{
"x": 40,
"y": 91.82293604614682
},
{
"x": 41,
"y": 9.645637547490315
},
{
"x": 42,
"y": 23.87358763050218
},
{
"x": 43,
"y": 64.35308758482624
},
{
"x": 44,
"y": 61.30614039090162
},
{
"x": 45,
"y": 60.123113026673906
},
{
"x": 46,
"y": 11.262924017594045
},
{
"x": 47,
"y": 36.72684549715057
},
{
"x": 48,
"y": 19.144808134626057
},
{
"x": 49,
"y": 11.499648689135334
},
{
"x": 50,
"y": 48.862954644422615
},
{
"x": 51,
"y": 44.0188922198424
},
{
"x": 52,
"y": 1.4731641405698048
},
{
"x": 53,
"y": 76.62654204425371
},
{
"x": 54,
"y": 97.09498548555429
},
{
"x": 55,
"y": 68.88623969428103
},
{
"x": 56,
"y": 9.347347267187478
},
{
"x": 57,
"y": 27.59945299037486
},
{
"x": 58,
"y": 38.62680310622668
},
{
"x": 59,
"y": 64.48467246665813
},
{
"x": 60,
"y": 99.50148874944306
},
{
"x": 61,
"y": 59.35003045509352
},
{
"x": 62,
"y": 7.407803152895475
},
{
"x": 63,
"y": 62.077958133975066
},
{
"x": 64,
"y": 19.550924069869623
},
{
"x": 65,
"y": 59.290461562229346
},
{
"x": 66,
"y": 15.46272365498117
},
{
"x": 67,
"y": 27.411246578970218
},
{
"x": 68,
"y": 59.515203740704415
},
{
"x": 69,
"y": 76.39871363134311
},
{
"x": 70,
"y": 20.255435491968
},
{
"x": 71,
"y": 57.26165130029921
},
{
"x": 72,
"y": 73.41996375745644
},
{
"x": 73,
"y": 68.57751118650746
},
{
"x": 74,
"y": 25.40840081665815
}
],
"label": "Dataset 2"
}
]
},
"options": {
"elements": {
"point": {
"hoverRadius": 12
}
},
"plugins": {
"crosshair": {},
"tooltip": {
"animation": false,
"intersect": false,
"mode": "interpolate"
},
"zoom": {
"pan": {
"modifierKey": null
}
}
},
"scales": {
"x": {
"type": "linear"
},
"y": {
"type": "linear"
}
}
}
},
"type": "embr.chart.chart-js"
}
],
"meta": {
"name": "root"
},
"type": "ia.container.coord"
}
}
Doesn't seem like it works, unfortunately 
.
I think this is currently possible but difficult. I have an idea of how, but it's involved enough that I can't immediately provide an example. The idea:
onZoom and onPan listeners to each chart. These listeners should looks at the list of charts in the global scope and then update the start/end/zoom.I actually don't know how to do this. Although it's broken, the chartjs-plugin-crosshair can probably be a reference.
Thanks for the clarification! I understand it’s tricky right now.
Quick question: is the crosshair.js used on the demo site (ChartJs 3 with crosshair - StackBlitz) actually working and usable? If so, is there a way I can use or extract that exact JS code locally to replace or override my current setup, so I can try to replicate the same behavior?
If not, could you point me toward how I might substitute or modify the plugin files locally to match the demo site's behavior?
Thanks again for your help!
It seems like it’d work, you could probably convert it to an inline plugin with some effort.
Currently* there’s no way to modify the JavaScript that’s loaded by the component. The only JavaScript you can control is in the components lifecycle events and properties. There’s nothing stopping you from loading a script from an outside source from a lifecycle callback, but it’s up to you to host that file somewhere.
I bet the demo site is using an older version of Chart.js. If this is must-have feature for you, and you can find the version they are using in the demo site, I’d recommend trying to build Embr-Charts yourself. The module is open source and the build is easily reproducible; it should just be a simple change to package.json file.
Eventually I’d like to provide a better trace plugin with the module, but it’s not a priority for me at the moment.
*I’m working on a feature that would allow you to easily serve JavaScript files to Perspective from the gateway; it’d be analogous to the pylib folder. It’s still a ways off, but I am thinking about these types of problems.
@bmusson, This module is literally amazing! Performs awesomely and can do so much more than the basic powerchart from Ignition (no offense to Ignition), and in my opinion, apexcharts as well. Thank you for all the hard work!
chart.js dependency to 4.4.9.After talking with @Kyle_Chase1, we're going with option 4.
For those too lazy to click the link:
One-for-one replacement:
Users must be able to:
Additionally, if both the Kyvis-Labs module and Embr-Charts are installed simultaneously, Embr-Charts should register and use the ApexCharts (Legacy) component in place of the Kyvis-Labs version, effectively overriding it to ensure compatibility and consistency.
The original component should continue to be available under the name "ApexCharts (Legacy)" within Embr-Charts.
A separate, enhanced "ApexCharts" component should be added that takes advantage of JavaScript features provided by Embr.
Feedback is always welcome.
I'm using the Embr-Charts module v2.2.6 working with a double-ring doughnut chart and am having trouble applying custom colors for the ring slices.
If I set datasets[n].backgroundColor to an array of color strings then this does color the ring slices however I receive an error which causes the chart to error until refreshed.
data.datasets[n].backgroundColor: array found, string, null expected
If instead I use props.options.plugins.colors with either colors or scheme as key then I receive no errors however colors are not applied to the chart.
Does anyone know how to assign coloring for multiple datasets in the doughnut chart?
