Background Color Issue in LineChart

[Verex]

I'm going to keep this brief and just include the important details.

I added this chart kit to my react native project and began to test it out. I needed a line chart so I naturally used the "LineChart." However, I ran into a few issues.

First

I can't seem to change the background color for the life of me. The gradient color works perfectly fine, but "backgroundColor" in the chartConfig, style, or chartConfig style, does not have any effect. If no gradient background is specified then the background is just black.

Second

Transparent backgrounds of any sort (I could only change the background through gradient) does not work, and also results in black background. I tried 'transparent' and 'rgba' yet neither of those work.

Component

import React from 'react';
import {
    Dimensions,
    StyleSheet,
    Text,
    View
} from 'react-native';

import { LineChart } from 'react-native-chart-kit';

const styles = StyleSheet.create({
    outerContainer: {
        elevation: 4,
        backgroundColor: '#fff',
        borderRadius: 10,
        marginTop: 25
    },
});
const chartConfig = {
    backgroundColor: '#e26a00',
    color: (opacity = 1) => `#2699FB`,
    strokeWidth: 2,
}

const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [{
        data: [20, 45, 28, 80, 99, 43],
        color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`, // optional
        strokeWidth: 2 // optional
    }]
}
export default class TideChart extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.outerContainer}>
                <View>
                    <LineChart
                        data={data}
                        height={220}
                        width={Dimensions.get('window').width - 20}
                        chartConfig={chartConfig}
                        style={{ marginBottom: 25, marginTop: 25 }}
                        bezier
                    />
                </View>
            </View>
        );
    }
}

Most of this is "right out of the box" but I tried a few things to try and fix. I wrapped it in a view and tried to get something to change.

I'm hoping this is just an error on my part.

[MuhammadHanzala]

same issue + 1

[Hermanya]

what if you set backgroundGradientFrom and backgroundGradientTo to the same color? would that work the same way as backgroundColor? What if you set both of them to be transparent?

[MuhammadHanzala]

what if you set backgroundGradientFrom and backgroundGradientTo to the same color? would that work the same way as backgroundColor? What if you set both of them to be transparent?

I tried but it shows black background then :(

[sghaleb1]

+1

[bhanubblab]

same here

[brendan1809]

set your backgroundGradientFromOpacity: 0
the background will turn transparent

[brendan1809]

For me backgroundColor is not working instead backgroundGradientFrom works like backGroundColor function

[sinafbd]

for me after i upgrade the library to 5.4.0 the gradient disappeared and backgroundGradientFrom works like backgroundColor

[laszland]

The same issue here with a transparent background. 😠

[Dastan4r]

backgroundGradientFromOpacity: 0,
backgroundGradientToOpacity: 0,

this works works me, i think if chart have FROM options that minds he have TO options))

[urvish91]

backgroundGradientFromOpacity: 0,
backgroundGradientToOpacity: 0,

this works works me, i think if chart have FROM options that minds he have TO options))

Yes but at that time sometime label colors coming black and sometime white. even I gave labelColor as white. Please help me.

[maheshContco]

how to achieve black color for lines?

[nancy-sun]

Problem still occurs on web as of October 2022, tried:

backgroundGradientFromOpacity: 0,
backgroundGradientToOpacity: 0,

But not working.

Manually changing the fill and fill-opacity on <rect> in console works. Any ideas?

It's working with expo tho.