VictoryAxis and VictoryChart component problems of value

[darkzadrii]

BUG Encountered

For discussions about features or questions about how to use Victory, please start a new discussion rather than opening an issue.

Bug Reports

Checklist

• [ ] I have read through the FAQ and Guides

• [ ] I am using the latest version of Victory

• [ ] I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

When using VictoryAxis or VictoryBar component from the library victory-native, if i have an array like these: const victoryBar = [ {month: "lug", period: "lug2021", value: 0.03}, {month: "ago", period: "ago2021", value: 1}, {month: "set", period: "set2021", value: 1.03}, {month: "ott", period: "ott2021", value: 2}, {month: "nov", period: "nov2021", value: 2.03}, {month: "dic", period: "dic2021", value: 3.03}, {month: "gen", period: "gen2022", value: 4.04}, {month: "feb", period: "feb2022", value: 1.05}, {month: "mar", period: "mar2022", value: 2.01}, {month: "apr", period: "apr2022", value: 1.03}, {month: "mag", period: "mag2022", value: 1.01}, {month: "giu", period: "giu2022", value: 1.01}, {month: "lug", period: "lug2022", value: 0.01}, {month: "ago", period: "ago2022", value: 1}, {month: "set", period: "set2022", value: 2.01}, {month: "ott", period: "ott2022", value: 2.03}, {month: "nov", period: "nov2022", value: 2.03}, {month: "dic", period: "dic2022", value: 2.03}, {month: "gen", period: "gen2023", value: 2.03}, {month: "feb", period: "feb2023", value: 2.03}, {month: "mar", period: "mar2023", value: 2.05}, {month: "apr", period: "apr2023", value: 2.03} ]

or

const victoryAxis = [ {date: "Thu Jul 01 2021 00:00:00 GMT+0200 (Ora legale dell’Europa centrale)", label: "lug"}, {date: "Sun Aug 01 2021 00:00:00 GMT+0200 (Ora legale dell’Europa centrale)", label: "ago"}, {date: "Wed Sep 01 2021 00:00:00 GMT+0200 (Ora legale dell’Europa centrale)", label: "set"}, {date: "Fri Oct 01 2021 00:00:00 GMT+0200 (Ora legale dell’Europa centrale)", label: "ott"}, {date: "Mon Nov 01 2021 00:00:00 GMT+0100 (Ora standard dell’Europa centrale)", label: "nov"}, {date: "Wed Dec 01 2021 00:00:00 GMT+0100 (Ora standard dell’Europa centrale)", label: "dic"}, {date: "Sat Jan 01 2022 00:00:00 GMT+0100 (Ora standard dell’Europa centrale)", label: "gen"}, {date: "Tue Feb 01 2022 00:00:00 GMT+0100 (Ora standard dell’Europa centrale)", label: "feb"}, {date: "Tue Mar 01 2022 00:00:00 GMT+0100 (Ora standard dell’Europa centrale)", label: "mar"}, {date: "Fri Apr 01 2022 00:00:00 GMT+0200 (Ora legale dell’Europa centrale)", label: "apr"}, {date: "Sun May 01 2022 00:00:00 GMT+0200 (Ora legale dell’Europa centrale)", label: "mag"}, {date: "Wed Jun 01 2022 00:00:00 GMT+0200 (Ora legale dell’Europa centrale)", label: "giu"}, {date: "Fri Jul 01 2022 00:00:00 GMT+0200 (Ora legale dell’Europa centrale)", label: "lug"}, {date: "Mon Aug 01 2022 00:00:00 GMT+0200 (Ora legale dell’Europa centrale)", label: "ago"}, {date: "Thu Sep 01 2022 00:00:00 GMT+0200 (Ora legale dell’Europa centrale)", label: "set"}, {date: "Sat Oct 01 2022 00:00:00 GMT+0200 (Ora legale dell’Europa centrale)", label: "ott"}, {date: "Tue Nov 01 2022 00:00:00 GMT+0100 (Ora standard dell’Europa centrale)", label: "nov"}, {date: "Thu Dec 01 2022 00:00:00 GMT+0100 (Ora standard dell’Europa centrale)", label: "dic"}, {date: "Sun Jan 01 2023 00:00:00 GMT+0100 (Ora standard dell’Europa centrale)", label: "gen"}, {date: "Wed Feb 01 2023 00:00:00 GMT+0100 (Ora standard dell’Europa centrale)", label: "feb"}, {date: "Wed Mar 01 2023 00:00:00 GMT+0100 (Ora standard dell’Europa centrale)", label: "mar"}, {date: "Sat Apr 01 2023 00:00:00 GMT+0200 (Ora legale dell’Europa centrale)", label: "apr"} ]

I will only see 11 elements in my chart. Starting from the first element [0] (eg. {month: "lug", period: "lug2021", value: 0.03}) to [10] (eg. {month: "giu", period: "giu2022", value: 1.01}). If i have an array with the same value, it will not count it.

Reproduction

Use VictoryAxis and as props tickValues={victoryAxis.map(({ label }) => label)} or use VictoryBar and as props data={victoryBar.map(({ month, value }) => ({ y: value, x: month }))}

Feature Requests

Checklist

• [ ] I've read through the Docs and Guides to make sure this functionality doesn't already exist

• [ ] I've searched open issues to make sure I'm not opening a duplicate issue

Description

[arnabdotpy]

@darkzadrii did you find any solution on this? Current I'm also facing the same issue.

[arnabdotpy]

Hey, I found a workaround for this. What I did is I mapped the index of the element before the label so that it makes all the labels unique and thus it solves the problem.

<VictoryBar
    data={data.map((item: any, index: number) => ({ ...item, index }))}
    x={(item: any) => `${item?.index}) ${item?.label}`}
    // other props
/>

Here comes another problem:- The x-axis labels become ugly and ofcource it becomes the cause of OCD for a developer xD

But wait, I have a solution for this too ;-;

<VictoryAxis
    tickFormat={(tick) => tick.split(')')[1]}
    // other props
/>

Format your labels so that it ommits the index portion and voila you are left with the original labels.

[github-actions[bot]]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.