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. For example, add motion effects when the mouse hovers over the entire chart or an individual inner element. Use your imagination to create interactive effects with CSS.

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

# Data Hover Effect

Change background color when the user hovers over data items:

#motion-effect .column tr {
  transition-duration: 0.3s;
}
#motion-effect .column tr:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
#motion-effect .column 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 .column td {
  transition-duration: 0.3s;
  opacity: 0.5;
}
#motion-effect .column 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

Scale the data when hovering over the data elements:

#motion-effect .column td .data {
  transition-duration: 0.6s;
  transform: scale(0);
}
#motion-effect .column 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

Grayscale colors the chart when visitors hover over it:

#motion-effect .column {
  transition-duration: 1s;
  filter: grayscale(100%);
}
#motion-effect .column: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:

# Scroll Effect

Show only part of the data, and allow the user to scroll to view the rest of the data:

#motion-effect {
  --total-cells: 11;
  --display-cells: 6;
  --cell-size: 50px;

  width: 100%;
  max-width: calc( var( --cell-size ) * var( --display-cells ) );
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}
#motion-effect .column {
  --aspect-ratio: auto;
  height: 250px;
  width: calc( var( --cell-size ) * var( --total-cells ) );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Motion Effect Example #5
Year Progress
2015 100
2016 80
2017 60
2018 40
2019 20
2020 0
2021 20
2022 40
2023 60
2024 80
2025 100
Open in:

← Animations →