A horizontal bar chart, the same as bar chart, provides a way of showing data values represented as bars but displayed horizontally.
You just have to pass "horizontalBar" for the type argument. For data and options arguments, refer to the samples below.
Samples
var data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [{ label: 'Downloads', backgroundColor: "#E91E63", borderColor: "#C2185B", borderWidth: 1, data: [5, 10, -4, 12, 15] }] }
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] } ] }
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) }
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) }
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) }
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) }