# Changing chart lines to personalized colors with CSS
**URL:** https://community.glideapps.com/t/changing-chart-lines-to-personalized-colors-with-css/79964
**Category:** Ask for Help
**Created:** [February 10, 2025, 5:56pm UTC](https://community.glideapps.com/t/changing-chart-lines-to-personalized-colors-with-css/79964 "2025-02-10T17:56:23Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@Ana\_Gutierrez](https://community.glideapps.com/u/Ana_Gutierrez)
#### Post date: [February 10, 2025, 5:56pm UTC](https://community.glideapps.com/t/changing-chart-lines-to-personalized-colors-with-css/79964/1 "2025-02-10T17:56:23Z")
Hello,
I am new to using CSS and I wanted to change the color lines of my chart. My chart consists of 2 lines and I know that I have to create the CSS code and paste it on the Settings- Appearance- Custom CSS, and then add the CSS class to my specific chart. I have the following code:
.graph-line-primary {
stroke: #FF5733; /\* Orange color \*/
}
.graph-line-secondary {
stroke: #3498DB; /\* Blue color \*/
}
My question is, do I need to change something inside the inspection code? Where do I paste that code? What would be my CSS class to paste on the chart?
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [February 10, 2025, 11:46pm UTC](https://community.glideapps.com/t/changing-chart-lines-to-personalized-colors-with-css/79964/2 "2025-02-10T23:46:32Z")
First, set a custom class name here so it only affects that specific chart. I’m assuming you don’t want this in all charts.
Then this.
```auto
svg[class*="recharts-surface"] :nth-child(3) path {
stroke: #FF5733;
}
svg[class*="recharts-surface"] :nth-child(4) path {
stroke: #3498DB;
}
```
---
### Author:  [@Ana\_Gutierrez](https://community.glideapps.com/u/Ana_Gutierrez)
#### Post date: [February 11, 2025, 2:34am UTC](https://community.glideapps.com/t/changing-chart-lines-to-personalized-colors-with-css/79964/3 "2025-02-11T02:34:07Z")
Thanks!! Do I need to mention the class name somewhere in the custom CSS? I tried it as the screenshots, but it does not change the color.
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [February 11, 2025, 2:45am UTC](https://community.glideapps.com/t/changing-chart-lines-to-personalized-colors-with-css/79964/4 "2025-02-11T02:45:19Z")
Can you show me what you have set up?
---
### Author:  [@Ana\_Gutierrez](https://community.glideapps.com/u/Ana_Gutierrez)
#### Post date: [February 11, 2025, 2:07pm UTC](https://community.glideapps.com/t/changing-chart-lines-to-personalized-colors-with-css/79964/5 "2025-02-11T14:07:01Z")
This is what I have, the graph I want to modify is the line chart on the left, in which i added the CSS class of chart-custom-color
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [February 11, 2025, 3:53pm UTC](https://community.glideapps.com/t/changing-chart-lines-to-personalized-colors-with-css/79964/6 "2025-02-11T15:53:13Z")
I’ll take a look tomorrow my time, thanks for the screenshots.
---
### Author:  [@Ana\_Gutierrez](https://community.glideapps.com/u/Ana_Gutierrez)
#### Post date: [February 13, 2025, 4:28pm UTC](https://community.glideapps.com/t/changing-chart-lines-to-personalized-colors-with-css/79964/7 "2025-02-13T16:28:35Z")
Ok Thanks!
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [February 13, 2025, 11:20pm UTC](https://community.glideapps.com/t/changing-chart-lines-to-personalized-colors-with-css/79964/8 "2025-02-13T23:20:34Z")
I don’t think you need the custom CSS class. This is what I have and it looks like it’s working.
Just to confirm, do you have just 2 lines on your chart?
---
### Author:  [@Eduardo](https://community.glideapps.com/u/Eduardo)
#### Post date: [February 20, 2025, 5:59pm UTC](https://community.glideapps.com/t/changing-chart-lines-to-personalized-colors-with-css/79964/9 "2025-02-20T17:59:03Z")
That kinda works, but when you hover the mouse through the graph the relation of colors (nth-child) change. Also, it doesn’t change the colors in the legend, neither the static legend nor the hovering legend. I’ve been trying to find a workaround for that, but my knowledge of css is shallow.
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [February 20, 2025, 11:56pm UTC](https://community.glideapps.com/t/changing-chart-lines-to-personalized-colors-with-css/79964/10 "2025-02-20T23:56:53Z")
I agree. If there’s too much stuff to change I would rather just use Quickcharts or Chart.js to not rely on CSS.