# CSS to define graph Y-axis?

**URL:** https://community.glideapps.com/t/css-to-define-graph-y-axis/54601
**Category:** Ask for Help
**Created:** [November 21, 2022, 6:13am UTC](https://community.glideapps.com/t/css-to-define-graph-y-axis/54601 "2022-11-21T06:13:28Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![kabookie](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kabookie/32/10994_2.png) [@kabookie](https://community.glideapps.com/u/kabookie)
#### Post date: [November 21, 2022, 6:13am UTC](https://community.glideapps.com/t/css-to-define-graph-y-axis/54601/1 "2022-11-21T06:13:28Z")

</div>

Well I have a glide bar graph where I want to show a rating of 1-10. The graph works great except that it automatically pushes the Y-axis to a 12 value, which makes the results appear weaker. I understand that our graph function is pretty limited, but has anyone had success with any kind of CSS hack to keep the max value for Y at a 10?  
I did look into [Quickchart.io](http://Quickchart.io) but the overall graphics quality is kind of meh.  
Here is what it currently looks like:  
Thanks!

 ![Screen Shot 2022-11-20 at 10.08.35 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/1/8169235333e2b1593241aa541150cd68711fc20e.png)

---

<div class="post-metadata">

### 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: [November 21, 2022, 11:35pm UTC](https://community.glideapps.com/t/css-to-define-graph-y-axis/54601/2 "2022-11-21T23:35:44Z")

</div>

> [@kabookie](#):
>
> I did look into [Quickchart.io](http://Quickchart.io) but the overall graphics quality is kind of meh.

Is it too blurry or is it something else? I would recommend Quickchart for flexibility in cases like this.

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [November 22, 2022, 1:22am UTC](https://community.glideapps.com/t/css-to-define-graph-y-axis/54601/3 "2022-11-22T01:22:48Z")

</div>

yeah, I was also curious about that. @kabookie - would you mind elaborating a bit? meh, in what way?

I know that by default all the text elements in quickchart graphs will be a pale grey colour, which I agree looks a bit “meh”. But it’s pretty easy to change that.

---

<div class="post-metadata">

### Author: ![kabookie](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kabookie/32/10994_2.png) [@kabookie](https://community.glideapps.com/u/kabookie)
#### Post date: [November 22, 2022, 3:14am UTC](https://community.glideapps.com/t/css-to-define-graph-y-axis/54601/4 "2022-11-22T03:14:30Z")

</div>

The main thing is that I can’t make the background transparent. I like the look of the native app in some ways, this is one of them. Also, all bars in the graph will be the same color in quickchart, but in native they can be more colorful. And I like the font better. Just looks more polished. But again there are issues with it as well, the main one being unable to regulate the Y-axis. Now that I’ve got the app ready to go, I will revisit as I have a week of testing before launching. It is a results tracker for a new product launch.

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [November 22, 2022, 3:20am UTC](https://community.glideapps.com/t/css-to-define-graph-y-axis/54601/5 "2022-11-22T03:20:44Z")

</div>

All of those things that you mentioned are configurable with quickcharts 😉

- transparent background (it should be by default) ✅
- customise bar chart colours ✅
- customise text font (style, size, colour) ✅
- customise X/Y axises ✅

---

<div class="post-metadata">

### Author: ![kabookie](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kabookie/32/10994_2.png) [@kabookie](https://community.glideapps.com/u/kabookie)
#### Post date: [November 22, 2022, 3:34am UTC](https://community.glideapps.com/t/css-to-define-graph-y-axis/54601/6 "2022-11-22T03:34:57Z")

</div>

Thanks Darren, I will take another look at it.

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [November 22, 2022, 3:45am UTC](https://community.glideapps.com/t/css-to-define-graph-y-axis/54601/7 "2022-11-22T03:45:26Z")

</div>

If you’re fairly new to quickchart, this is what I would recommend:

- Start in the [Gallery](https://quickchart.io/gallery/), and find a chart style that is closest to what you need
- Clicking on any chart in the gallery will open that chart in the [Sandbox Editor](https://quickchart.io/sandbox)
- In the sandbox, you can experiment with different settings and see the effects immediately
- Once you have what you want, you just need to transfer the JSON from the sandbox to a Glide template, add replacements for your data, and feed that into a Construct URL column.

quickchart is (it seems) almost infinitely configurable, and the documentation can be a bit overwhelming at times. But they have great support. They even have a [community forum](https://community.quickchart.io/latest). Not as active as ours, but if you ask a question there you’re almost guaranteed to get a good quality answer from Ian.
