Charts.css

# Motion Effects

Motion effects enhance your charts when users interact with elements using mouse (opens new window) or touch (opens new window) events. The simplest example is CSS hover effects. You can add motion effects when the mouse hovers over the entire chart or an individual inner element. Use your imagination and CSS skills to create beautiful interaction effects.

Here are some basic examples leveraging CSS :hover pseudo-class.

# Data Hover Effect

A simple background color change when the user hovers over data items:

#motion-effect tr {
  transition-duration: 0.3s;
}
#motion-effect tr:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
#motion-effect tr:hover th {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
}
1
2
3
4
5
6
7
8
9
10
Motion Effect Example #1
Year Progress
2016 20
2017 40
2018 60
2019 40
2020 20
Open in:

# Dataset Opacity Effect

Reverse opacity effect when hovering over datasets:

#motion-effect td {
  transition-duration: 0.3s;
  opacity: 0.5;
}
#motion-effect td:hover {
  opacity: 1;
}
1
2
3
4
5
6
7
Motion Effect Example #2
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2010 20 50 100 70 40
2020 90 60 40 70 100
Open in:

# Scale Data

You can scale the data when hovering over the chart.

#motion-effect td .data {
  transition-duration: 0.6s;
  transform: scale(0);
}
#motion-effect td:hover .data {
  transform: scale(1);
}
1
2
3
4
5
6
7
Motion Effect Example #3
Year Progress
2016 20
2017 40
2018 60
2019 80
2020 100
Open in:

# Grayscale Chart

My favorite effect is the grayscale effect. The chart becomes colorful only when the user hovers over chart.

#motion-effect {
  transition-duration: 1s;
  filter: grayscale(100%);
}
#motion-effect:hover {
  filter: none;
}
1
2
3
4
5
6
7
Motion Effect Example #4
Year Progress
2016 20
2017 40
2018 60
2019 80
2020 100
Open in:

← Animations →