diff --git a/src/ProgressChart.tsx b/src/ProgressChart.tsx index ed512830..d1b94e57 100644 --- a/src/ProgressChart.tsx +++ b/src/ProgressChart.tsx @@ -10,7 +10,7 @@ import AbstractChart, { export type ProgressChartData = | Array - | { labels?: Array; data: Array }; + | { labels?: Array; colors?: Array; data: Array }; export interface ProgressChartProps extends AbstractChartProps { data: ProgressChartData; @@ -27,6 +27,7 @@ export interface ProgressChartProps extends AbstractChartProps { hideLegend?: boolean; strokeWidth?: number; radius?: number; + withCustomBarColorFromData?: boolean; } type ProgressChartState = {}; @@ -94,6 +95,9 @@ class ProgressChart extends AbstractChart< const withLabel = (i: number) => (data as any).labels && (data as any).labels[i]; + const withColor = (i: number) => + (data as any).colors && (data as any).colors[i]; + const legend = !hideLegend && ( <> @@ -170,7 +174,10 @@ class ProgressChart extends AbstractChart< ry={borderRadius} fill="url(#backgroundGradient)" /> - + {pieBackgrounds.map((pie, i) => { return ( @@ -192,10 +199,14 @@ class ProgressChart extends AbstractChart< strokeLinejoin="round" d={pie.curves[0].sector.path.print()} strokeWidth={strokeWidth} - stroke={this.props.chartConfig.color( - (i / pies.length) * 0.5 + 0.5, - i - )} + stroke={ + this.props.withCustomBarColorFromData + ? withColor(i) + : this.props.chartConfig.color( + (i / pies.length) * 0.5 + 0.5, + i + ) + } /> ); })}