Chart Bar XV
Chart Bar XV
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",
            primaryHeader: {
                text: 'Boiling and Freezing Temperatures of Solvents (°C)'
            },
            secondaryHeader: {
                text: 'Plot band indicates the range between lowest and highest recorded temperature on Earth'
            },
            chartLegend: {
                enabled: false
            },
            exportOptions: false,
            axisX: {
                categoricalValues: ['Acetic acid', 'Acetone', 'Benzene', 'Chloroform', 'Diethyl Ether', 'Ethanol', 'Ethylene Bromide', 'Formic Acid']
            },
            axisY: {
                min: -120,
                max: 120,
                plotLines: [
                    { start: 100, drawWidth: 2, drawColor: '#C90515', zIndex: 2 },
                    { start: 0, drawWidth: 2, drawColor: '#1ABC9C', zIndex: 2 }
                ],
                plotBands: [
                    { start: -89.2, end: 70.7, drawColor: 'rgba(214,235,248,0.8)' }
                ]
            },
            seriesSettings: {
                bar: {
                    stackMode: 'normal'
                }
            },
            dataSeries: [{
                seriesType: 'bar',
                color: '#ffc500',
                collectionAlias: 'Boiling Point',
                data: [118.1, 56.2, 80.1, 61.2, 34.5, 78.4, 130, 101]
            }, {
                seriesType: 'bar',
                collectionAlias: 'Freezing Point',
                data: [16.6, -94.8, 5.5, -63.5, -116.2, -114.6, 10, 8]
            }]
        });
    });
</script>

</body>