Help in adding axes (shows grid lines but not axes)

[KDLPro]

Question

Right now, I'm trying to add axes in my graph but I have problems rendering the axes labels. The grid is already rendered though.

Background Info/Attempts

Relevant code snippet:

import { View, Text, SafeAreaView, ScrollView, Dimensions } from 'react-native'
import { useEffect, useState } from "react"
import { CartesianChart, Line } from "victory-native"
import { useFont } from "@shopify/react-native-skia"

import { colors } from "../../../constants"

export default function Database() {
    // Load fonts
    const Satoshi = useFont("../../../assets/fonts/Satoshi-Regular.otf", 15)

    // Database update variables
    const [lastDatabaseUpdate, setLastDatabaseUpdate] = useState(null);

    // Data for rendering charts
    const [scannedDailyData, setScannedDailyData] = useState([]);

    // Get data to display the number of abaca fibers scanned daily
    useEffect(() => {
        try {
            const dataArr = fibersScanned_db.map((element)=> ({
                created_at: moment(element.created_at).format("MMM DD"),
                number_of_fibers: element.number_of_fibers
            }));

            setScannedDailyData(dataArr);
        } catch (error){
            console.error("Error fetching data.");
        }
    }, [fibersScanned_db])

    return (
        <SafeAreaView className="bg-primary dark:bg-dark_primary-default h-full">
            <ScrollView>
                <View className="mt-4 mb-2 mx-2 px-2 py-3 ">
                    <View className="h-60">
                        <CartesianChart 
                            data={scannedDailyData} 
                            xKey="created_at"
                            yKeys={["number_of_fibers"]}
                            axisOptions={{Satoshi, labelOffset:20}}
                        >
                            {({points}) => (
                                <Line points={points.number_of_fibers} color={colors.brown[500]} strokeWidth={3} />
                            )}
                        </CartesianChart> 
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    )
}

Sample data:

[{"created_at": "Jul 22", "number_of_fibers": 85}, {"created_at": "Jul 21", "number_of_fibers": 117}]

Relevant snapshot of result:

Your help is very much appreciated since I'm new to this and I must admit, I'm cramming for my thesis.

[zibs]

It looks like your axisOptions is incorrectly configured --

You'll want something more like this:

axisOptions={{
  font: Satoshi,
}}

That should enable the axis to be drawn -- from there you can add more options, feel free to check out the documentation!

[KDLPro]

Hello man! Thanks for the response @zibs! I tried your fix and sadly it didn't work :(

It looks like your axisOptions is incorrectly configured --

You'll want something more like this:

axisOptions={{
  font: Satoshi,
}}

That should enable the axis to be drawn -- from there you can add more options, feel free to check out the documentation!

[zibs]

If you can provide a more reproducible example -- a repo or something I can truly just copy paste I'm happy to take a look!

[KDLPro]

Sure thing, much appreciated. Will push a commit rn @zibs and send it to you

[KDLPro]

I invited you to my repository @zibs: https://github.com/KDLPro/Abaca-Fiber-Monitoring-Mobile-App

[KDLPro]

By the way, the issue is in app/(auth)/(main_app)/tabs/database.jsx.

On Fri, 16 Aug 2024, 11:03 pm Eli Zibin, @.***> wrote:

If you can provide a more reproducible example -- a repo or something I can truly just copy paste I'm happy to take a look!

— Reply to this email directly, view it on GitHub https://github.com/FormidableLabs/victory-native-xl/issues/335#issuecomment-2293676158, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJGQQBXTVAA6PAC2FYXWSUDZRYICRAVCNFSM6AAAAABMSSERHOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJTGY3TMMJVHA . You are receiving this because you authored the thread.Message ID: @.***>

[zibs]

Looks okay if I do this:

<View className="h-60">
                        {scannedDailyData &&
                            <CartesianChart 
                                data={scannedDailyData} 
                                xKey="created_at"
                                yKeys={["number_of_fibers"]}
                                axisOptions={{font: Satoshi, labelOffset: 20}}
                            >
                                {({points}) => (
                                    <Line points={points.number_of_fibers} color={colors.brown[300]} strokeWidth={3} />
                                )}
                            </CartesianChart>
                        }
                    </View>

[KDLPro]

Oooh I'll try to test it later, thank you!

[KDLPro]

But why do you think the other values are undefined?

[KDLPro]

Also, does this mean that I do need a minimum of three points to remove the undefined thing? Or do I need to order the dates properly?

On Sat, 17 Aug 2024, 4:16 am Eli Zibin, @.***> wrote:

Looks okay if I do this:

{scannedDailyData && {({points}) => ( )} }

Screenshot.2024-08-16.at.1.15.41.PM.png (view on web) https://github.com/user-attachments/assets/ca70e7a2-8630-4aa6-85c6-41b2d6485673

— Reply to this email directly, view it on GitHub https://github.com/FormidableLabs/victory-native-xl/issues/335#issuecomment-2294172013, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJGQQBTMVXHNXV37EL6HCLTZRZM25AVCNFSM6AAAAABMSSERHOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJUGE3TEMBRGM . You are receiving this because you authored the thread.Message ID: @.***>