ActiveReports 18 .NET Edition
Developers / Create Applications / Js Viewer Application / Animation
In This Topic
    Animation
    In This Topic

    The Js Viewer (and WebViewer control) provides the 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.

    Note: For the chart animations, you need to add the jsViewer.chart.min.js and jsVIewer.chart.min.css files from the NPM packages to your project and link them on your page.

    Load Animation on Charts

     Load Animation Effect in 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:

    index.html
    Copy Code 
    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.

    Chart Hover Effect in Charts

    Chart Hover Effect in Charts

    Chart Hover Effect in Charts

    Chart Hover Effect in Charts

    index.html
    Copy Code 
    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.

    Table Hover Effect in Charts

    index.html
    Copy Code 
    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.

    index.html
    Copy Code 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>JS Viewer</title>
    <link href="jsViewer.min.css" rel="stylesheet">
    <link href="jsViewer.chart.min.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet">
</head>
<body onload="loadViewer()">
    <div style="width: 100%">
        <div id="viewerContainer"></div>
    </div>
    <script type="text/javascript" src="jsViewer.min.js"></script>
    <script type="text/javascript" src="jsViewer.chart.min.js"></script>
    <script type="text/javascript">
        let viewer;
        function loadViewer() {
            viewer = GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer',
                displayMode: "Continuous",
                pageView: {
                    horizontalAlignment: "center",
                    viewMode: "standard" // default : noPaper
                },
                animation: {
                    hoverTable: {
                        enabled: true,
                        backgroundColor: 'LightGray',
                        textColor: 'DarkGray'
                    },
                    loadChart: {
                        enabled: true
                    },
                    hoverChart: {
                        enabled: true
                    }
                }
            });
           
            console.dir(viewer)
            viewer.openReport("DemoReport.rdlx");
        }
    </script>
</body>
</html>

    Important: The plot rules do not work on charts with animation. If you want the plot rules to apply on a chart, you must disable the animation properties.