Im working with ant-design-chart for react, and I have problem changing any font color in the chart and I havent found any documentation to find all the options I can use for the chart config. I need to change legend and bottom label font colors of the chart that is in the picture. this is my config

{
    "stack": true,
    "legend": {
        "style": {
            "fill": "red"
        },
        "color": {
            "title": true,
            "rowPadding": 10,
            "fill": "red"
        },
        "itemMarginBottom": 60,
        "display": true,
        "padding": [
            10,
            15,
            10,
            15
        ],
        "itemSpacing": 20
    },
    "style": {
        "padding": 10
    },
    "layout": {
        "padding": 20
    },
    "interaction": {
        "tooltip": {
            "shared": true
        }
    },
    "data": [
...
   ],
    "xField": "Date",
    "yField": "Count",
    "colorField": "StackedBy"
}

thank you

I have tried to find it on stack overflow and use AI to help but none of the solutions worked sadly

Im working with ant-design-chart for react, and I have problem changing any font color in the chart and I havent found any documentation to find all the options I can use for the chart config. I need to change legend and bottom label font colors of the chart that is in the picture. this is my config

{
    "stack": true,
    "legend": {
        "style": {
            "fill": "red"
        },
        "color": {
            "title": true,
            "rowPadding": 10,
            "fill": "red"
        },
        "itemMarginBottom": 60,
        "display": true,
        "padding": [
            10,
            15,
            10,
            15
        ],
        "itemSpacing": 20
    },
    "style": {
        "padding": 10
    },
    "layout": {
        "padding": 20
    },
    "interaction": {
        "tooltip": {
            "shared": true
        }
    },
    "data": [
...
   ],
    "xField": "Date",
    "yField": "Count",
    "colorField": "StackedBy"
}

thank you

I have tried to find it on stack overflow and use AI to help but none of the solutions worked sadly

• reactjs
• charts
• antd

1 Answer 1

(Ant Design Chart v2.0.0) You can find the axis label config here, legend config here

const config = {
   legend: {
      color: {
        itemLabelFill: 'red'
      }
    },
    // ...
    axis: {
      x: {
        labelFill: 'red'
      }
    }
}