Chart Range IV
Chart Range IV
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",
                exportOptions: {
                    image: false,
                    print: false
                },
                tooltipSettings: {
                    customPointText: function(point, chart) {
                        return shield.format(
                            '<span style="color:{color}">Start Budget: <b>{point.high}</b><br/>EndBudget:<b>{point.low}</b></span>',
                            {
                                point: point,
                                color: point.low > 0 ? 'green' : 'red'
                            }
			);
                    }
                },
                seriesSettings: {
                    rangebar: {
                        enablePointSelection: true,
                        activeSettings: {
                            pointHoveredState: {
                                color: '#1C30A3',
                                borderColor: 'black',
                                borderWidth: 3,
                                borderRadius: 5
                            },
                            pointSelectedState: {
                                color: '#1C30A3',
                                borderColor: 'black',
                                borderWidth: 5,
                                borderRadius: 5
                            }
                        }
                    }
                },
                axisY: {
                    title: {
                        text: "Start/End Values"
                    }
                },
                axisX: {
                    categoricalValues: ["Fisc Inc.", "Integrity First", "CH", "Local FM", "Print Co", "Jets SM", "Toys Inc.", "Giant", "FoodStore", "PC Star"]
                },
                primaryHeader: {
                    text: "Budget Spendings By Company"
                },
                dataSeries: [
                    {
                        seriesType: 'rangebar',
                        collectionAlias: 'Budget',
                        data: [[12000, 234000], [1000, 1570000], [37456, 1700000], [0, 870000], [1450, 1000000], [290, 130000], [20000, 1870000], [70000, 1270000], [100000, 700000], [0, 300000]]
                    }
                ]
            });
        });
    </script>

</body>