score:3
I would approach this differently than morgan did, though that example is certainly useful.
I would do this as a standard bar chart, making use of multiple yAxis
objects (one for each series), which also allows for using the reversed
property of the left-facing series.
Code Example:
yAxis: [{
title: { text: null },
width: 200,
reversed: true
},{
offset: 0,
title: { text: null },
left: 300,
width: 200
}],
series: [{
yAxis: 0,
data: [...]
}, {
yAxis: 1,
data: [...]
}]
Fiddle:
Example Output:
score:2
An inverted columnrange chart combines with the cross-specific-values plugin is a way to go. A column range chart allows you to specify position of the columns and make the space for labels. The plugin moves the axis to the center of the chart.
Highcharts.chart('container', {
title: {
text: 'Butterfly Chart Example'
},
subtitle: {
text: '<a href="http://stackoverflow.com">stackoverflow.com</a>'
},
chart: {
type: 'columnrange',
inverted: true,
marginTop: 100
},
legend: {
verticalAlign: 'top',
y: 60,
x: -25,
itemDistance: 50
},
xAxis: {
categories: ['G7', 'A8', 'V9', 'V4', 'V3', 'V1', 'V5'],
crossing: 118,
lineWidth: 0,
tickLength: 0,
},
yAxis: {
gridLineWidth: 0,
tickInterval: 50,
min: 0,
max: 250,
lineWidth: 1,
title: {
text: null
}
},
plotOptions: {
series: {
grouping: false
}
},
series: [{
name: 'South',
color: 'blue',
data: [
[55, 100],
[60, 100],
[65, 100],
[55, 100],
[75, 100],
[52, 100],
[60, 100]
]
}, {
name: 'North',
color: 'orange',
data: [
[120, 170],
[120, 150],
[120, 175],
[120, 130],
[120, 125],
[120, 148],
[120, 145]
]
}]
});
example: http://jsfiddle.net/7d4mrhuv/
Source: stackoverflow.com
Related Query
- Butterfly Chart using Highcharts
- Highcharts display label for pie chart using html table as data source
- How to create a column range chart in Highcharts using range and navigator functions?
- How to display the value instead of percentage in a pie chart using jquery Highcharts
- Using html2canvas to render a highcharts chart to pdf doesn't work on IE and Firefox
- Using Highcharts and displaying a message over or on the chart when there is no data
- Not rendering VU-meter Gauge chart using HighCharts in Durandal
- How get data name in Highcharts pie chart legend instead of "Slice" using array of values?
- Update Chart Colors When Using Styled HighCharts Version
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- creating a bar chart using Highcharts with React - getting an error that rendering div isn't found
- Rails generates chart for .each do |x| using highcharts or any other chart API
- Timeline chart with highcharts using x-range with multiple stacks
- Issues using highcharts node export server from ClojureScript - "0x03 error when performing chart generation"
- Using Trellis Chart with Stacked Columns in Highcharts
- display pie chart using highcharts api and mysql
- HighCharts Stock Chart error code 18
- Using wkhtmltopdf with highcharts shows blank chart
- Passing in Id for each data item in bar chart using highcharts
- Highcharts visualizes chart data incorrectly after zooming or using the navigator
- Highcharts - update chart using ajax
- Django Chart using Highcharts
- Why do I have the issue 'property assigment expected' when I want to display a chart on my web page using highcharts
- 24-Hour Time Event Chart using HighCharts
- Creating depth chart using highcharts and creating bids and asks in such a way that bids and asks are created from center of chart
- How to hardcode chart data in my Model then have my Controller pull it from there to display it. Using Highcharts
- How set options from HIGHCHARTS in a chart using vue chartkick
- Drawing Bubble Chart by using npm highcharts with error #17
- How can I make milestone lines with a GANTT chart using the highcharts library?
- Rendering more than one chart with Highcharts using Angular js Directives
More Query from same tag
- Show specific data in the highchart's title
- highcharts - do not show zeroes in labels and format
- HighCharts: Resize markers of scatter chart dynamically
- How to give time labels consistently in polar highcharts?
- Meteor + React + Highchart
- highchart exporting with phantomjs implementation
- HighCharts activity gauge populated with series data from a function
- Link two series object in Highcharts and add event
- Highcharts spline chart points not showing unless zoomed in
- How to make a Highcharts semi-circle donut chart using Hightchart-ng
- Angular 4 cannot used data from http post response to highchart
- Highcharts zooming on x-axis with specific labelling
- Is is possible to change line color in highchart xy plot for specific y range only?
- How do I redraw a series on HighCharts?
- Highcharts: How to set unique images on top of bar chart serie
- Highmaps label centering in irregular path
- highstock x-axis is always time
- Highchartjs doesn't render properly with the data
- Apply Background Image to A Column
- How to assign chart title as exporting filename?
- How to remove the white outline/border on Highcharts 3D on setData?
- Highcharts API legend doesnt appear
- Highchart generate array series
- How can i draw a high chart with two labels in x coordinate using highchart
- Highcharts export: Unable to export rendered arc colors
- Get Highcharts width
- Use the "step" label option in Highcharts, starting at the end of the xaxis
- How to open credits url of highcharts in new tab
- Highcharts two series, each is stacked area
- Highcharts Heatmap Edit Legend