Streamlit-elements nivo charts negative value colours

🧩 Streamlit Components
1

hi there!! Im in process of creating the movable dashboard but have come to an issue where i cant set the colour for negative and positive values.

I added a setcolor identification to every row of data

positive_color = "green"
negative_color = "red"

        for series in DATA:
            series_data = series["data"]
            for data_point in series_data:
                if data_point["y"] >= 0:
                    data_point["setcolor"] = positive_color
                else:
                    data_point["setcolor"] = negative_color

what looks like this

[

0:{

"id":

"your_data_id"

"data":

[

0:{

"x":

"2021-04-16"

"y":

-10

"setcolor":

"red"

}

1:{

"x":

"2021-05-05"

"y":

-227

"setcolor":

"red"

}

2:{

"x":

"2021-05-17"

"y":

-114

"setcolor":

"red"

}

3:{

"x":

"2021-07-14"

"y":

-243

"setcolor":

"red"

where should i add the setcolor values so i can see a diverged bar chart with positive and negative values coloured in green and red colours?

    def __call__(self):
        DATA = [
            {
                "id": "your_data_id",  # Change to a suitable ID for your data
                #"color": "hsl(94, 70%, 50%)",
                "data": [
                    {"x": row["CloseDate"], "y": row["FifoPnlRealized"]}
                    for _, row in self.pnl_chart_data.iterrows()
                ],
            }
        ]
        positive_color = "green"
        negative_color = "red"

        for series in DATA:
            series_data = series["data"]
            for data_point in series_data:
                if data_point["y"] >= 0:
                    data_point["setcolor"] = positive_color
                else:
                    data_point["setcolor"] = negative_color

        data = DATA
        st.write(data)

        with mui.Paper(
            key=self._key,
            sx={"display": "flex", "flexDirection": "column", "borderRadius": 3, "overflow": "hidden"},
            elevation=12
        ):
            with self.title_bar():
                mui.icon.PieChart()
                mui.Typography("Bar chart", sx={"flex": 1})
            with mui.Box(sx={"flex": 2, "minHeight": 0}):
                nivo.Bar(
                    data=data[0]['data'],

                    keys=["y"],
                    indexBy="x",
                    theme=self._theme["dark" if self._dark_mode else "light"],
                    margin={"top": 80, "right": 40, "bottom": 80, "left": 40},
                    padding=0.3,
                    groupMode="grouped",
                    layout="vertical",
                    valueScale={"type": 'linear'},
                    #valueFormat=" >-.2f",
                    indexScale={"type": 'band', "round": True},
                    #colors={"scheme": 'red_yellow_green'},
                    colorBy="setcolor",
                    minValue="auto",
2

One possible solution is to use a custom function for the colorBy property of the nivo.Bar component. The function should take a data point as an argument and return the corresponding color based on the setcolor property

3

do you mean to add the “setcolor” to colorBy setting?

colorBy=“setcolor”

it dont work this way

now i tried to add a statement right to the color property but it tends to use only the first available value and set it for whole chart not for each individual bar
colors= positive_color if data_point[“y”] >= 0 else negative_color,