diff --git a/src/BarChart.tsx b/src/BarChart.tsx index 9af3a8b7..729b9223 100644 --- a/src/BarChart.tsx +++ b/src/BarChart.tsx @@ -130,7 +130,7 @@ class BarChart extends AbstractChart { y={((baseHeight - barHeight) / 4) * 3 + paddingTop} width={barWidth} height={2} - fill={this.props.chartConfig.color(0.6)} + fill={this.props.chartConfig.color(0.6, i)} /> ); }); @@ -205,7 +205,7 @@ class BarChart extends AbstractChart { } y={((baseHeight - barHeight) / 4) * 3 + paddingTop - 1} - fill={this.props.chartConfig.color(0.6)} + fill={this.props.chartConfig.color(0.6, i)} fontSize="12" textAnchor="middle" > diff --git a/src/HelperTypes.ts b/src/HelperTypes.ts index 0d5dde32..f973c036 100644 --- a/src/HelperTypes.ts +++ b/src/HelperTypes.ts @@ -6,7 +6,7 @@ export interface Dataset { data: number[]; /** A function returning the color of the stroke given an input opacity value. */ - color?: (opacity: number) => string; + color?: (opacity: number, index: number) => string; /** A function returning array of the colors of the stroke given an input opacity value for each data value. */ colors?: Array<(opacity: number) => string>; @@ -90,7 +90,7 @@ export interface ChartConfig { /** * Defines the base color function that is used to calculate colors of labels and sectors used in a chart */ - color?: (opacity: number, index?: number) => string; + color?: (opacity: number, index: number) => string; /** * Defines the function that is used to calculate the color of the labels used in a chart. */ diff --git a/src/line-chart/LineChart.tsx b/src/line-chart/LineChart.tsx index 895e911a..da3ebcb5 100644 --- a/src/line-chart/LineChart.tsx +++ b/src/line-chart/LineChart.tsx @@ -227,8 +227,8 @@ class LineChart extends AbstractChart { scrollableDotHorizontalOffset: new Animated.Value(0) }; - getColor = (dataset: Dataset, opacity: number) => { - return (dataset.color || this.props.chartConfig.color)(opacity); + getColor = (dataset: Dataset, opacity: number, index: number) => { + return (dataset.color || this.props.chartConfig.color)(opacity, index); }; getStrokeWidth = (dataset: Dataset) => { @@ -316,7 +316,7 @@ class LineChart extends AbstractChart { fill={ typeof getDotColor === "function" ? getDotColor(x, i) - : this.getColor(dataset, 0.9) + : this.getColor(dataset, 0.9, i) } onPress={onPress} {...this.getPropsForDots(x, i)} @@ -637,7 +637,7 @@ class LineChart extends AbstractChart { strokeLinejoin={linejoinType} points={points.join(" ")} fill="none" - stroke={this.getColor(dataset, 0.2)} + stroke={this.getColor(dataset, 0.2, index)} strokeWidth={this.getStrokeWidth(dataset)} strokeDasharray={dataset.strokeDashArray} strokeDashoffset={dataset.strokeDashOffset} @@ -725,7 +725,7 @@ class LineChart extends AbstractChart { key={index} d={result} fill="none" - stroke={this.getColor(dataset, 0.2)} + stroke={this.getColor(dataset, 0.2, index)} strokeWidth={this.getStrokeWidth(dataset)} strokeDasharray={dataset.strokeDashArray} strokeDashoffset={dataset.strokeDashOffset} @@ -782,7 +782,7 @@ class LineChart extends AbstractChart {