# CSS for charts

**URL:** <https://community.glideapps.com/t/css-for-charts/80640>\
**Category:** Ask for Help\
**Created:** [March 11, 2025, 4:14pm UTC](https://community.glideapps.com/t/css-for-charts/80640 "2025-03-11T16:14:48Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alan\_Ochoa\_Martinez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alan_ochoa_martinez/32/83354_2.png) [@Alan\_Ochoa\_Martinez](https://community.glideapps.com/u/Alan_Ochoa_Martinez)\
**Post date:** [March 11, 2025, 4:14pm UTC](https://community.glideapps.com/t/css-for-charts/80640/1 "2025-03-11T16:14:48Z")

</div>

I have this chart where I have 2 lines, one which is the projected amount and one that represents the actual amount. However, since there te real amount is not yet at the final date after the last date with numbers it goes back down to 0. I wanted to know if there was a way to make sure the line stops at the last availabe real number or if there is a way to make it clear that is the last put number.

 ![Captura de Pantalla 2025-03-11 a la(s) 10.14.23](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/c/9cd9a45839f5717a8e2e4cf6aac85975134e4beb.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:** [March 12, 2025, 12:20am UTC](https://community.glideapps.com/t/css-for-charts/80640/2 "2025-03-12T00:20:36Z")

</div>

![CleanShot 2025-03-12 at 07.15.26](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/2/a271408fecf8f08ecb7508352b2b3dc1c5a993ce.png)

I had a go using AI component (right) compared to Glide’s chart (left).

 ![CleanShot 2025-03-12 at 07.18.33](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/6/06d1c9a60b93fd266c83b4dd8c8cd5723101d22a.png)

I used JSON to gather my values into a structured format.

Then, in my users table (you can theoretically do this anywhere you need), have a combo of joined list and template column to join them together.

 ![CleanShot 2025-03-12 at 07.19.18](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/b/abbceaab5fda693f82a82bb70c1957fc5a6be7e8.png)

 ![CleanShot 2025-03-12 at 07.19.30](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/1/51c9763c3dcdb03b7b03432ce5e0c075bf5e2191.png)

 ![CleanShot 2025-03-12 at 07.19.43](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/a/aa9de6fbb543f0f46fe262152792fe84cb17650a.png)

Then my AI component looks like this.

```auto
Schema of my inputData:

{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "type": "array",
    "items": {
        "type": "object",
        "properties": {
            "ID": {
                "type": "string"
            },
            "Value 1": {
                "type": "integer"
            },
            "Value 2": {
                "type": "integer"
            }
        },
        "required": [
            "ID",
            "Value 1"
        ],
        "additionalProperties": false
    }
}

Use ChartJS to have line charts with X-axis being ID, and Y-axis drawing 2 lines for Value 1 and Value 2. If the value is 0, still draw from it and don't leave the line empty, unless the value is actually empty.

```