Change color of title in patternfly donut chart

332 Views Asked by At

I want to change the color of title in patternfly donut chart. It currently looks like this

enter image description here

How do I add the style property to ChartDonutUtilization component? I tried to add the style property to the component this way

<ChartDonutUtilization
  ariaDesc="User progress"
  ariaTitle="User progress"
  constrainToVisibleArea={true}
  data={{ x: 'Completed', y: 75 }}
  labels={({ datum }) =>
    datum.x ? `${datum.x}: ${datum.y}%` : null
  }
  subTitle="in progress"
  title="75%"
  style={title: {color: "#fff"}}
/>

but I'm getting parsing error on this.

1

There are 1 best solutions below

3
JsWizard On

Try this,

<ChartDonutUtilization
  ariaDesc="User progress"
  ariaTitle="User progress"
  constrainToVisibleArea={true}
  data={{ x: 'Completed', y: 75 }}
  labels={({ datum }) =>
    datum.x ? `${datum.x}: ${datum.y}%` : null
  }
  subTitle="in progress"
  title="75%"
  style={subTitle: {color: "#fff"}}
/>

and check style props in this Doc

Good luck :)