How to change the structure or style of the tooltip for a chart.

[GooseDeer]

I am trying to change the way that my tooltip looks for the chart, as currently the labels and values are left aligned and if you have multiple values this is not user friendly to view. For example, currently my tooltip is:

---

I am wanting to set his so label and values are in two columns and are therefore aligned. I tried with for chart.js and it looks like:

---

Depending on how many values to have in the bar chart, this can make is much easier to read. However when I add anything to options > plugins > tooltip, I am getting browse console errors. Below is an example of adding anything to the tooltip options throws the error:

      plugins: {
        tooltip: {
          callbacks: {
            labelColor: function(context) {
              return {
                borderColor: 'rgb(0, 0, 255)',
                backgroundColor: 'rgb(255, 0, 0)',
                borderWidth: 2,
                borderDash: [2, 2],
                borderRadius: 2,
              };
            },
            labelTextColor: function(context) {
              return '#543453';
            }
          }
        }
      },

chunk.N2KUG5BT.js:15353 Uncaught DataCloneError: Failed to execute 'structuredClone' on 'Window': function(context) {
              return {
                borderColor: 'rgb(0, 0, 255)',
                ba...<omitted>... } could not be cloned.
    at HTMLElement.transformProperties (chunk.N2KUG5BT.js:15353:20)
    at HTMLElement.applyDefaultConfig (chunk.N2KUG5BT.js:15558:25)
    at HTMLElement.applyDefaultConfig (chunk.6DA65ZN2.js:21:26)
    at HTMLElement.renderChart (chunk.N2KUG5BT.js:15511:17)
    at chunk.N2KUG5BT.js:15476:12
transformProperties @ chunk.N2KUG5BT.js:15353
applyDefaultConfig @ chunk.N2KUG5BT.js:15558
applyDefaultConfig @ chunk.6DA65ZN2.js:21
renderChart @ chunk.N2KUG5BT.js:15511
(anonymous) @ chunk.N2KUG5BT.js:15476
requestAnimationFrame
scheduleRenderChart @ chunk.N2KUG5BT.js:15474
updated @ chunk.N2KUG5BT.js:15614
_$AE @ chunk.7OBLIRXR.js:248
performUpdate @ chunk.7OBLIRXR.js:243
scheduleUpdate @ chunk.7OBLIRXR.js:221
_$EP @ chunk.7OBLIRXR.js:217
await in _$EP
requestUpdate @ chunk.7OBLIRXR.js:205
_$Ev @ chunk.7OBLIRXR.js:157
y @ chunk.7OBLIRXR.js:154
i3 @ chunk.7OBLIRXR.js:279
WebAwesomeElement @ chunk.BVHIHHSC.js:121
WaChart @ chunk.N2KUG5BT.js:14998
WaBarChart @ chunk.6DA65ZN2.js:16
(anonymous) @ chunk.BVHIHHSC.js:20
__decorateClass @ chunk.JHZRD2LV.js:39
(anonymous) @ chunk.6DA65ZN2.js:36

Is there a way to use and changing the way that the tooltip is styled and structure. From the docs, it looks like you can only disable the tooltip.

[dorrzun]

I apologize that this doesn't directly answer your question, but it CSS Grid might be useful in order to enforce two columns per entry in the tooltip?