Chart Line VII
Chart Line 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 class="theme-light">

<div id="chart"></div>
<script type="text/javascript">
    jQuery(function ($) {
        $("#chart").devuiChart({
            theme: "light",
            primaryHeader: {
                text: "Car Sales Oil Prices comparisons"
            },
            exportOptions: {
                image: false,
                print: false
            },
            axisY: [{
                min: 1,
                max: 60,
                title: {
                    text: 'Average Salary  (Thousands USD)',
                    style: {
                        color: '#4DB0F5'
                    }
                },
                axisTickText: {
                    style: {
                        color: '#4DB0F5'
                    }
                }
            }, {
                min: 1,
                max: 5,
                title: {
                    text: 'Gas Prices (USD/Gallon)',
                    style: {
                        color: '#FFC500'
                    }
                },
                swapLocation: true,
                axisTickText: {
                    style: {
                        color: '#FFC500'
                    }
                }
            }, {
                min: 1,
                max: 40,
                title: {
                    text: 'Sold Cars  (In Millions)',
                    style: {
                        color: '#FF1800'
                    }
                },
                swapLocation: true,
                axisTickText: {
                    style: {
                        color: '#FF1800'
                    }
                }
            }],
            dataSeries: [{
                seriesType: 'line',
                axisY: 0,
                collectionAlias: "Salary",
                data: [42.7, 52.8, 63.1, 23.5, 53, 55.8, 57.7]
            }, {
                seriesType: 'line',
                axisY: 1,
                collectionAlias: "Gas Prices (USD/Gallon)",
                data: [2.75, 2.80, 2, 2.55, 2.60, 2.90, 3.05]
            }, {
                seriesType: 'line',
                axisY: 2,
                collectionAlias: "Car Sales",
                data: [20, 22.9, 32.1, 31, 22.8, 22.4, 32.10]
            }]
        });
    });
</script>

</body>