Dmxcharts - bar chart - dynamic coloring of datasets

Wappler General Need Help
1

HI, I cannot figure out how i can define the colors of the bar charts in a dmxchart. my app allows customers to choose the colors and font that they see and need to extend this to the charts that are built.
I've tried:

  • editing the dmxCharts.js file, initially overwriting the default colors to static ones that were better than the themes but not what i wanted... worked ok
  • extended the editing of the default chart colors to try and use root values that i have setup (e.g. replace '#920000' with var(--pid-dataseta) and also with quotes 'var(--pid-dataseta) ' but doesnt work.
  • tried using css, but despite hours/days of trawling the internet and trying lots of options cannot get it to work.... i can using background-color color the entire chart but not each individual bar.

Would appreciate any thoughts guidance from the community.

thanks

2

There's an ugly way using javascript..

First you execute this on console:

const charts = Object.values(Chart.instances);
console.log(charts);

That will give you more details:

image
image471×589 24 KB

Now, assuming you have something like this:
<dmx-value id="var1" dmx-bind:value="'#e74c3c'"></dmx-value>

Then this js code will replace the background color of the chart:

const chart = Object.values(Chart.instances)[0]; //change to desire chart index;
chart.data.datasets[0].backgroundColor = dmx.parse('content.var1.value');
chart.data.datasets[0].borderColor = dmx.parse('content.var1.value');
chart.update();

Before:

image
image1535×457 28.9 KB

After:

image
image1540×456 33.4 KB

If color is dynamic maybe you can wrap it on a function and wait till server connect is ready

3

Wouldn’t an array with color codes like this do the job?

dmx-bind:colors="dynamic_expression"

where dynamic expression returns an array of colors like: ['#ffffff','#000000','#eeeeee']

4

Hi franse, great thanks will give it a go.