Chart Line VI
Chart Line VI
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">
        $(function () {
            $("#chart").devuiChart({
                theme: "light",
                seriesSettings: {
                    line: {                       
                        dataPointText: {
                            enabled: true
                        }
                    }
                },
                chartLegend: {
                    align: 'center',
                    borderRadius: 2,
                    borderWidth: 2,
                    verticalAlign: 'top'
                },
                exportOptions: {
                    image: true,
                    print: true
                },
                axisX: {
                    categoricalValues: ['2002', '2003', '2004', '2005', '206', '207', '2008', '2009', '2010', '2011', '2012', '2013']
                },
                axisY: {
                    title: {
                        text: "Price (EUR per kWh)"
                    }
                },
                primaryHeader: {
                    text: "Electricity prices"
                },
                dataSeries: [{
                    seriesType: 'line',
                    collectionAlias: 'Households',
                    data: [0.164, 0.173, 0.184, 0.114, 0.273, 0.384, 0.464, 0.123, 0.112, 0.124, 0.1, 0.17]
                }, {
                    seriesType: 'line',
                    collectionAlias: 'Industry',
                    data: [0.342, 0.127, 0.321, 0.567, 0.324, 0.543, 0.342, 0.435, 0.564, 0.342, 0.234, 0.564]
                }]
            });
        });
    </script>

</body>