x axis only showing every second label

[andreweinhorn]

Only every second x-axis label and y-axis label is showing. Is there a way to ensure all x-axis labels are shown (and possibly integer values for y-labels)? I have tried making the font size smaller, but even if I make it tiny it only shows every second label.

Here is my test data:

const DATA = [
  { x: "Jan", y: 2 },
  { x: "Feb", y: 3 },
  { x: "Mar", y: 5 },
  { x: "Apr", y: 4 },
  { x: "May", y: 0 },
  { x: "Jun", y: 0 },
  { x: "Jul", y: 0 },
  { x: "Aug", y: 0 },
  { x: "Sep", y: 0 },
  { x: "Oct", y: 0 },
  { x: "Nov", y: 0 },
  { x: "Dec", y: 0 },
];

Here is my code:

<CartesianChart
  data={DATA}
  xKey="x"
  yKeys={["y"]}
  axisOptions={{ font }}
  domain={{ y: [0, undefined] }}
  domainPadding={{ left: 20, right: 20, top: 30 }}
>
  {({ points, chartBounds }) => (
    //👇 pass a PointsArray to the Bar component, as well as options.
    <Bar
      points={points.y}
      chartBounds={chartBounds}
      color={Colors.brandNavy}
      roundedCorners={{ topLeft: 10, topRight: 10 }}
      barWidth={15}
    />
  )}
</CartesianChart>

[andreweinhorn]

Ok, I think I've managed to answer my own question (for the x-axis anyway). The solution is to set the tickCount and labelRotate values in the xAxis prop of the CartestianChart. Leaving it here in case it helps someone else.

        <CartesianChart
          data={DATA}
          xKey="x"
          yKeys={["y"]}
          axisOptions={{ font }}
          xAxis={{ font, tickCount: 12, labelRotate: 45 }}
          domain={{ y: [0, undefined] }}
          domainPadding={{ left: 20, right: 20, top: 30 }}

        >
          {({ points, chartBounds }) => (
            //👇 pass a PointsArray to the Bar component, as well as options.
            <Bar
              points={points.y}
              chartBounds={chartBounds}
              color={Colors.brandNavy}
              roundedCorners={{ topLeft: 10, topRight: 10 }}
              barWidth={20}
            />
          )}
        </CartesianChart>