React Native Chart Kit - BarChart color fading out of each bar from top to bottom

user_11289920 0
Viewed 1218

I am using react native chart kit yarn add react-native-chart-kit to visualize data and this is my code:

import React from "react";
import { View, Text, Dimensions } from "react-native";
import RandomColor from "randomcolor";
import {
  LineChart,
  BarChart,
  PieChart,
  ProgressChart,
  ContributionGraph,
  StackedBarChart,
} from "react-native-chart-kit";

const Chart = ({ classList }) => {
  return (
    <View>
      <Text>Bezier Line Chart</Text>
      <BarChart
        data={{
          labels: classList.map((classItem) => {
            return classItem.classname;
          }),
          datasets: [
            {
              data: classList.map((classItem) => {
                return classItem.studentList.length;
              }),
            },
          ],
        }}
        width={Dimensions.get("window").width} 
        height={220}
        yAxisInterval={1} 
        chartConfig={{
          backgroundColor: "#ffffff",
          backgroundGradientFrom: "#ffffff",
          backgroundGradientTo: "#ffffff",
          decimalPlaces: 2, 
          color: () => "blue",
          labelColor: () => "black",
          style: {
            borderRadius: 16,
          },
          propsForDots: {
            r: "6",
            strokeWidth: "1",
            stroke: "#ffa726",
          },
        }}
        bezier
        style={{
          marginVertical: 8,
          borderRadius: 16,
        }}
      />
    </View>
  );
};

export default Chart;

and this is how it returned:

screen shot

As you can see, it worked, but not perfectly. The color at the end of each bar gradually fades out from top to bottom and it is not good with the white backgroundColor. So, I want to make the color of each bar solid. Is there any way to fix it?

react-native reactjs frontend mobile javascript
2 Answers

use flatColor={true} & withCustomBarColorFromData={true}

like this

 const data = {
        labels: ["label1", "label2", "label3"],
        datasets: [{
                data: [50, 45, 28],
                colors: [
                    () => "blue"
                ]}]
 };
<BarChart
                
     data={data}
     width={Dimensions.get("window").width - 20}
     height={220}
     chartConfig={{
       //....
     }}
     withCustomBarColorFromData={true}
     flatColor={true}
  />
user_182087420

After using above answer flatColor={true} & withCustomBarColorFromData={true}

if you want color as dynamic in dataset use below code:

 const data = {
        labels: ["label1", "label2", "label3"],
        datasets: [
                  {
                     data: [50, 45, 28],
                    colors: data.colorName.map(item => {
                      return () => item.color;
                    }),
                  },
                ],
 };
user_78135830
Related