Back

Horizontal bar chart

By default, FacetChart will display the chart vertically. Include a 'horizontal: true' property to rotate the chart horizontally - this way, the categories will be placed on the Y-Axis, and the values will use X-Axis. However, to instantly rotate all labels too, we recommend using "theme: ZoomCharts.FacetChart.themes.horizontal".

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 
let chart= new FacetChart({
    "series": [
        {
            "name": "GDP by industry, $",
            "data": {
                "aggregation": "sum"
            },
            "style": {
                "fillGradientMode":"horizontal",
                "fillGradient" : [[0,"#2278FB"], [1, "#6BDFDB"]]
            }
        }
    ],
    "container": "demo",
    "data": [
        {
            "url": "/dvsl/data/extra/us-economy.json"
        }
    ],
    "toolbar": {
        "fullscreen": true,
        "enabled": true
    },
    "theme" : ZoomCharts.FacetChart.themes.horizontal,
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})

Data

Data 
//No separate data for this example