Chart Bar XII
Chart Bar XII
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 class="theme-light">

<div id="chart"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#chart").devuiChart({
            theme: "light",
            chartLegend: {
                verticalAlign: "top"
            },
            axisX: {
                categoricalValues: ["Day1", "Day2", "Day3", "Day4", "Day5"]
            },
            axisY: [{
                min: 0.1,
                max: 100,
                title: {
                    text: "Distance Km"
                }
            }, {
                min: 0.1,
                max: 200,
                title: {
                    text: "Distance miles"
                },
                swapLocation: true
            }],
            primaryHeader: {
                text: "Hybrid cars mileage"
            },
            dataSeries: [{
                axisY: 0,
                seriesType: "bar",
                collectionAlias: "Battery",
                data: [20, 40, 45, 30, 50]
            }, {
                axisY: 1,
                seriesType: "bar",
                collectionAlias: "Gas",
                data: [20, 30, 35, 35, 40]
            }]
        });
    });
</script>

</body>