YouTip

## Highcharts Bar Charts In Highcharts, a **Bar Chart** is a variation of a column chart where the axes are flipped: the x-axis is displayed vertically on the left, and the y-axis is displayed horizontally at the bottom. This layout is highly effective for comparing data across categories, especially when category names are long or when you have a large number of data points. This tutorial covers the core concepts, configuration options, and practical implementations of different types of Highcharts bar charts. --- ## Types of Bar Charts Highcharts supports several variations of bar charts to suit different data visualization needs: | No. | Chart Type | Description | | :--- | :--- | :--- | | 1 | **Basic Bar Chart** | Compares individual values across different categories using horizontal bars. | | 2 | **Stacked Bar Chart** | Shows the relationship of individual items to the whole by stacking bars on top of each other. | | 3 | **Bar Chart with Negative Values** | Displays both positive and negative values, useful for comparing divergent datasets (e.g., population pyramids). | --- ## Core Configuration & Syntax To create a bar chart in Highcharts, you must set the `chart.type` property to `'bar'`. ```javascript Highcharts.chart('container', { chart: { type: 'bar' // Specifies that this is a bar chart }, title: { text: 'Chart Title' }, xAxis: { categories: ['Category A', 'Category B', 'Category C'] }, yAxis: { title: { text: 'Value Unit' } }, series: [{ name: 'Series 1', data: [5, 10, 15] }] }); ``` --- ## Code Examples ### 1. Basic Bar Chart The basic bar chart is ideal for comparing discrete categories. The horizontal orientation provides ample space for long category labels on the y-axis (which acts as the visual vertical axis). ```javascript Highcharts.chart('container', { chart: { type: 'bar' }, title: { text: 'Historic World Population by Region' }, subtitle: { text: 'Source: Wikipedia.org' }, xAxis: { categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], title: { text: null } }, yAxis: { min: 0, title: { text: 'Population (millions)', align: 'high' }, labels: { overflow: 'justify' } }, tooltip: { valueSuffix: ' millions' }, plotOptions: { bar: { dataLabels: { enabled: true // Displays values directly on the bars } } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -40, y: 80, floating: true, borderWidth: 1, backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF', shadow: true }, credits: { enabled: false }, series: [{ name: 'Year 1800', data: [107, 31, 635, 203, 2] }, { name: 'Year 1900', data: [133, 156, 947, 408, 6] }, { name: 'Year 2012', data: [1052, 954, 4250, 740, 38] }] }); ``` --- ### 2. Stacked Bar Chart Stacked bar charts allow you to break down the total value of a category into its contributing parts. You can configure stacking using the `plotOptions.series.stacking` property, setting it to either `'normal'` (absolute values) or `'percent'` (percentage distribution). ```javascript Highcharts.chart('container', { chart: { type: 'bar' }, title: { text: 'Stacked Bar Chart Example' }, xAxis: { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] }, yAxis: { min: 0, title: { text: 'Total Fruit Consumption' } }, legend: { reversed: true // Matches the visual stacking order of the bars }, plotOptions: { series: { stacking: 'normal' // Use 'percent' for percentage stacked bar charts } }, series: [{ name: 'John', data: [5, 3, 4, 7, 2] }, { name: 'Jane', data: [2, 2, 3, 2, 1] }, { name: 'Joe', data: [3, 4, 4, 2, 5] }] }); ``` --- ### 3. Bar Chart with Negative Values (Diverging Bar Chart) This variation is commonly used for population pyramids or comparing two opposing datasets (e.g., Male vs. Female, Income vs. Expense). ```javascript Highcharts.chart('container', { chart: { type: 'bar' }, title: { text: 'Population Pyramid' }, xAxis: [{ categories: ['0-19', '20-39', '40-59', '60+'], reversed: false, labels: { step: 1 } }], yAxis: { title: { text: null }, labels: { formatter: function () { return Math.abs(this.value) + '%'; // Displays negative values as positive percentages } } }, plotOptions: { series: { stacking: 'normal' } }, tooltip: { formatter: function () { return '' + this.series.name + ', age ' + this.point.category + '
' + 'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0) + '%'; } }, series: [{ name: 'Male', data: [-2.2, -2.1, -1.5, -0.8] // Negative values extend to the left }, { name: 'Female', data: [2.1, 2.0, 1.6, 0.9] // Positive values extend to the right }] }); ``` --- ## Key Considerations & Best Practices 1. **Label Readability**: If your category names are long, use a bar chart instead of a column chart. The horizontal layout prevents labels from overlapping or requiring rotation. 2. **Legend Order**: When using stacked bar charts, set `legend.reversed: true` so that the order of items in the legend matches the visual stacking order of the bars. 3. **Data Labels**: For basic bar charts with few categories, enabling `dataLabels` directly on the bars can make the chart easier to read without gridlines. 4. **Color Contrast**: Ensure that stacked series have distinct, high-contrast colors so users can easily differentiate between the segments.