Change color of title in patternfly donut chart

Question

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

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.

score 0 · Answer 1 · answered Jul 01 '21 at 18:15

0

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 :)

answered Jul 01 '21 at 18:15

JsWizard

1,663
3
21
48

how is this any different from what I have posted already? – Shamim Fahad Jul 02 '21 at 11:45
replaced style={title ...} to style={subTitle ...} , have to use target props name as `subTitle` from `title` . Is this working? – JsWizard Jul 02 '21 at 13:15
no it's not; style isn't taking attributes like this, that's why i'm getting parsing error – Shamim Fahad Jul 03 '21 at 14:42

Change color of title in patternfly donut chart

1 Answers1