Changing Chart Colours using CSS (Next Gen)

API & Custom Code Show & Tell
1

I hadn’t seen anything on changing the chart colours using CSS in Next Gen Apps since custom CSS was made available. So I had a play and cracked it :grinning_face: .

[data-chart] {
  /* Specific Styles based on your chart labels, change 'approved' etc to your chart labels.  Use inspector to find the variable based on your chart label. */
  --color-approved: #00DF22 !important;
  --color-awaitingapproval: #3B82F6 !important;
  --color-rejected: #FF3399 !important;
  /* General Colors */
  --color-calc_0: #3B82F6 !important;
  --color-calc_1: #00DF22 !important;
  --color-calc_2: #FF3399 !important;
  --color-calc_3: #FFcc66 !important;
  --color-calc_4: #334455 !important;
  --color-calc_5: #33ccCC !important;
  --color-calc_6: #FF6600 !important;
}

You need inspector to find out what the colour variables are for your custom charts and then change the colours using the above CSS. There are generic colour variables you can fix as well.

2 Likes
2

Nice! Thanks for sharing, @Mike7