Chart Area VII
Chart Area VII
View Demo

Insert it in <head>

<!-- Choose one for Light Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/light/all.min.css" />
<!-- Choose one for Dark Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/dark/all.min.css" />

<script type="text/javascript" src="https://i-as.dev/devui/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://i-as.dev/devui/js/devui-all.min.js"></script>

Use Components

<body>
 <div id="chart"></div>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#chart").devuiChart({
                theme: "light",
                primaryHeader: {
                    text: "Speed VS reaction distance"
                },
                exportOptions: {
                    image: false,
                    print: false
                },
                axisY: [
                {
                    title: {
                        text: "Thinking Distance (m)",
                        style: {
                            color: "#52B0F0"
                        }
                    },
                    swapLocation: false,
                    axisTickText: {
                        style: {
                            color: "#52B0F0"
                        }
                    }
                }, {
                    title: {
                        text: "Braking Distance (m)",
                        style: {
                            color: "#D7C43A"
                        }
                    },
                    swapLocation: true,
                    axisTickText: {
                        style: {
                            color: "#D7C43A"
                        }
                    }
                }],
                dataSeries: [{
                    axisY: 0,
                    seriesType: "area",
                    collectionAlias: "Thinking Distance",
                    data: [6, 9, 12, 15, 18, 21, 24]
                },
                {
                    axisY: 1,
                    seriesType: "area",
                    collectionAlias: "Braking Distance",
                    data: [6, 14, 24, 38, 54, 75, 96]
                }
                ]
            });
        });
    </script>
</body>