LineSeries ordinal

[royderksroute42]

Hi there,

I've been trying for a (long) while but i can't figure out how to make an ordinal LineSeries - chart with String 'x' values. It seems to be unable to determine where its ticks should be; even when using numbers fo the 'x' value. Playing around with the numTicks properties and such all result in the same. Is this package capable of rendering a LineSeries?

data

[
        { x: 'car', y: 1 },
        { x: 'plane', y: 2 },
        { x: 'new york', y: 3 },
        { x: 'ocean', y: 4 },
        { x: 'pencil', y: 5 },
      ]

<XYChart
    height={height}
    width={width}
    xScale={{ type: 'ordinal' }}
    yScale={{ type: 'linear' }}
  >
    <LineSeries
      data={[
        { x: 'car', y: 1 },
        { x: 'plane', y: 2 },
        { x: 'new york', y: 3 },
        { x: 'ocean', y: 4 },
        { x: 'pencil', y: 5 },
      ]}
    />
    <XAxis />
    <YAxis />
  </XYChart>

[williaster]

Hey @royderksroute42 thanks for checking out @data-ui!

I think that you're right that something is up with the ordinal type scale, so I'll mark this as a bug to make sure that it gets resolved.

BUT you can work around this for now with a band scale and setting paddingInner = 1:

xScale={{ type: 'band', paddingInner: 1 }}

Here's a codesandbox to check out/play with, I hope that helps for the time being until I get a chance to fix it! (have been slammed at work recently but will try to get this fixed asap)

[royderksroute42]

Thank you for the quick reply, it seems the workaround is working as it should; the codesandbox was very useful and helped a lot. Cheers!

[williaster]

FYI this is due to ordinal type scales requiring full explicit domains for each value, which XYChart does not currently handle (it will set a 2-element min/max). Working on a fix to not require users to pass this in explicitly.