Back

Horizontal BarChart

A horizontal bar chart, the same as bar chart, provides a way of showing data values represented as bars but displayed horizontally.

horizbar = cht.CreateChart(data, "horizontalBar", width, height, options);

You just have to pass "horizontalBar" for the type argument. For data and options arguments, refer to the samples below.

Samples

One Dataset

var data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
	datasets: [{
		label: 'Downloads',
		backgroundColor: "#E91E63",
		borderColor: "#C2185B",
		borderWidth: 1,
		data: [5, 10, -4, 12, 15]
	}]
}
Copy

More Data

var data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
	datasets: [
	    {
    		label: 'Downloads',
    		backgroundColor: "#9C27B0",
    		borderColor: "#7B1FA2",
    		borderWidth: 1,
    		data: [2, 5, -3, 15, 10]
    	}, {
    		label: 'Uploads',
    		backgroundColor: "#5C6BC0",
    		borderColor: "#3949AB",
    		borderWidth: 1,
    		data: [12, -8, 10, -2, 7]
    	}
	]
}
Copy

Horizontal BarChart - One Dataset

app.LoadPlugin('ChartJS')

function OnStart()
{
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout('Linear', 'VCenter, FillXY')
        
        data = {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
        	datasets: [
        	    {
            		label: 'Downloads',
            		backgroundColor: "#9C27B0",
            		borderColor: "#7B1FA2",
            		borderWidth: 1,
            		data: [5, 10, -4, 12, 15]
            	}
        	]
        }
        
        hbar = chart.CreateChart(data, 'horizontalBar', 0.9, 0.5)
        lay.AddChild(hbar)
        
    app.AddLayout(lay)
}
Copy Run

Horizontal BarChart - More Datasets

app.LoadPlugin('ChartJS')

function OnStart()
{
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout('Linear', 'VCenter, FillXY')
        
    data = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    	datasets: [
    	    {
                label: 'Downloads',
                backgroundColor: "#9C27B0",
                borderColor: "#7B1FA2",
                borderWidth: 1,
                data: [2, 5, -3, 15, 10]
            }, {
                label: 'Uploads',
                backgroundColor: "#5C6BC0",
                borderColor: "#3949AB",
                borderWidth: 1,
                data: [12, -8, 10, -2, 7]
            }
    	]
    }
    
    hbar = chart.CreateChart(data, 'horizontalBar', 0.9, 0.5)
    lay.AddChild(hbar)

    app.AddLayout(lay)
}
Copy Run

Horizontal BarChart - Custom Colors

app.LoadPlugin('ChartJS')

function OnStart()
{
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout('Linear', 'VCenter, FillXY')
        
        data = {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
        	datasets: [
        	    {
            		label: 'Downloads',
            		backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"],
            		borderWidth: 0,
            		data: [5, 10, 20, 12, 15]
            	}
        	]
        }
        
        hbar = chart.CreateChart(data, 'horizontalBar', 0.9, 0.5)
        lay.AddChild(hbar)
        
    app.AddLayout(lay)
}
Copy Run

Horizontal BarChart - Update Data

app.LoadPlugin('ChartJS')

function OnStart()
{
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout('Linear', 'VCenter, FillXY')
        
        data = {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
        	datasets: [
        	    {
            		label: 'Downloads',
            		backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"],
            		borderWidth: 0,
            		data: [5, 10, 20, 12, 15]
            	}
        	]
        }
        
        hbar = chart.CreateChart(data, 'horizontalBar', 0.9, 0.5)
        lay.AddChild(hbar)

        btn = app.CreateButton("UPDATE DATA")
        btn.SetOnTouch(UpdateData)
        lay.AddChild(btn)
        
    app.AddLayout(lay)
}

function UpdateData()
{
    var newData = [
        [5, 20, -5, 20, 10]
    ]

    hbar.updateData(newData)
}
Copy Run