Horizontal Facet Chart

Use CSS Rotate to realize horizontal bar chart

by YeongCY

HTML

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

CSS

#demo {
      width: 500px;
      height: 500px;
      transform: rotate(90deg);
      transform-origin: middle left;
    }

JavaScript

var t = new FacetChart({
  container: document.getElementById("demo"),
  data: {
    url: "https://zoomcharts.com/dvsl/data/pie-chart/browsers.json"
  },
  series: [
    { data: { field: "value" } }
  ],
  interaction: {
  	resizing: { enabled: false }
  },
	valueAxisDefault: {
  	
  },
  facetAxis: {
    size: 200,
    labels: {
      angle: -90
    }
  }
});