The chart component (stack) stacks my 4 values in one bar instead of two

[mbraunperu]

I want the chart component (stack) to show two values in one bar, and two other values in another bar (next to the first bar). But it takes the four values and stacks them in one bar. In other words, I have the values in item 1, item 2, item 3 and item 4. How can I indicate for example that item 1 and 2 be shown in the first bar, and item 3 and 4 be shown in the second bar?

[ThinhDinh]

I don’t think there’s an easy way to do that.

I assume your current structure looks like this.

It has to look somewhat like this to be able to “stack”.

But then, I feel like it doesn’t represent a good structure for you anymore. You might want to look into Quickchart to be able to customize charts better.

Quickchart.io: the Cloudinary of Charts —on the fly charts!

GAME CHANGER! Stumbled upon this site today—a way to create on the fly charts using data from your Glide tables. Images render instantly and you can select one of 14 different charts, customize colors, styles etc all through URL parameters! The video below shows my first attempt to create a chart from scratch and implement it in Glide. Took me less than 5 minutes. End result: [Screen Shot 2020-09-17 at 10.10.46 AM] Direct Loom link

[mbraunperu]

Thanks! I tried quickcharts but once I have the code, what component in glide do I use to show my chart?

[ThinhDinh]

If you have the right params already, you can use an image component for that.

Chart.js Sandbox Editor

They have a sandbox environment to test stuff, it’s pretty neat. You can use the Construct URL column in Glide to build out your chart URL.

[mbraunperu]

I used a TEMPLATE column and the graph shows neatly on an image component. However, I have to hardcode the values (it does not let me do replacements). Any hint why?

[ThinhDinh]

If you’re using the template column, you can do something like: {D} as a variable, and then replace {D} with your data.

I assume you would have to build your data in another template column, from the data you have in your app.

[mbraunperu]

Tried the {D} and other letters (I assume it has to be a unique text in the code). But no matter what I always get this error:

[ThinhDinh]

Can you check your result to see where the “.” letter is? How are you setting up your {D} variable?

[mbraunperu]

First, thanks a lot for your help and patience!!! I did not understand what you mean by your first sentence (check the result). Here is my code (that works perfectly when I hardcode values):

[ThinhDinh]

Can you show us what your {A} value looks like?

[mbraunperu]

[Jeff_Hager]

I’d probably change the formatting of your number column to remove the thousands separator and maybe the decimal if you don’t need it. The thousands separator is probably getting you because that is the delimiter value for each data point.

[mbraunperu]

Right on Jeff !! Now it works! Thank you very much