dvxCharts - Interactive Charts for JavaScript

dvxCharts Examples

This sample demonstrates the Area chart type.

For detailed implementation, please take a look at the HTML code tab.

 
<!DOCTYPE html>
<html>
<head>
    <title>Three Area Series Example - JavaScript Chart by dvxCharts</title>
    <link rel="stylesheet" type="text/css" href="../../css/dvxCharts.chart.min.css" />
    <link rel="stylesheet" type="text/css" href="../../themes/base/styles.css" />
    <script src="../../js/dvxCharts.chart.min.js" type="text/javascript"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        .example-container {
            width: 100%;
            max-width: 500px;
            height: 300px;
        }
    </style>
    
    <script lang="javascript" type="text/javascript">
        var chart = new dvxCharts.Chart({
            title: {
                text: 'Three Area Series'
            },
            animation: {
                duration: 1
            },
            series: [
                {
                    type: 'area',
                    title: 'Area 1',
                    data: [[1, 2], [2, 3], [3, 4]]
                },
                {
                    type: 'area',
                    title: 'Area 2',
                    data: [[4, 5], [5, 6], [6, 7]]
                },
                {
                    type: 'area',
                    title: 'Area 3',
                    data: [[7, 8], [8, 9], [9, 10]]
                }
            ]
        });
        chart.write('container');
    </script>

</head>
<body>
    <div>
        <div id="container" class="example-container"></div>
    </div>
</body>
</html>