score:0
There is no good easy direct way to do it (afaik).
There are a variety of approaches you could take, however.
This example uses a reversed axis and stacked columns:
http://jsfiddle.net/jlbriggs/JVNjs/301/
stacking:'normal',
It relies on adding a second series that is the difference between your value and the max, which means you must also specify a y axis max.
I left the second series a light grey so you can see them, but you can set their opacity to 0 so that they are invisible.
Other options might include doing some calculations on the y axis label formatter to display the axis labels as you want without having to touch the data.
score:0
Highcharts provides an option for this called reversed setting it true will do the work for you.
http://api.highcharts.com/highcharts#yAxis.reversed
reversed: true
here is the jsfiddle http://jsfiddle.net/bmbhD/
score:2
You can use reversed yAxis, and column series, where each point will have y
and low
values, where low
values are the same as the lowest number. See: http://jsfiddle.net/JVNjs/303/
var max = 10;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Chart Title'
},
credits: {
enabled: false
},
yAxis: {
min: 0,
max: max,
tickInterval: 2,
reversed: true
},
series: [{
type: 'column',
data: [{
y: 1,
low: max
}, {
y: 3,
low: max
}, {
y: 6,
low: max
}]
}]
Source: stackoverflow.com
Related Query
- Highcharts with inverted y-axis, but not inverted data?
- Highcharts highstock x axis max/min not working with 3+ data elements
- In Highcharts How to keep rectangle such SVG elements attached with series data but not with pixel when resize,reflow,redraw,zooming in out?
- Highcharts code with same set of code/data works in PHP but does not work in JSfiddle
- Highcharts - Global configuration with common code and unique data & Headings
- Highcharts x axis date full range even if there is not enough data
- How to populate a Highcharts axis with string formatted data from a PHP array
- Highcharts not displaying series data for graph with multiple Y-axes
- HighCharts scatter plot with Datetime on X Axis not plotting values correctly
- How can I force ticks/grid lines on a Highcharts datetime X axis to arbitrarily line up with data points?
- Gauge Series of Highcharts with React not the Solid Gauge but Gauge Series
- Line not rendered with data in variable but rendering with array data
- highcharts Scatter Chart not loading with LOTS of data
- How to make the Y Axis values not start from 0 in highcharts? How to display forcefully display the last category data on X axis in HighCharts ?
- Generating Highcharts from MySQL data with PHP does not work
- Highcharts multiple x axis and yaxis. The width of the 1st x-axis is not in sync with browser resize
- Highcharts data from a variable is not working but from works fine from an array
- Highcharts not displaying data but drawing chart when reading from CSV file
- not able to show x axis data with datetimelabel format with {hh:mm} in high charts
- highcharts datetime data not working on column type, but working on line
- Highcharts series visibility with csv data source
- Highcharts heat map does not work with a wide range of data values (min: 0, max: 5,000,000)
- Dates not displaying correctly in Highcharts plot with irregular time data
- Highcharts stock chart not showing up with custom data
- How to have multiple highcharts with different series data in vuejs without repeating code
- Generate highcharts from v-for not populating all graphs with data
- Multiple charts with same data not loading in same page: Highcharts
- Highcharts Highmaps the data does not match with polygons correctly
- HighCharts angular not working with dynamic data from Angular service
- Highcharts cloud issue with data source when duplicating chart
More Query from same tag
- HighStock with Django: help me render
- Is it possible to center the labels and data points between the ticks in a datetime xAxis for Highcharts?
- how to create a world map using highmaps and disable part of legend?
- Remove Highcharts x-axis label thousands separator
- Timezone on Highcharts
- Tooltip issue on columnrange highchart
- High chart problwm with multiple axes with dynamic data
- Plot time on Y-axis and users on X-axis Highcharts
- Highcharts long labels
- How to add bubble event in bubble higharts
- Highcharts remove() Inconsistencies
- Tooltip in Scatter
- My Highchart graphs are really slow when I choose 30 day graphs
- Drawing a small vertical line on top of chart using High charts by specifying end coordinates
- plot area width and height in HighCharts
- Does Angular 4 supports highcharts-angular (Highcharts wrapper for Angular)?
- HighCharts timezone issues on AngularJs
- Change chart type and redraw with multiple series in Highcharts
- Trouble parsing XML into JSON - Javascript
- Highcharts Grouped Column Chart with Multiple Groups?
- Highcharts - Column width not responsive
- Chart can't be populated from data component [vue-highcharts wrapper]
- Incrementing a date by the {point.x} value in Highcharts
- How to Change marker symbol and dataLabel with custom style in Highcharts
- Activity gauge High Chart with Range option
- how to format flot char yaxis by value seconds in highcharts?
- Offset displayed data 4 hours forward on HighCharts x axis
- Is highcharts sparkline with multiple series possible?
- Pointplacement for a column when two columns are shown in same chart
- SQL query for a graphic chart. Not sure about how to use JOIN in this case