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.
// 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",
};
});