Question on how to format tick range

[dapeng0318]

I couldn't find any related reading on the documentation.

This is what i currently get on my display:

What I need:
How can I format the X axis ticks to be only Jan, Feb... such that between ticks the range would be starting from every 1st of the month?

Here's a sample of my dataset:

[{
"cases": 0,
"date": "2024-01-01T23:04:00"
},
{
"cases": 5,
"date": "2024-01-02T23:04:00"
},
{
"cases": 5,
"date": "2024-01-03T23:04:00"
},
{
"cases": 5,
"date": "2024-01-04T23:04:00"
},
{
"cases": 5,
"date": "2024-01-05T23:04:00"
},
{
"cases": 5,
"date": "2024-01-06T23:04:00"
},
{
"cases": 5,
"date": "2024-01-07T23:04:00"
},
{
"cases": 7,
"date": "2024-01-08T23:04:00"
},
{
"cases": 7,
"date": "2024-01-09T23:04:00"
},
{
"cases": 7,
"date": "2024-01-10T23:04:00"
},
{
"cases": 7,
"date": "2024-01-11T23:04:00"
},
{
"cases": 7,
"date": "2024-01-12T23:04:00"
},
{
"cases": 7,
"date": "2024-01-13T23:04:00"
},
{
"cases": 7,
"date": "2024-01-14T23:04:00"
},
{
"cases": 7,
"date": "2024-01-15T23:04:00"
},
{
"cases": 15,
"date": "2024-01-16T23:04:00"
},
{
"cases": 15,
"date": "2024-01-17T23:04:00"
},
{
"cases": 15,
"date": "2024-01-18T23:04:00"
},
{
"cases": 15,
"date": "2024-01-19T23:04:00"
},
{
"cases": 15,
"date": "2024-01-20T23:04:00"
},
{
"cases": 15,
"date": "2024-01-21T23:04:00"
},
{
"cases": 15,
"date": "2024-01-22T23:04:00"
},
{
"cases": 22,
"date": "2024-01-23T23:04:00"
},
{
"cases": 22,
"date": "2024-01-24T23:04:00"
},
{
"cases": 22,
"date": "2024-01-25T23:04:00"
},
{
"cases": 22,
"date": "2024-01-26T23:04:00"
},
{
"cases": 22,
"date": "2024-01-27T23:04:00"
},
{
"cases": 22,
"date": "2024-01-28T23:04:00"
},
{
"cases": 22,
"date": "2024-01-29T23:04:00"
},
{
"cases": 22,
"date": "2024-01-30T23:04:00"
},
{
"cases": 30,
"date": "2024-01-31T23:04:00"
},
{
"cases": 30,
"date": "2024-02-01T23:04:00"
},
{
"cases": 30,
"date": "2024-02-02T23:04:00"
},
{
"cases": 30,
"date": "2024-02-03T23:04:00"
},
{
"cases": 30,
"date": "2024-02-04T23:04:00"
},
{
"cases": 30,
"date": "2024-02-05T23:04:00"
},
{
"cases": 36,
"date": "2024-02-06T23:04:00"
},
{
"cases": 36,
"date": "2024-02-07T23:04:00"
},
{
"cases": 36,
"date": "2024-02-08T23:04:00"
},
{
"cases": 36,
"date": "2024-02-09T23:04:00"
},
{
"cases": 36,
"date": "2024-02-10T23:04:00"
},
{
"cases": 36,
"date": "2024-02-11T23:04:00"
},
{
"cases": 36,
"date": "2024-02-12T23:04:00"
},
{
"cases": 36,
"date": "2024-02-13T23:04:00"
},
{
"cases": 36,
"date": "2024-02-14T23:04:00"
},
{
"cases": 36,
"date": "2024-02-15T23:04:00"
},
{
"cases": 36,
"date": "2024-02-16T23:04:00"
},
{
"cases": 36,
"date": "2024-02-17T23:04:00"
},
{
"cases": 40,
"date": "2024-02-18T23:04:00"
},
{
"cases": 40,
"date": "2024-02-19T23:04:00"
},
{
"cases": 40,
"date": "2024-02-20T23:04:00"
},
{
"cases": 40,
"date": "2024-02-21T23:04:00"
},
{
"cases": 40,
"date": "2024-02-22T23:04:00"
},
{
"cases": 40,
"date": "2024-02-23T23:04:00"
},
{
"cases": 47,
"date": "2024-02-24T23:04:00"
},
{
"cases": 47,
"date": "2024-02-25T23:04:00"
},
{
"cases": 47,
"date": "2024-02-26T23:04:00"
},
{
"cases": 47,
"date": "2024-02-27T23:04:00"
},
{
"cases": 47,
"date": "2024-02-28T23:04:00"
}]

Here's my chart implementation:

`const DATA: { x: string; y: number }[] = filteredData.map((item: { date: any; cases: any; }) => ({
    x: moment(item.date).format('DD/MM'),
    y: item.cases
  }));

<CartesianChart
        // padding={{ left: 20 }}
        data={DATA}
        xKey='x'
        yKeys={["y"]}
        axisOptions={{
          font,
          tickCount: 12
        }}            
        chartPressState={state}
      >
        {({ points }) => (
          <>
            <Line points={points.y} color="red" strokeWidth={3} />
          </>
        )}
      </CartesianChart>`

[zibs]

@dapeng0318 Can you not just adjust your moment function x: moment(item.date).format('DD/MM'), to be more like moment(item.date).format("MMM") etc?

Let me know if I'm missing something.

Or you could make use of https://commerce.nearform.com/open-source/victory-native/cartesian/cartesian-chart#axisoptions the formatXLabel option too.

[dapeng0318]

Its not about the literal wording, but rather the display, There should only be one Jan, one Feb etc instead of repetitive as such @zibs

1.mp4

What I have also tried is: populate with 365 days of full year data and set tickCount to 12,

The Result:

2.mp4

[DanielChomat]

This is something I also struggled with. You can try the prop renderOutside, that gets all necessary props (along with xScale, yScale) and then render them using Text from react-native-skia.

Then create some logic to show your labels in the appropriate way. I have not tested this in your use case, just something to try.

[zibs]

Okay, I think I understand a bit more. I don't think there is an easy way to get exactly what you want in this case, but you may be able to massage your data in some way so that the axes show up as you want.

For example, if you have 12 data points for Jan, 3 for Feb, 2 for March etc. you could transform your data so that all the months have 12 data points (some may be redundant/the same values etc.), but having equal lengths might help with the axis spacing/labelling and then you can still explore using tickCount/not. Not ideal, sorry! If you have a better idea, feel free to make a PR!

[dapeng0318]

@zibs thats the concern, i created a set of mock data for 365 days and it still doesnt distribute accurately by month

[dapeng0318]

@zibs lets put it this way, where is the part where i get to set what are the range between x-axis dates? ill try to do a PR contribution for this

in this sample, you can see that the dates are by 10 days increment, how can i change it to increment by 15 or 30 days etc?