3

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?

Ahmet Emre Kilinc
  • 5,489
  • 12
  • 30
  • 42
Tam Do
  • 181
  • 4
  • 15
  • Does this answer your question? [Solid bars in bar chart with react-native-chart-kit](https://stackoverflow.com/questions/64035350/solid-bars-in-bar-chart-with-react-native-chart-kit) – 5eb Nov 23 '20 at 18:41
  • thank you so much but i switch to learn Flutter instead of RN, thank you anyway – Tam Do Nov 24 '20 at 11:40

2 Answers2

1

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}
  />
user18208742
  • 11
  • 3
0

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;
                    }),
                  },
                ],
 };
Ajay Kumar Prasad
  • 41
  • 1
  • 7