Я хочу отредактировать стиль моей диаграммы следующим образом:
Но я пришел к такому выводу:
Единственное, чего мне бы не хватило, это сделать линию немного резче и не выглядеть непрозрачной и убрать заливку с графика, чтобы осталась только линия.
Это мой код:
import React from 'react';
import { ScrollView, Dimensions, View, Text } from 'react-native';
import {
LineChart,
BarChart,
PieChart,
ProgressChart,
ContributionGraph,
StackedBarChart
} from "react-native-chart-kit";
import Styles from './Styles';
export default function Charts(){
const chartConfig = {
backgroundGradientFromOpacity: 0,
backgroundGradientToOpacity: 0,
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
strokeWidth: 3,
barPercentage: 0.5,
useShadowColorFromDataset: false,
propsForBackgroundLines: {
strokeDasharray: "",
strokeOpacity: 0.0
},
};
return (
<View>
<ScrollView>
<View style = {[Styles.chart.card]}>
<LineChart data = {{
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
data: [
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100
]
}
]
}}
width = {Dimensions.get("window").width}
height = {300}
yAxisLabel = {undefined}
yAxisInterval = {undefined}
chartConfig = {chartConfig}
withHorizontalLabels = {false}
bezier
hidePointsAtIndex = {[0, 1, 2, 3, 4, 5]}
style = {{
}}/>
</View>
</ScrollView>
</View>
);
}
Я использую React Native с Expo и библиотеку React-Native-Chart-Kit.
Кроме того, если есть какая-либо другая библиотека, которая позволяет гораздо лучше настраивать диаграммы.
Спасибо за вашу помощь.
Я нашел решение, настроил конфигурацию диаграммы следующим образом:
const chartConfig = {
backgroundGradientFromOpacity: 0,
backgroundGradientToOpacity: 0,
color: () => `rgba(255, 255, 255, 1)`, /* Avoid opacity */
strokeWidth: 3,
barPercentage: 0.5,
useShadowColorFromDataset: false,
propsForBackgroundLines: {
strokeDasharray: "",
strokeOpacity: 0.0
},
/* Adjusts the fill of the chart */
fillShadowGradient: 'transparent',
fillShadowGradientOpacity: 0,
fillShadowGradientFromOffset: 0,
fillShadowGradientTo: 'transparent',
fillShadowGradientToOpacity: 0,
};
Результат: