Search code examples
htmlcssconditional-formatting

CSS Conditional Formatting with a colour range

I am looking to create a basic chart using divs and spans and want to apply conditional formatting to each column in the chart depending on the value setting its height. The trick which I haven't been able to crack is that I want to have it function a bit like Excel conditional formatting in the example here:

enter image description here

Where the colours are in a range (light to dark). Is there a simple way of doing this? I can see how I could apply static values to static colours but was hoping I could do something with colour ranges like this excel example.

So, the below screenshot shows a column chart where each column has a different shade of orange determined by the value of the column:

enter image description here

The closer to 25 the column is, the darker the colour.. Like-wise, the lower the value, the lighter the shade of orange is.

Solution

  • It sounds like your goal is to color a bar somewhere between two colors depending on a value. If that's the case, you can use css animations to simulate the color gradient.

    The idea is this:

    • Set up an animation setting the background to be one of two colors. This effectively calculates a gradient between the two colors. You do this with @keyframes and animation.
    • Pause the animation, since we don't want it to actually play. This is done with animation-play-state.
    • Select a specific frame in the animation to get the correct in-between color. This can be done with a negative animation-delay.

    .bars {
  display: flex;
  justify-content: space-evenly;
}

.bar {
  animation: color-gradient 25s linear 1;
  animation-fill-mode: forwards;
  animation-play-state: paused;
  width: 3em;
}

@keyframes color-gradient {
  from { background: red; }
  to   { background: blue; }
}
    <div class="bars">
  <div class="bar" style="height: 5em; animation-delay: -5s;"></div>
  <div class="bar" style="height: 10em; animation-delay: -10s;"></div>
  <div class="bar" style="height: 15em; animation-delay: -15s;"></div>
  <div class="bar" style="height: 20em; animation-delay: -20s;"></div>
  <div class="bar" style="height: 25em; animation-delay: -25s;"></div>
</div>

    The granularity can be adjusted by making the animation duration longer than 25 seconds if need be.