Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How can I format YAxis Label

See original GitHub issue

Could I show 1000 as $ 1K in yAxis. Thanks

Issue Analytics

State:
Created 2 years ago
Comments:9 (6 by maintainers)

Top GitHub Comments

1reaction

TuyenNguyenVancommented, Oct 8, 2021

Nice. Thank @Abhinandan-Kushwaha for quick support. Do you have a plan to do a combined chart? Maybe in next, I need show a line chart in bar chart. Anyway, give you a start

1reaction

Abhinandan-Kushwahacommented, Oct 7, 2021

Hi TuyenNguyenVan 👋 I have added the feature to add custom Y-axis text using the prop yAxisLabelText

This feature is available in version 0.1.7 🎉

Here’s an example -


import { BarChart } from "react-native-gifted-charts";
        
const App = () => {
    const barData = [
        {value: 250, label: 'M', yAxisLabelText: '$250'},
        {value: 500, label: 'T', frontColor: '#177AD5', yAxisLabelText: '$500'},
        {value: 745, label: 'W', frontColor: '#177AD5', yAxisLabelText: '$745'},
        {value: 320, label: 'T', yAxisLabelText: '$320'},
        {value: 600, label: 'F', frontColor: '#177AD5', yAxisLabelText: '$600'},
        {value: 256, label: 'S', yAxisLabelText: '$256'},
        {value: 300, label: 'S', yAxisLabelText: '$300'},
    ];
    return (
        <View>
            <BarChart
                barWidth={22}
                noOfSections={3}
                barBorderRadius={4}
                frontColor="lightgray"
                data={barData}
                yAxisThickness={0}
                xAxisThickness={0}
            />
        </View>
    );
};

Hope it helps. Closing the issue.