Issue Fully Customizing Tremors DonutChat and Progress Circle

[abdullah43577]

I incorporated tremor's library in one of my projects and decided to use the DonutChat and Progress Circle, I'm trying to achieve something like the images attache below

and here's what I've achieved using it so far

even if the first image of the second design I posted looked a little similar, it's still not there yet, the documentation didn't allow for modifying some crucial parts of the elements to achieve something closer to those images.

Take for example, the donutchart, I couldn't add my own specific colours, or at least I haven't figured out how to add my own, also I can't increase the strokeWidth of the donutChart to look big just like the first image I sent, this includes the text within the donutChart, I can't also edit the styles of that text.

I'd be glad if anyone could explain how I'm supposed to achieve this using the tremor library.

here's a piece of my code for reference

const customColors: (Color | string)[] = ['#7591F6', '#5E3FBE', '#31C1FF'];

 <DonutChart className="mt-[88px]" data={cities} category="sales" index="name" valueFormatter={valueFormatter} colors={customColors} showAnimation={true} animationDuration={2000} label="48 B" />

[hydrohiester]

As far as I can tell, you have to add those hex colors to your tailwind.config.js as documented here, https://www.tremor.so/docs/getting-started/theming#custom-charts-colors

[severinlandolt]

Hi! In your case, I would switch to our copy-and-paste components: https://tremor.so/docs/visualizations/donut-chart and https://tremor.so/docs/visualizations/progress-circle