Change color of the bar chart based on value

0
Hello. I would like to change the color of a bar in a bar chart in such a way that: the chart will display information from two streams (Data source =  two Single series), the current value + name and the predefined value + name. Only the color of the bar for the current value + name will change (not the predefined value + name), so that if the current value is greater than the predefined value, the bar will turn red, and if it is equal to or less than, it will be green. I also tried working with AnyChart and found the marker: color, but I don't know how to incorporate it into the JSON.
asked
1 answers
0

Hey there,

I think what you're trying to achieve is possible with AnyChart and some custom logic to build the chart data. I've published this video on doing custom charts in AnyChart - which will give you the basics of how to build the JSON structure for the chart. 

Also you'll need to build on the information I've provided there by adapting the following JSON to your preference - the code below is for the chart DATA component discussed in the video. 

 

[

    {

        "meta": {

            "columnNames": {

                "x": "A",

                "y": "B"

            }

        },

        "mode": "markers",

        "type": "bar",

        "xsrc": "matt.roboyo:4:699a75",

        "x": [

            "a",

            "b",

            "c"

        ],

        "ysrc": "matt.roboyo:4:058774",

        "y": [

            "2",

            "3",

            "4"

        ],

        "marker": {

            "color":["red","green","blue"],

    "cornerradius": "5%"

        },

        "showlegend": true,

        "orientation": "v"

    }

]

 

And finally, you'll need to build your logic (in the data source microflow) to handle when to mark a bar with a different color. 

 

I'd suggest you start by following the tutorial to build a pie chart, then once you understand the concepts for AnyChart, adapt that process as per the JSON snippet above. Good luck!

 

P.S. I was able to achieve something similar when testing out the idea. So it IS doable, you're on the right path. 

Screenshot 2025-02-12 101755.png

answered