How to parse data for horizontal bar chart?

[lucapollani]

Starting from this example: Data structures - parsing
I'm using the same data format of the example but trying to display it into an horizontal bar chart.

This is the code:

const data = [{x: 'Jan', net: 100, cogs: 50, gm: 50}, {x: 'Feb', net: 120, cogs: 55, gm: 75}];
const cfg = {
    type: 'bar',
    data: {
        labels: ['Jan', 'Feb'],
        datasets: [{
            label: 'Net sales',
            data: data,
            parsing: {
                xAxisKey: 'net'
            }
        }, {
            label: 'Cost of goods sold',
            data: data,
            parsing: {
                xAxisKey: 'cogs'
            }
        }, {
            label: 'Gross margin',
            data: data,
            parsing: {
                xAxisKey: 'gm'
            }
        }]
    },
    options: {
		responsive: true,
		maintainAspectRatio: false,
		indexAxis: 'y',
	}
};

Differently from the documentation I've switched yAxisKey to xAxisKey in parsing and then I've set the indexAxis to y in options.

The result is an empty graph, but as far as I see the axis are scaled correctly so I suppose it's not completely wrong.

Here a codesandbox reproducing the behavior: https://codesandbox.io/s/vigilant-lake-3hk50?file=/index.html

Is there something wrong in my code?

[kurkle]

you need to define yAxisKey: 'x' or replace x with y in your data

[lucapollani]

Something like this I guess, I tried but the result doesn't change, can you try yourself or tell me if I'm still doing it wrong please?
Thank you

const data = [
  { x: "Jan", net: 100, cogs: 50, gm: 50 },
  { x: "Feb", net: 120, cogs: 55, gm: 75 }
];
const cfg = {
    type: "bar",
    data: {
      labels: ["Jan", "Feb"],
      datasets: [
        {
          label: "Net sales",
          data: data,
          parsing: {
            xAxisKey: "net",
            yAxisKey: "x"
          }
        },
        {
          label: "Cost of goods sold",
          data: data,
          parsing: {
            xAxisKey: "cogs",
            yAxisKey: "x"
          }
        },
        {
          label: "Gross margin",
          data: data,
          parsing: {
            xAxisKey: "gm",
            yAxisKey: "x"
          }
        }
      ]
    },
    options: {
      responsive: true,
      // maintainAspectRatio: false,
      indexAxis: "y"
    }
  };

[kurkle]

It does work: https://codesandbox.io/s/lucid-wright-8jqk8?file=/index.html
I find codesandbox is very unintuitive when/if it updates or does not update the preview.

[lucapollani]

You're perfectly right, now I see it working!

Another question related to this approach, in this way if labels in cfg.data.labels does not have a match in yAxisKey value they are shown as new data, is this correct or should they map by position instead? I thought yAxisKey should contain only a key now, not directly the descriptions.

Codesandbox: https://codesandbox.io/s/goofy-pond-2zedh?file=/index.html