How to Achieve Proportional X-Axis Spacing for Non-Uniform Data Points in LineChart?

[Kushalvardhan]

HI, I'm using the react-native-gifted-charts library and working with a LineChart to render a graph with some data points. The x-axis data points are non-uniform, meaning the gaps between consecutive x-axis labels vary (e.g., 10, 11, 18, 22, etc.).

I want the x-axis labels to be proportionately spaced, such that smaller differences (e.g., 10 and 11) appear closer together, while larger differences (e.g., 11 and 18) have wider gaps.

how to achieve this?

[Abhinandan-Kushwaha]

Hi @Kushalvardhan this can be achieved by adding dummy items in the data array like this-

const data = [
{value: 5, label: “10”},
{value: 8, label: “11”},
{},
{},
{},
{},
{},
{},
{value: 12, label: “18”},
];