How to transform data and configure a stacked bar chart like this (screenshot)

Hey!

I have the following chart in Excel, which I'm trying to replicate in Retool.

How would I go about transforming my data and then using that as the data source for the Retool stacked bar chart?

I've tried assigning different datasets, x/y axis, stacked properties etc, but I can't quite figure out the mapping.

Any help would be much appreciated!

1 Like

Hiya @melloyellow - One way to get close to recreating the visualization in your screenshot would be to get your data into 'long' format (as opposed to 'wide') and used a stacked bar chart. Here's an example:

I do realize you had a horizontal stacked bar chart in your screenshot and mine has a vertical stacked bar chart. In this example, you dont need to dive into the world of Plotly JSON. I do believe you could achieve a horizontal version if you chose to go the Plotly JSON route.

1 Like

Oh nice! Is this utilizing the new Plotly charts?

:wave: Hi @TRF actually, this is not using the new charts.

1 Like

Thinking about this a little more.. you can use a transformer to transform my previous longFormat example and make use of PlotlyJSON like so:

Here's the code for that transformer:

// Get list of languages
const languages = _.uniq({{  longFormat.data}}.map((x) => x.language));

// For each language, create an object with that language's values for each template
return languages.map((language) => {
  const longRowsForLangauge = {{  longFormat.data}}.filter(
    (f) => f.language === language
  );

  console.log({ longRowsForLangauge });
  return {
    x: longRowsForLangauge.map((i) => i.value),
    y: longRowsForLangauge.map((i) => i.template),
    name: language,
    orientation: "h",
    type: "bar",
  };
});

Thanks @Mark_S , works perfectly!

1 Like