Bar Charts

Bar charts are similar to rotated column charts.

By default, items on the Y axis start from the bottom of the chart, so the first items appear at the bottom and the last at the top.

If you reverse the Y axis, items will start at the top of the, which is often a more natural order:

ExpensesSales05001,0001,5002,0002,5003,0003,5004,0004,5005,0005,5006,0006,5007,0007,5008,0008,5009,000USMexicoGermanyJapanChina
1
2
3
4
5
6
7
8
9
// This file locates: "Scripts/Lesson/C1FlexChart/BarCharts.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    // reverse Y axis
    document.getElementById('reverseY').addEventListener('click', function (e) {
        theChart.axisY.reversed = e.target.checked;
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: BarCharts
        public ActionResult BarCharts()
        {
            return View(Models.FlexChartData.GetSales2());
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.BarCharts_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexChart.BarCharts_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.BarCharts_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.BarCharts_Text3)
</p>
 
<div class="demo-settings">
    <label for="reverseY">@Html.Raw(Resources.C1FlexChart.BarCharts_Text4)</label>
    <input id="reverseY" type="checkbox" checked="checked">
</div>
 
@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.Bar)
    .AxisY(ab=>ab.Reversed(true))
    .Series(sb=>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
    })
)