javascript - Customizing Colors of React Native Chart Kit - Stack Overflow

admin管理员组

文章数量:1289586

A basic line/area chart has been created for a React Native app using the react-native-chart-kit package, as shown using the code below.

Question: How can we change independently the style/color of the ponents of the plots? Such as the dots, line stroke, area, axis, tick labels etc...

When the color parameters in chartConfig is changed, it appears to affect almost the entire chart, including the axis tick labels, gridline, area under line plot.

Is it possible to define the color for each individual property of the chart?

Code:

import { LineChart } from 'react-native-chart-kit';
import { Dimensions} from 'react-native';
const screenWidth = Dimensions.get('window').width

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})`,
    strokeWidth: 2 // optional
}]
}

const chartConfig = {
backgroundGradientFrom: '#fff',
backgroundGradientTo: '#fff',
color: (opacity = 1) => `rgba(63, 143, 244, ${opacity})`,
strokeWidth: 2 // optional, default 3
}

class Test extends Component {
    render() {
        return (
            <LineChart 
                data={data}
                width={screenWidth}
                height={400}
                chartConfig={chartConfig}
            />
        )
    }
}

A basic line/area chart has been created for a React Native app using the react-native-chart-kit package, as shown using the code below.

Question: How can we change independently the style/color of the ponents of the plots? Such as the dots, line stroke, area, axis, tick labels etc...

When the color parameters in chartConfig is changed, it appears to affect almost the entire chart, including the axis tick labels, gridline, area under line plot.

Is it possible to define the color for each individual property of the chart?

Code:

import { LineChart } from 'react-native-chart-kit';
import { Dimensions} from 'react-native';
const screenWidth = Dimensions.get('window').width

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})`,
    strokeWidth: 2 // optional
}]
}

const chartConfig = {
backgroundGradientFrom: '#fff',
backgroundGradientTo: '#fff',
color: (opacity = 1) => `rgba(63, 143, 244, ${opacity})`,
strokeWidth: 2 // optional, default 3
}

class Test extends Component {
    render() {
        return (
            <LineChart 
                data={data}
                width={screenWidth}
                height={400}
                chartConfig={chartConfig}
            />
        )
    }
}

• javascript
• reactjs
• react-native
• charts
• react-native-chart-kit

Share Improve this question Follow asked Jul 16, 2019 at 17:31 NyxynyxNyxynyx 63.7k163163 gold badges507507 silver badges856856 bronze badges 2

• Did you ever find out if it was possible to style individual dots? – per_jansson Commented Apr 9, 2020 at 18:19
• 1 @per_jansson Not yet! – Nyxynyx Commented Apr 9, 2020 at 18:20

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Here is the code that I am using to create a chart. See the 'propsForDots' section to style the data points.

I know that's only part of what you were asking for help customizing, but this is a start.

<LineChart
  data={{
      labels: labelArray,
      datasets: [
          {
              data: valueArray
          }
      ]
  }}
  width={Dimensions.get("window").width} // from react-native
  height={220}
  yAxisInterval={1} // optional, defaults to 1
  chartConfig={{
  backgroundColor: "#444",
  backgroundGradientFrom: '#444',
  backgroundGradientTo: '#444',
  decimalPlaces: 2, // optional, defaults to 2dp
  color: (opacity = 1) => `rgba(0, 110, 199, ${opacity})`,
  labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
  style: {
      borderRadius: 16
  },
  propsForDots: {
      r: "6",
      strokeWidth: "2",
      stroke: "#fff"
  }
  }}
  bezier
  style={{
      marginVertical: 8,
      borderRadius: 16
  }}
/>

In the props for dots, r is the radius of the dot, stroke width is the border size, and stroke is the color of the border.

I'm still experimenting with this library as well, which is why I came across this question. Hopefully this helps you out and others who may be searching for some of the same things.

For dot color we can use getDotColor props, with this we can edit the each dot and define a color for each dot

getDotColor Defines the dot color function that is used to calculate colors of dots in a line chart and takes (dataPoint, dataPointIndex)

getDotColor={(dataPoint, dataPointIndex) => {
console.log('dataPoint ---->', dataPoint);
console.log('dataPointIndex --->', dataPointIndex);
//based on condition we return the color as string
if (dataPointIndex === 0) return 'red';
}}

To change the colour of the area under the line, set useShadowColorFromDataset as true.

chartConfig={{

    useShadowColorFromDataset: true, //Default is false

}}

本文标签： javascriptCustomizing Colors of React Native Chart KitStack Overflow