Hello everyone,
I am trying to set up my chart but i am having some issues with the colors.
So i came from bubble and i have this chart:
I have no clue on how to set up the condition that allows the bar to turn red when below 0 and green when above 0 in wappler.
I've also been strugling to remove the x axis like the screenshot above.
My chart code right now:
<dmx-chart id="chart1" responsive="true" dmx-bind:data="chart_netpnl.data.query" dataset-1:label="profit" dataset-1:value="Profit" point-size="" type="bar"></dmx-chart>
Thanks,
Rodrigo
Teodor
2
You're hitting some limits of what the component offers out of the box. With some custom code you will be able to achieve what you need:
<dmx-chart id="chart1" responsive="true" dmx-bind:data="chart_netpnl.data.query" dataset-1:label="profit" dataset-1:value="Profit" point-size="" type="bar" label-x="''" dmx-bind:colors="chart_netpnl.data.query.values(`Profit`).map(" $value>= 0 ? '#1aa042' : '#d83148' ")"></dmx-chart>
Ok, that's the hardest part for me haha.
That code didn't worked, see:
<dmx-chart id="chart1" responsive="true" dmx-bind:data="chart_netpnl.data.query" dataset-1:label="profit" dataset-1:value="Profit" point-size="" type="bar" label-x="''" dmx-bind:colors="chart_netpnl.data.query.values(`profit`).map(" $value>= 0 ? '#1aa042' : '#d83148' ")"></dmx-chart>
Teodor
4
Do you see any errors in the browser console?
Teodor
5
I found my mistake, your column is called Profit with capital P:
<dmx-chart id="chart1" responsive="true" dmx-bind:data="chart_netpnl.data.query" dataset-1:label="profit" dataset-1:value="Profit" point-size="" type="bar" label-x="''" dmx-bind:colors="chart_netpnl.data.query.values(`Profit`).map(" $value>= 0 ? '#1aa042' : '#d83148' ")"></dmx-chart>
so this should work now.
Nope, it's not...
In my wappler code i see some red characters:
Teodor
7
Please always check for errors in the console if something is not working.
There's no errors in my browser console
Teodor
9
I really see no reason why it wouldn't work for you, while the same code works in my local test:
Is the dmxFormatter js added on the page?
Please provide a link where i can check the page.
Sorry, i've been out of office. Here's the link: https://93a548e8cdf3.ngrok-free.app/dashboard
i've added some parameters to my code and it's now working. Your code has multicolor="true" and colors="colors2" and mine hadn't.
Thanks!
