Span chart with categorical data
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
chart= new FacetChart({
"series": [
{
"name": "",
"data": {
"field": "offset"
},
"stack": "default",
"style": {
"fillColor": "transparent"
},
"type": "columns"
},
{
"name": "Data",
"data": {
"field": "value"
},
"stack": "default",
"style": {
"fillColor": "#2fc32f"
},
"type": "columns"
}
],
"style": [],
"container": "demo",
"data": [
{
"url": "/dvsl/data/extra/span-categorical.json"
}
],
"toolbar": {
"fullscreen": true,
"enabled": true
},
"interaction": {
"resizing": {
"enabled": false
}
}
})
Data
Data
Download Data
{
"id": "",
"subvalues": [
{
"name": "Category 1",
"value": 445,
"offset": 30
},
{
"name": "Category 2",
"value": 210,
"offset": 150
},
{
"name": "Category 3",
"value": 145,
"offset": 70
},
{
"name": "Category 4",
"value": 385,
"offset": 220
},
{
"name": "Category 5",
"value": 150,
"offset": 20
},
{
"name": "Category 6",
"value": 150,
"offset": 370
}
]
}