I'm here because I'm in struggle with some sliders for my dataviz app.
I already did a chart with a slider and it work fine, but now I want to do the same with ColumnChart instead of LineChart... :
Here is the working code :
width={"100%"}
chartType="LineChart"
loader={<div>Loading Chart</div>}
data={[
["Date", "Value"],
[new Date(2000, 11, 26), 13],
[new Date(2000, 11, 27), 50],
[new Date(2000, 11, 28), 32],
//there is very much lines here but for simplicity i removed them
]}
options={{
// Use the same chart area width as the control for axis alignment.
interpolateNulls: false,
chartArea: { height: "80%", width: "90%" },
hAxis: { slantedText: false },
vAxis: { viewWindow: { min: 0, max: 55 } },
legend: { position: "none" },
colors: ['#f6c7b6']
}}
rootProps={{ "data-testid": "0" }}
chartPackages={["corechart", "controls"]}
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "LineChart",
chartOptions: {
chartArea: { width: "90%", height: "50%" },
hAxis: { baselineColor: "none" },
colors: ['green'],
},
},
},
controlPosition: "bottom",
controlWrapperParams: {
state: {
range: {
start: new Date(2000, 1, 1),
end: new Date(2000, 4, 6),
},
},
},
},
]}
/>
Here is the result : Here is the result
Now I want the same data but with ColumnChart,
I did that :
<Chart
width={"100%"}
chartType="ColumnChart"
loader={<div>Loading Chart</div>}
data={[
["Date", "Value"],
[new Date(2000, 11, 11), 32],
[new Date(2000, 11, 12), 5],
[new Date(2000, 11, 13), 46],
[new Date(2000, 11, 14), 31],
[new Date(2000, 11, 15), 17],
[new Date(2000, 11, 16), 17],
[new Date(2000, 11, 17), 6],
[new Date(2000, 11, 18), 43],
[new Date(2000, 11, 19), 11],
[new Date(2000, 11, 20), 44],
[new Date(2000, 11, 21), 44],
[new Date(2000, 11, 22), 37],
[new Date(2000, 11, 23), 43],
[new Date(2000, 11, 24), 26],
[new Date(2000, 11, 25), 13],
[new Date(2000, 11, 26), 50],
[new Date(2000, 11, 27), 32],
[new Date(2000, 11, 28), 25],
]}
options={{
// Use the same chart area width as the control for axis alignment.
interpolateNulls: false,
chartArea: { height: "80%", width: "90%" },
hAxis: { slantedText: false },
// vAxis: { viewWindow: { min: 0, max: 55 } },
legend: { position: "none" },
is3D: true,
colors: ['orange'],
}}
rootProps={{ "data-testid": "1" }}
chartPackages={["corechart", "controls"]}
/*
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "ColumnChart",
chartOptions: {
chartArea: { width: "90%", height: "50%" },
hAxis: { baselineColor: "none" },
},
},
},
controlPosition: "bottom",
controlWrapperParams: {
state: {
range: {
start: new Date(2000, 11, 1),
end: new Date(2000, 11, 6),
},
},
},
},
]}
*/
/>
And the result
But when I uncomment the code of time slider, i have a weird result :
weirdResult
What I missing ? how can i have the same kind of slider with ColumnChart ?
Thanks for any helps !
I'm working with React and React google Chart which is a wrapper for Google Chart
as noted in the reference for the ChartRangeFilter,
ColumnChart is not a valid chart type (see option --> ui.chartType)
try using ComboChart instead,
and set the seriesType chart option to bars
see following snippet...
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "ComboChart", // <-- use ComboChart
chartOptions: {
chartArea: { width: "90%", height: "50%" },
hAxis: { baselineColor: "none" },
seriesType: "bars", // <-- set series type
},
},
},
controlPosition: "bottom",
controlWrapperParams: {
state: {
range: {
start: new Date(2000, 11, 1),
end: new Date(2000, 11, 6),
},
},
},
},
]}
Related
I have a problem with google charts.
How to make padding between horizontal axil line and labels. And align them differently (first to right, last - to left) - so, they will be inside chart area
How can i remove vertical axis at the end of the chart and leave only zero axis.
code:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(this.drawBasic);
function drawBasic () {
let data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Date');
data1.addColumn('number', 'K/D');
data1.addRows([
[new Date(2016, 11, 11), 0], [new Date(2016, 11, 12), 10], [new Date(2016, 11, 13), 43], [new Date(2016, 11, 14), 20], [new Date(2016, 11, 15), 56],]);
let options1 = {
height: 125,
chartArea: {
left: 30,
top: 10,
right: 30,
bottom: 20
},
legend: {position: 'none'},
colors: ['#3ec8de'],
tooltip: {trigger: 'none'},
backgroundColor: 'transparent',
hAxis: {
format: 'dd.M',
gridlines: {
color: '#333',
},
ticks: [new Date(2016, 11, 11), new Date(2016, 11, 15)]
},
vAxis: {
gridlines: {
count: 3,
color: 'transparent',
}
},
crosshair: {trigger: 'both', orientation: 'vertical', color: '#b5b5b5'}
};
let chart1 = new google.visualization.LineChart(document.getElementById('overtime-chart1'));
chart1.draw(data1, options1);
}
Here the picture.
And this is link to codepen with code
This question already has an answer here:
Google Visualization Display Issue
(1 answer)
Closed 6 years ago.
Hi i'm getting Uncaught TypeError: google.visualization.LineChart in my console.
My code was working before today.
This is my full code of 2 google line chart:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Muli:400,400italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type='text/javascript'>//<![CDATA[
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
google.charts.setOnLoadCallback(drawChart2);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Month');
data.addColumn('number', "Total Donation Ratio");
data.addColumn('number', "Total Trophies");
data.addRows([
[new Date(2016, 1, 28, 1, 45), 0.4815, 48592],
[new Date(2016, 1, 28, 15, 01), 0.4963, 48693],
[new Date(2016, 1, 28, 16, 02), 0.4963, 48711],
[new Date(2016, 1, 28, 16, 02), 0.4963, 48711]
]);
var formatter = new google.visualization.DateFormat({pattern: 'd MMM, yyyy, hh:mm a'});
formatter.format(data,0);
var classicOptions = {
crosshair: { trigger: 'both' },
title: 'Total Donation Ratio and Total Trophies',
textStyle: {
fontName: 'Muli'
},
titleTextStyle: {
fontName: 'Muli'
},
height: 450,
series: {
0: { //Donation
targetAxisIndex: 0,
pointSize: 5,
lineWidth: 5,
curveType: 'function'
},
1: { //Trophies
targetAxisIndex: 1,
pointSize: 3,
lineWidth: 4,
curveType: 'function',
color: '#b8860b'
}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Donation Ratio'},
1: {title: 'Trophies'}
},
hAxis: {
title: 'Timeline (GMT +8)',
textStyle: {
fontName: 'Muli'
},
titleTextStyle: {
fontName: 'Muli',
fontSize: 18,
italic: false
}
},
vAxis: {
textStyle: {
fontName: 'Muli'
},
titleTextStyle: {
fontName: 'Muli',
fontSize: 20,
italic: true,
bold: true
}
}
};
var classicChart = new google.visualization.LineChart(chartDiv);
classicChart.draw(data, classicOptions);
}
// CHART 2
function drawChart2() {
var chartDiv2 = document.getElementById('chart_div2');
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Month');
data.addColumn('number', "Troops Donated");
data.addColumn({type: 'number', role:'annotation'});
data.addRows([
[new Date(2016, 1, 27, 16, 45), 73, 73],
[new Date(2016, 1, 27, 17, 15), 7, 7],
[new Date(2016, 1, 27, 18, 15), 60, 60],
[new Date(2016, 1, 27, 18, 45), 50, 50],
[new Date(2016, 1, 27, 20, 15), 56, 56],
[new Date(2016, 1, 27, 20, 45), 90, 90],
[new Date(2016, 1, 27, 21, 15), 20, 20],
[new Date(2016, 1, 27, 22, 15), 76, 76],
[new Date(2016, 1, 27, 22, 45), 10, 10],
[new Date(2016, 1, 27, 23, 15), 45, 45],
[new Date(2016, 1, 27, 23, 45), 6, 6],
[new Date(2016, 1, 28, 1, 45), 61, 61],
[new Date(2016, 1, 28, 15, 01), 652, 652],
]);
var formatter = new google.visualization.DateFormat({pattern: 'd MMM, yyyy, hh:mm a'});
formatter.format(data,0);
var classicOptions = {
//backgroundColor: '#f7f7f7',
legend: { position: 'top', alignment: 'start' },
title: 'Troops Donated in the Last 24 Hours',
textStyle: {
fontName: 'Muli'
},
titleTextStyle: {
fontName: 'Muli'
},
height: 250,
series: {
0: {
pointSize: 8,
lineWidth: 3,
curveType: 'function',
color: '#001f3f'
}
},
vAxes: {
0: {title: 'Troops Donated'},
},
hAxis: {
title: 'Timeline (GMT +8)',
textStyle: {
fontName: 'Muli'
},
titleTextStyle: {
fontName: 'Muli',
fontSize: 18,
italic: false
}
},
vAxis: {
viewWindow: {
min: [0]
},
textStyle: {
fontName: 'Muli'
},
titleTextStyle: {
fontName: 'Muli',
fontSize: 20,
italic: true,
bold: true
}
}
};
var classicChart2 = new google.visualization.LineChart(chartDiv2);
classicChart2.draw(data, classicOptions);
}
//]]>
</script>
</head>
<body>
<div id="chart_div2"></div>
<div id="chart_div"></div>
</body>
And here is my fiddler https://jsfiddle.net/4nsas23k/
I followed the examples from google charts documentation. Any idea what is wrong?
Just found out they had an update...
It appears that when we push out a new version, there are some hiccups
in the system until the changes fully propagate. We will be working to
fix this in the future, but for now, if you get these kinds of errors,
I suggest you refresh the page, flushing your cache if necessary. You
can also change 'current' to '43' or '44' and it will work more
reliably.
Changing it to 44 google.charts.load('44', worked for me!
Thanks to https://stackoverflow.com/a/35661581/1700554
I'm building an angular web app with highcharts integration (highcharts-ng)
What I did was set up a factory provider declaring my chart config options object as follows:
angular.module('socialDashboard')
.factory('SentimentChartFactory', function() {
var sentimentGraph = {
options: {
chart: {
type: 'area',
backgroundColor: false,
height: 450,
zoomType: 'x'
}
},
colors: ['#d1d5d8', '#954145', '#41a85f'],
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
gridLineWidth: 1
},
yAxis: {
title: {
text: 'Sentiment %'
},
gridLineWidth: 0,
labels:
{
enabled: false
}
},
series: [
{
name: 'Basic Neutral',
data: [
[Date.UTC(2014, 10, 10), 60],
[Date.UTC(2014, 10, 11), 55],
[Date.UTC(2014, 10, 12), 50],
[Date.UTC(2014, 10, 13), 60],
[Date.UTC(2014, 10, 14), 55],
[Date.UTC(2014, 10, 15), 60],
[Date.UTC(2014, 10, 16), 55],
[Date.UTC(2014, 10, 17), 50],
[Date.UTC(2014, 10, 18), 60],
[Date.UTC(2014, 10, 19), 55],
]
}
],
loading: false
};
return sentimentGraph;
});
I then set up a controller for my graphs where I pull the options object from my factory provider
angular.module('socialDashboard')
.controller('SentimentChartController', function ($scope, $http, SentimentChartFactory) {
// Set up chart on summary page
$scope.SentimentChartSummaryConfig = SentimentChartFactory;
$scope.SentimentChartSummaryConfig.options.chart.height = 250;
// Set up chart on Sentiment Page
$scope.SentimentChartConfigMain = SentimentChartFactory;
$scope.SentimentChartConfigMain.options.chart.height = 450;
});
This is where I declare my chart:
Summary Page:
<div ng-controller="SentimentChartController">
<highchart id="{{link + '_chart'}}" config="SentimentChartSummaryConfig"></highchart>
</div>
Sentiment Page: (Different view)
<div ng-controller="SentimentChartController">
<highchart id="{{link + '_chart'}}" config="SentimentChartConfigMain"></highchart>
</div>
The problem that I am having is that even though I declared a different value for the config atttribute both graphs are displaying as the same height (450). Why is this and how do I fix this?
The problem is because in both cases you deal with the same object, because both SummaryConfig and MainConfig are references to the same SentimentChartFactory object.
The simplest solution in this case is to make service return new object every time:
angular.module('socialDashboard')
.factory('SentimentChartFactory', function() {
return {
getConfig: function() {
return {
options: {
chart: {
type: 'area',
backgroundColor: false,
height: 450,
zoomType: 'x'
}
},
colors: ['#d1d5d8', '#954145', '#41a85f'],
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
gridLineWidth: 1
},
yAxis: {
title: {
text: 'Sentiment %'
},
gridLineWidth: 0,
labels: {
enabled: false
}
},
series: [{
name: 'Basic Neutral',
data: [
[Date.UTC(2014, 10, 10), 60],
[Date.UTC(2014, 10, 11), 55],
[Date.UTC(2014, 10, 12), 50],
[Date.UTC(2014, 10, 13), 60],
[Date.UTC(2014, 10, 14), 55],
[Date.UTC(2014, 10, 15), 60],
[Date.UTC(2014, 10, 16), 55],
[Date.UTC(2014, 10, 17), 50],
[Date.UTC(2014, 10, 18), 60],
[Date.UTC(2014, 10, 19), 55],
]
}],
loading: false
}
}
};
});
and then use it like:
$scope.SentimentChartSummaryConfig = SentimentChartFactory.getConfig();
$scope.SentimentChartSummaryConfig.options.chart.height = 250;
$scope.SentimentChartConfigMain = SentimentChartFactory.getConfig();
$scope.SentimentChartConfigMain.options.chart.height = 450;
I am trying to created stacked columns in Highstock. in following js fiddle.
The code is
//http://jsfiddle.net/nishants/y0t130f3/2/
$(function () {
$('#container').highcharts('StockChart',{
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: [new Date(2014, 5, 30).getTime()/1000,new Date(2014, 5, 29).getTime()/1000,new Date(2014, 5, 28).getTime()/1000,new Date(2014, 5, 27).getTime()/1000,new Date(2014, 5, 26).getTime()/1000,new Date(2014, 5, 25).getTime()/1000,new Date(2014, 5, 24).getTime()/1000,new Date(2014, 5, 23).getTime()/1000,new Date(2014, 5, 22).getTime()/1000,new Date(2014, 5, 21).getTime()/1000,new Date(2014, 5, 20).getTime()/1000,new Date(2014, 5, 19).getTime()/1000,new Date(2014, 5, 18).getTime()/1000,new Date(2014, 5, 17).getTime()/1000,new Date(2014, 5, 16).getTime()/1000,new Date(2014, 5, 15).getTime()/1000,new Date(2014, 5, 14).getTime()/1000,new Date(2014, 5, 13).getTime()/1000,new Date(2014, 5, 12).getTime()/1000,new Date(2014, 5, 11).getTime()/1000 ]
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '' + this.x + '' +
this.series.name + ': ' + this.y + '' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2,5, 3, 4, 7, 2,5, 3, 4, 7, 2,5, 3, 4, 7, 2,]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1,2, 2, 3, 2, 1,2, 2, 3, 2, 1,2, 2, 3, 2, 1,]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5,3, 4, 4, 2, 5,3, 4, 4, 2, 5,3, 4, 4, 2, 5,]
}]
});
});
The code on x axis should be dates from 11/05/2014 to 30/05/2014 . I tried all new Date
unix time stamp and unix time stamp /1000. but nothing works. What I want to achieve is
very straight forward => How to put the dates on x axis of highstock.
Unlike HighCharts, I don't think HighStock support the xAxis.categories config.
However, you could specify the dates directly in serie.data like this:
{
name: 'John',
data: [
[new Date(2014, 5, 11).getTime(), 5],
[new Date(2014, 5, 12).getTime(), 3],
[new Date(2014, 5, 13).getTime(), 4],
...
]
}
And the dates must be in ascending order, otherwise the chart will be broken.
Another thing is you might want to set this to make columns align with date labels correctly.
plotOptions: {
column: {
...
dataGrouping: {
enabled: true,
forced: true,
units: [
['day', [1]]
]
}
}
},
Example JSFiddle: http://jsfiddle.net/1xLny72q/2/
Hope this helps.
When we make Highstock graph by series then we can't pass x-axis seprated data as per like Highchart
like in your code
xAxis: {
categories: [new Date(2014, 5, 30).getTime()/1000,new Date(2014, 5, 29).getTime()/1000,new Date(2014, 5, 28).getTime()/1000,new Date(2014, 5, 27).getTime()/1000,new Date(2014, 5, 26).getTime()/1000,new Date(2014, 5, 25).getTime()/1000,new Date(2014, 5, 24).getTime()/1000,new Date(2014, 5, 23).getTime()/1000,new Date(2014, 5, 22).getTime()/1000,new Date(2014, 5, 21).getTime()/1000,new Date(2014, 5, 20).getTime()/1000,new Date(2014, 5, 19).getTime()/1000,new Date(2014, 5, 18).getTime()/1000,new Date(2014, 5, 17).getTime()/1000,new Date(2014, 5, 16).getTime()/1000,new Date(2014, 5, 15).getTime()/1000,new Date(2014, 5, 14).getTime()/1000,new Date(2014, 5, 13).getTime()/1000,new Date(2014, 5, 12).getTime()/1000,new Date(2014, 5, 11).getTime()/1000 ]
},
its not work in HighStock
for this you need to pass these each separate value on each series like below
{
name: 'John',
data: [
[new Date(2014, 5, 11).getTime(), 5],
[new Date(2014, 5, 12).getTime(), 3],
...
]
},name: 'Jane',
data: [
[new Date(2014, 5, 11).getTime(), 2],
[new Date(2014, 5, 12).getTime(), 3],
...
])
}, {
name: 'Joe',
data: [
[new Date(2014, 5, 11).getTime(), 5],
[new Date(2014, 5, 12).getTime(), 4],
...
]}
and as per #ranTarm dates must be in ascending order and dataGrouping as mention in his comment
I have chart that has both splines and a columnrange which ideally would be inverted so the bars run horizontal and the xAxis values will be on the y axis.
See current code at jsfiddle.
Relevant part of code:
$(function () {
$('#container').highcharts({
chart: {
//type: 'spline'
//inverted: true,
},
credits: {
enabled: false
},
title: {
text: 'Polygon Graph: 109470 - North Penrith'
},
xAxis: [{
type: 'datetime',
}, {
type: 'category',
categories: ['Planning', 'Bulk Earthworks', 'DA Design', 'CC Design']
}],
yAxis: [{
opposite: true,
labels: {
format: '${value:,.0f}'
},
title: {
text: 'Value ($)'
},
min: 0
}, {
type: 'datetime',
}],
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
var d = new Date(this.y);
return d.getDate();
}
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %b %y', this.x) + ': ' + ' $' + this.y;
}
},
series: [{
name: 'Expected Costs',
data: [
[Date.UTC(2013, 9, 29), 145000],
[Date.UTC(2013, 10, 6), 140000],
[Date.UTC(2013, 10, 13), 133000],
[Date.UTC(2013, 10, 20), 125000],
[Date.UTC(2013, 10, 27), 116000],
[Date.UTC(2013, 11, 3), 106000],
[Date.UTC(2013, 11, 10), 101000],
[Date.UTC(2013, 11, 17), 96000],
[Date.UTC(2013, 11, 24), 94000],
[Date.UTC(2013, 12, 1), 82000],
[Date.UTC(2013, 12, 8), 70000],
[Date.UTC(2013, 12, 15), 58000],
[Date.UTC(2013, 12, 22), 33000],
[Date.UTC(2013, 12, 29), 8000],
],
color: 'red'
}, {
name: 'Actual Costs',
data: [
[Date.UTC(2013, 9, 29), 135000],
[Date.UTC(2013, 10, 6), 133000],
[Date.UTC(2013, 10, 13), 125000],
[Date.UTC(2013, 10, 20), 116000],
[Date.UTC(2013, 10, 27), 104000],
[Date.UTC(2013, 11, 3), 89000],
[Date.UTC(2013, 11, 10), 84000],
[Date.UTC(2013, 11, 17), 78000],
//[Date.UTC(2013,11,24),75000 ],
// [Date.UTC(2013,12,1),64000 ],
// [Date.UTC(2013,12,8),59000 ],
// [Date.UTC(2013,12,15),50000 ],
// [Date.UTC(2013,12,22),25000 ],
// [Date.UTC(2013,12,29),0 ]
],
color: 'green'
}, {
name: 'Projected Costs',
data: [
//[Date.UTC(2013,9,29),135000 ],
// [Date.UTC(2013,10,6),133000 ],
// [Date.UTC(2013,10,13),125000 ],
// [Date.UTC(2013,10,20),116000 ],
// [Date.UTC(2013,10,27),104000 ],
// [Date.UTC(2013,11,3),89000 ],
// [Date.UTC(2013,11,10),84000 ],
[Date.UTC(2013, 11, 17), 78000],
[Date.UTC(2013, 11, 24), 75000],
[Date.UTC(2013, 12, 1), 64000],
[Date.UTC(2013, 12, 8), 59000],
[Date.UTC(2013, 12, 15), 50000],
[Date.UTC(2013, 12, 22), 25000],
[Date.UTC(2013, 12, 29), 0]
],
dashStyle: 'longdash'
}, {
name: 'Gantt',
type: 'columnrange',
//inverted: true,
xAxis: 1,
yAxis: 1,
data: [
[Date.UTC(2013, 9, 29), Date.UTC(2013, 9, 30)],
[Date.UTC(2013, 9, 30), Date.UTC(2013, 10, 17)],
[Date.UTC(2013, 10, 18), Date.UTC(2013, 10, 30)],
[Date.UTC(2013, 10, 30), Date.UTC(2013, 11, 17)]
],
}]
});
I have tried starting from a columnrange chart and building it from there, however that results in the spline values graphing from smallest to largest (even with a reverse option). This meant it seemed like a better idea to add the columnrange to the spline base.
I'm stuck it seems like highcharts should be able to do this.
How do I get the columnrange to be horizontal while still maintaining the rest of the layout of the graph?
Unfortunatley when you use inverted options then axis are flipped and all series are inverted. It is default behaviour. You cannot combine inverted and not inverted series.