score:62
Vertical bar charts are called column
's in Highchart.
Change this:
type: 'column' //was 'bar' previously`
See example here: http://jsfiddle.net/aznBb/
score:1
You should try something like this:
$(function () {
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: false
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '°C';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
}]
});
});
score:18
To expand on Moin Zaman's answer, I played with his jsfiddle http://jsfiddle.net/aznBb/ and found this.
This is horizontal.
chart: {
type: 'bar',
inverted: false // default
}
This is also horizontal.
chart: {
type: 'bar',
inverted: true
}
This is vertical.
chart: {
type: 'column',
inverted: false // default
}
This is horizontal and apparently identical to the bar charts.
chart: {
type: 'column',
inverted: true
}
Very odd. I can only guess that type: 'bar'
aliases type: 'column'
and forces inverted: true
no matter what it's actually set at. It'd be nice if it just toggled the inverted
boolean.
Source: stackoverflow.com
Related Query
- How do I rotate my HighCharts bar chart so its vertical, not horizontal?
- How to add a horizontal line in Column bar chart in Highcharts plugin?
- How to modify the code so that Highcharts graph does not cover fixed navigation bar at the top of the page?
- How can I put text within horizontal bar chart data points using Highcharts as well as adding text underneath each data point? Example below:
- Highcharts stacked bar chart hide data labels not to overlap
- Highcharts Bar Chart - How to set the minimum bar width/length
- Highcharts stacking bar chart border not displaying on right side
- How to place x axis labels on top of horizontal bar chart
- Highcharts Bar Chart Zoom not working
- highcharts minPointLength do not work for unstacked bar chart
- Highcharts vertical stacked bar chart with negative values, is it possible?
- How to Make a Dashed Bar Chart Border in Highcharts
- How to have a highcharts chart in a container of a fixed width, and with a horizontal scrollbar?
- How to change color of bar in column chart with different level of percentage in highcharts
- How to remove decimal values on x-axis of bar chart : Highcharts
- How to set vertical bar chart in Hightcharts | I passed as component. How to send as props
- How to resize bar chart based on no of x axis categories in HighCharts
- Vertical line within bars of a stacked bar chart using recharts or highcharts
- How to make split grouped column bar chart in highcharts with percentage?
- HighCharts line series not displaying properly with stacked bar combo chart
- Highcharts Bar Chart - Labels Not Appearing in Bar
- Highcharts single horizontal stacked bar chart with data names (labels) and %-ages always shown and data numbers and series name shown on mousehover
- How to fix the width of bar in waterfall chart as well as its x-axis width of one group.?
- How can i load external json data in highcharts to show the bar chart
- How can I prepare a Group Stacked Bar Chart in Highcharts using multiple and different types of data?
- How to make a HighCharts drilldown column/bar chart that does not hide the non-drilldown categories
- Highcharts - Column Chart Drilldown, how to change the drilldown bar color based on some value
- How can I get HighCharts column chart to scale the yAxis to not have so much whitespace?
- Highcharts Chart Bar - How can I display in the chart, only one column from my HTML table?
- How can I draw Highcharts horizontal stacked bar with date-time duration
More Query from same tag
- My css tooltip on highcharts title not working
- Pass Chart Mouse events to formatted labels
- Optimal way to display data with uneven time interval Highcharts
- Adding HTML label to Highcharts
- Highcharts get series data zoom indices
- How to hide specific dots and labels onmouseover in highcharts
- Highcharts: Is it possible to have a single series exist in multiple stacks in a grouping
- Highcharts generated from HTML table: Can't add second yAxis dynamically
- Setting a custom variable in Highcharts
- How do you get a colorByPoint appearance in Highcharts without coloring all the bars in a group the same color?
- Dynamically setting xAxis rotation in high charts API
- How to add comma formated labels for Y-axis in Highcharts?
- Highcharts - Solid Gauge - Inconsistent Styling and Improper Values
- High Charts not working
- When adding a point to a series, the marker does not display (It's hidden by other area splines)
- Drawing a simple graph using projected lines
- Is it possible to have an adjustable line in highcharts stack area graph?
- how to use object as series for Highcharts
- Highcharts data label on last point of series not displayed
- how to show text in center in highcharts?
- Semi-circle donut pie chart with labels (data names) and %-ages on the pie ... and data numbers on mousehover
- Aurelia and importing and using Highcharts X-range
- MultiBarChart with HighCharter in shiny app
- Understanding javascript event handling and ajax requests
- removing pie chart outline text
- minPadding doesn't work
- Show two data labels in plotting column?
- Highcharts - Reset zoom in synchronised charts
- Creating dynamic Highcharts based on an array
- Highstock: Hover-over Tooltip format