# Animation
The JS Viewer (and WebViewer control) provides the API to add animations to charts and tables. You can enable animation on charts when the chart is loaded and when the user hovers over a chart or a table.
## Content
The Js Viewer (and WebViewer control) provides the [API](/activereportsnet/docs/v19.2/developers/create-applications/js-viewer-application/jsviewer-api) for users to add animations to charts and tables. You can enable the animation feature on charts when the chart is loaded and when the user hovers over a chart or a table.
> type=note
> **Note**: For the chart animations, you need to add the **jsViewer.chart.min.js** and **jsVIewer.chart.min.css** files from the [NPM](https://www.npmjs.com/package/@mescius/activereportsnet-viewer) packages to your project and link them on your page.
## Load Animation on Charts
Load animation occurs when the chart first loads, or when the chart is forced to reload. To enable load animation in charts, use the following code:
```html
animation: {
loadChart: {
enabled: true
}
}
```
## Hover Animation
Hover animation occurs when the user hovers the mouse over a data point.
### Hover Animation on Charts
The hover animation in the case of charts scales the data point. The data point is enlarged when the user hovers the mouse over the data and is shrunk back to the original size when the user hovers away from the data point. Depending on the Tooltip template set on the chart while designing a chart, the hover labels can also be displayed over the data points.
```html
animation: {
hoverChart: {
enabled: true
},
}
```
### Hover Animation on Tables
The hover animation in the case of tables highlights the table row by coloring the row background and the text on the hover.
```html
animation: {
hoverTable: {
enabled: true,
backgroundColor: 'LightGray',
textColor: 'DarkGray'
}
}
```
## Complete Code Implementation
The complete working code is provided below for implementing the chart load, and the chart and table hover animations.
```html
JS Viewer