# Range Bar/Column Charts with FlexChart

Learn how to create range bar and column charts using Wijmo's FlexChart component in this documentation topic

## Content

By default, Bar and Column charts show values extending from zero to a given value. Range Bar and Column charts use two bindings so you can specify where each bar or column starts and ends.

To create range bar/column charts with FlexChart, set the __binding__ for a series to two fields separated by a comma.

Range Column Example:
```JavaScript
import * as chart from '@mescius/wijmo.chart';

var myChart = new chart.FlexChart('#myChart', {
    itemsSource: getData(),
    bindingX: 'country',
    chartType: 'Column',
    series: [{ binding: 'num1,num2' }]
)};
```
![Range Column Chart](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-range-column.png)

Range Bar Example:
```JavaScript
import * as chart from '@mescius/wijmo.chart';

var myChart = new chart.FlexChart('#myChart', {
    itemsSource: getData(),
    bindingX: 'name',
    chartType: 'Bar',
    series: [{ binding: 'start,end' }],
    axisY: {
            majorGrid: false,
            minorGrid: true,
            reversed: true
        }
)};
```
![Range Bar Chart](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-range-bar.png)