# The chart component (stack) stacks my 4 values in one bar instead of two **URL:** \ **Category:** Ask for Help\ **Created:** [December 2, 2024, 11:53pm UTC](https://community.glideapps.com/t/the-chart-component-stack-stacks-my-4-values-in-one-bar-instead-of-two/78304 "2024-12-02T23:53:57Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![mbraunperu](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mbraunperu/32/83676_2.png) [@mbraunperu](https://community.glideapps.com/u/mbraunperu)\ **Post date:** [December 2, 2024, 11:53pm UTC](https://community.glideapps.com/t/the-chart-component-stack-stacks-my-4-values-in-one-bar-instead-of-two/78304/1 "2024-12-02T23:53:57Z")
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? ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [December 3, 2024, 1:02am UTC](https://community.glideapps.com/t/the-chart-component-stack-stacks-my-4-values-in-one-bar-instead-of-two/78304/2 "2024-12-03T01:02:23Z")
I don’t think there’s an easy way to do that. I assume your current structure looks like this. ![CleanShot 2024-12-03 at 07.54.51@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/8/48fe1ee42d65b3c183b210db88a5ab3f327f0bca.png) It has to look somewhat like this to be able to “stack”. ![CleanShot 2024-12-03 at 07.58.47@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/1/81f1dcbd4f63ebb46e25893159a50bba0e7cd39b.png) ![CleanShot 2024-12-03 at 07.59.05@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/3/7356681b937bfab1e730a67842f8a9ffb202dc2b.png) 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. > [@heart\_eyes Quickchart.io: the Cloudinary of Charts —on the fly charts!](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946): > > 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: [Direct Loom link](https://www.loom.com/share/8a4a2fffcef946a288b5ad53560bc469?sid=9b1e0895-9489-43bb-bab6-97a6e6de45c4) ---
**Author:** ![mbraunperu](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mbraunperu/32/83676_2.png) [@mbraunperu](https://community.glideapps.com/u/mbraunperu)\ **Post date:** [December 4, 2024, 11:53pm UTC](https://community.glideapps.com/t/the-chart-component-stack-stacks-my-4-values-in-one-bar-instead-of-two/78304/3 "2024-12-04T23:53:33Z")
Thanks! I tried quickcharts but once I have the code, what component in glide do I use to show my chart? ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [December 4, 2024, 11:55pm UTC](https://community.glideapps.com/t/the-chart-component-stack-stacks-my-4-values-in-one-bar-instead-of-two/78304/4 "2024-12-04T23:55:25Z")
If you have the right params already, you can use an image component for that. > **[Chart.js Sandbox Editor](https://quickchart.io/sandbox)** > > Online no-code chart maker. Build interactive charts with your data and create templates for custom use. Free & no login required. 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. ---
**Author:** ![mbraunperu](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mbraunperu/32/83676_2.png) [@mbraunperu](https://community.glideapps.com/u/mbraunperu)\ **Post date:** [December 5, 2024, 12:24am UTC](https://community.glideapps.com/t/the-chart-component-stack-stacks-my-4-values-in-one-bar-instead-of-two/78304/5 "2024-12-05T00:24:20Z")
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? ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [December 5, 2024, 12:26am UTC](https://community.glideapps.com/t/the-chart-component-stack-stacks-my-4-values-in-one-bar-instead-of-two/78304/6 "2024-12-05T00:26:32Z")
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. ---
**Author:** ![mbraunperu](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mbraunperu/32/83676_2.png) [@mbraunperu](https://community.glideapps.com/u/mbraunperu)\ **Post date:** [December 5, 2024, 12:44am UTC](https://community.glideapps.com/t/the-chart-component-stack-stacks-my-4-values-in-one-bar-instead-of-two/78304/7 "2024-12-05T00:44:54Z")
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: ![error](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/a/6aa92fbcdcba1fe67f299963a261b802fdf83dad.jpeg) ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [December 5, 2024, 12:46am UTC](https://community.glideapps.com/t/the-chart-component-stack-stacks-my-4-values-in-one-bar-instead-of-two/78304/8 "2024-12-05T00:46:53Z")
Can you check your result to see where the “.” letter is? How are you setting up your {D} variable? ---
**Author:** ![mbraunperu](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mbraunperu/32/83676_2.png) [@mbraunperu](https://community.glideapps.com/u/mbraunperu)\ **Post date:** [December 5, 2024, 12:56am UTC](https://community.glideapps.com/t/the-chart-component-stack-stacks-my-4-values-in-one-bar-instead-of-two/78304/9 "2024-12-05T00:56:10Z")
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): ![a](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/3/6319d9d3f64c5a72b7f421698a7bc036e31ed99f.jpeg) ![b](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/9/b91563a04b8a183d49509994538daa8457f2bac5.jpeg) ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [December 5, 2024, 2:03am UTC](https://community.glideapps.com/t/the-chart-component-stack-stacks-my-4-values-in-one-bar-instead-of-two/78304/10 "2024-12-05T02:03:39Z")
Can you show us what your {A} value looks like? ---
**Author:** ![mbraunperu](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mbraunperu/32/83676_2.png) [@mbraunperu](https://community.glideapps.com/u/mbraunperu)\ **Post date:** [December 5, 2024, 3:12am UTC](https://community.glideapps.com/t/the-chart-component-stack-stacks-my-4-values-in-one-bar-instead-of-two/78304/11 "2024-12-05T03:12:34Z")
![n](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/e/5ed1b85edb0351daa6dc0611a06d50250349f6ae.jpeg) ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [December 5, 2024, 3:41am UTC](https://community.glideapps.com/t/the-chart-component-stack-stacks-my-4-values-in-one-bar-instead-of-two/78304/12 "2024-12-05T03:41:19Z")
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. ---
**Author:** ![mbraunperu](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mbraunperu/32/83676_2.png) [@mbraunperu](https://community.glideapps.com/u/mbraunperu)\ **Post date:** [December 5, 2024, 3:56am UTC](https://community.glideapps.com/t/the-chart-component-stack-stacks-my-4-values-in-one-bar-instead-of-two/78304/13 "2024-12-05T03:56:46Z")
Right on Jeff !! Now it works! Thank you very much ---
**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\ **Post date:** [December 12, 2024, 3:56am UTC](https://community.glideapps.com/t/the-chart-component-stack-stacks-my-4-values-in-one-bar-instead-of-two/78304/14 "2024-12-12T03:56:51Z")
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.