How to implement this chart with custom axis component in react-native?

Question

I'd like to implement this chart in react-native app. I already found the several charts, but not sure how to implement the axios label component. Can anyone suggest me?

Answer 1

Victory

Repository : https://github.com/FormidableLabs/victory

Docs & Examples : https://formidable.com/open-source/victory/

I managed to get the visual you wanted. Here is my code :

import React from 'react'
import { VictoryChart, VictoryLine, VictoryAxis } from 'victory-native'

const MyChart = () => {

const lineData = [
        { x: 'Jan 2022', y: 3000 },
        { x: 'Feb 2022', y: 2000 },
        { x: 'Mar 2022', y: 2500 },
        { x: 'Apr 2022', y: 2800 },
        { x: 'May 2022', y: 3200 },
        { x: 'Jun 2022', y: 4000 },
        { x: 'Jul 2022', y: 3000 },
        { x: 'Aug 2022', y: 3400 },
        { x: 'Sep 2022', y: 4250 },
        { x: 'Oct 2022', y: 4100 },
        { x: 'Nov 2022', y: 4450 },
        { x: 'Dec 2022', y: 3940 },
        { x: 'Jan 2023', y: 4100 }
    ]

    const tickData = [
        { month: 1, quarter: 'Q1', year: 2022 },
        { month: 2, year: 2022 },
        { month: 3, year: 2022, displayYear: true },
        { month: 4, year: 2022 },
        { month: 5, quarter: 'Q2', year: 2022 },
        { month: 6, year: 2022 },
        { month: 7, year: 2022, displayYear: true  },
        { month: 8, year: 2022 },
        { month: 9, quarter: 'Q3', year: 2022 },
        { month: 10, year: 2022 },
        { month: 10, year: 2022, displayYear: true  },
        { month: 12, year: 2022 },
        { month: 1, quarter: 'Q1', year: 2023 },
    ]

    const yearData =  tickData.map((data, index) => {
        if (data.displayYear) {
            return {
                year: data.year
            }
        }
    })

      return (
        <VictoryChart domainPadding={10} width={Dimensions.get('window').width}>
            <VictoryAxis
                tickValues={tickData.map((_, index) => index + 1)}
                tickFormat={tickData.map(data => data?.quarter ? `${data.quarter}` : '')}
                style={{
                    axis: {stroke: 'transparent'},
                    axisLabel: {fontSize: 20, padding: 30},
                    grid: {
                        stroke: ({ tick }) => tickData[tick - 1]?.quarter ? '#1a205c' : '#d1d1d1',
                
                        strokeDasharray: '4,5'
                    },
                    tickLabels: {fontSize: 18, padding: 5}
                }}
                domain={{x: [10, 10], y: [0, 1]}}
            />
            <VictoryAxis
                tickValues={yearData.map((_, index) => index + 1)}
                tickFormat={yearData.map(data => data?.year ? `${data.year}` : '')}
                style={{
                    axis: {stroke: 'transparent'},
                    grid: {
                        stroke: ({ tick }) => 'transparent',
                    },
                    tickLabels: {fontSize: 18, padding: 5,}
                }}
            />
            <VictoryLine
                data={lineData}
                style={{
                    data: { stroke: 'black',  }
                }}
                x="x"
                y="y"
            />
        </VictoryChart>
    )
}