trouble with categories on highcharts column chart - highcharts

I am having some difficulty getting my x-axis labels correct. i am using highcharts to draw a column chart, but instead of useing my catagories as labels, it uses numbers from 1 - however many plots points there are.
here is the code:
$('#bar').highcharts({
chart: {
borderColor: "#FFFFFF",
borderRadius: 2,
backgroundColor: "#D8D8D8",
renderTo: 'chartdiv3',
type: 'column'
},
title: { text: 'one year rain' },
xAxis: [{
type: "catagory",
catagories: [
'09/19',
'09/12',
'09/05',
'08/29',
'08/22',
'08/15',
'08/08',
'08/01',
'07/25',
'07/18',
'07/11',
'07/04',
'10/12'
],
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
},
title: {
text: 'week ending'
}
}],
yAxis: {
title: { text: 'inches'}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
// must move the month ahead because javascript indexes a month as a number between 0 and 11
series: [{
name: 'rain',
color: "#2E64FE",
type: "column",
data: [
0.0,
0.05,
0.2,
0.02,
1.48,
0.38,
1.75,
2.74,
1.07,
0.36,
2.72,
0.1,
0.0
]
}]
});
the plots look fine, but the labels both in the tooltip and at the bottom for the x-axis just show numbers 1-12.
i appreciate any tips here. I have searched everywhere.


You spelled "categories" incorrectly.
Something like this should work:
categories: ['Apples', 'Bananas', 'Oranges']

Related

Highcharts stacked column is cut off

The first stack of my column chart is not fully visible.
The only solution I found was to add a max value on the y-axis.
Bu that is not an ideal solution because the max remains even when I disable a series by clicking on it in the legend.
Here is an JSFiddle example.
{
chart:{
type: 'column'
},
plotOptions: {
column: {
stacking:"normal",
grouping: false
}
},
yAxis: {
title: {
text: ""
},
labels: {
},
allowDecimals:true,
gridLineColor:"#DDDDDD",
endOnTick:false,
max:null
},
xAxis:{
type: "datetime",
min:1609459200000,
softMax:1638316800000,
dateTimeLabelFormats: {month:"%b",year:"%Y"},
labels: {y:20},
title:{text:null},
gridLineColor:"#DDDDDD"
},
series:[{
name:"Solar power",
data:[{
x:1609455600000,y:40.328},{x:1612134000000,y:108.824},{x:1614553200000,y:58.224}],
color: "rgba(255, 174, 1, 1)",
id:"del-solarPhotovoltaic"
},
{
name:"Delivered Electricity",
data:[{x:1609455600000,y:327.583405},{x:1612134000000,y:238.927913},{x:1614553200000,y:54.12531}],
color:"rgba(96, 189, 104, 1)",
id:"del-electricity"
},
{
name:"Natural gas",
data:[{x:1609455600000,y:4073.892843},{x:1612134000000,y:2768.81114}],
color:"rgba(93, 165, 218, 1)",
id:"del-naturalGas"
},
{
name:"Exported Electricity",
data:[{x:1609455600000,y:-19.093318},{x:1612134000000,y:-68.414876},{x:1614553200000,y:-37.718392,}],
color:"rgba(96, 189, 104, 1)",
id:"exp-electricity"
}]
}

This happens because your x-axis min value: 1609459200000 is greater than the first data point x value: 1609455600000 and Highcharts doesn't take into account the first column when calculating y-axis extremes (treated as if it were outside the chart).
Similar situation presented here: http://jsfiddle.net/BlackLabel/b1oucLne/
xAxis: {
min: 4,
max: 40
},
series: [{
type: 'column',
data: [{
x: 2,
y: 4073.892843
}, {
x: 6,
y: 2768.81114
}]
}]
As a solution reduce or remove xAxis.min property.

Highstock: how to define and make the x and y axes visible?

I am trying to make the y-axis visible using various ways, but every time I change the color of the axis the color of the whole graph i.e the series changes. Is there a way to make the y and x axes visible without changing the graph color.
xAxis: {
gapGridLineWidth: 0
},
yAxis: {
opposite:false,
},
navigator: {
enabled:false,
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false,
},

You should be able to change color of your axes without changing color of your series.
You can use tickColor, lineColor, gridLineColor and labels.style for setting colors of your label:
http://api.highcharts.com/highcharts/yAxis.lineColor
yAxis: {
lineColor: 'red',
gridLineColor: 'red',
tickColor: 'red',
labels: {
style: {
color: 'red'
}
}
},
xAxis: {
lineColor: 'red',
tickColor: 'red',
labels: {
style: {
color: 'red'
}
}
},
Here you can see an example how it can work: http://jsfiddle.net/c9bfmzsm/

Highcharts column chart with two different scales

Is there a way to have a column chart with two different scales. I have played with the example from highcharts but the result is still not perfect: https://jsfiddle.net/dfq4b6xz/
The problem is that the columns are not in the center of there each section
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {
categories: [
'cat1',
'cat2',
'cat3'
]
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
},
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [null,null, 198.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [null,null, 208.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}]
});
});

It's caused by setting different pointPlacement for series. I suggest to use default setting for that option: http://jsfiddle.net/dfq4b6xz/1/

You are specifically telling the chart to place the points in that manner, using the pointPlacement property:
pointPlacement: 0.2
and
pointPlacement: -0.2
Remove those lines altogether, and it works as it should:
http://jsfiddle.net/jlbriggs/dfq4b6xz/2/
[[EDIT - Pawel answered while I was typing my answer... same solution...]]

Rally chart - column layout issues

I'm having trouble getting the expected results in a chart in my Rally app. I'm trying to get an effect as seen in this jsFiddle example, with a series that creates a 'box' effect around two other series.
However, when I render it in my Rally app, the pointPadding and pointPlacement properties don't seem to be having any effect. Am I doing something wrong or is this a bug?
Highcharts Example (see jsFiddle)
Rally Example (see initializing code below)
Here's the code that initializes the chart in App.js:
myChart = Ext.create('Rally.ui.chart.Chart', {
id: 'myChart',
chartColors: ['#00B7E2', '#A6A6A6', '#747474'], //, '#00809E'],
chartData: {
categories: this.chartIterations,
series: [{
name: 'Planned',
data: [23, 65, 113, 131, 138], //me.chartPlannedBurnup,
pointPadding: 0.25,
pointPlacement: 0.15,
zIndex: 1
}, {
name: 'Actual',
data: [23, 65, 113, 131, 135], //me.chartActualBurnup,
pointPadding: 0.25,
pointPlacement: -0.15,
zIndex: 2
}, {
name: 'Hardening',
data: [33, 0, 0, 0, 145], //me.chartHardeningCol,
pointPadding: -.1,
pointPlacement: 0.0,
zIndex: 0,
enableMouseTracking: false
}]
},
chartConfig: {
chart: {
type: 'column'
},
title: {
text: 'Weekly Status Burnup By Release'
},
xAxis: {
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
}
},
tickmarkPlacement: 'on',
tickInterval: 1,
title: {
text: 'Sprints'
},
},
yAxis: {
title: {
text: 'Points'
},
maxPadding: 0.1
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
}
}
});

I believe Pawel is in track that this is related to differences in HighCharts versioning.
Rally's AppSDK uses Highcharts 2.3.5. Your fiddle is pointing to HighCharts' current version which is 3.0.1.
This Fiddle:
http://jsfiddle.net/markwrally/jB8gK/2/
Which is a fork of yours, but pointed to HighCharts 2.3.5:
<script src="http://code.highcharts.com/2.3.5/highcharts.js"></script>
<script src="http://code.highcharts.com/2.3.5/modules/exporting.js"></script>
seems to exhibit similar behavior to your screenshot from the Rally SDK.
I'll do some checking with Rally Engineering about plans/timing for when the SDK might be updated to use HighCharts 3.

Dates instead of values on Highchart labels in graph with multiple axis

I've created a line and a bar graph that share the xAxis. But for some reason it chooses to display the value instead of date, even though I am supplying it the standard way.
What am I missing here?
Fiddle: http://jsfiddle.net/ZfP84/
$(function () {
var options = {
chart: {
renderTo: 'container',
},
navigator:{
enabled:true
},
scrollbar: {
enabled:true
},
rangeSelector: {
enabled: true,
//selected: 1
},
xAxis: {
gridLineWidth: 1,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: [
{
height: 150,
lineWidth: 2,
offset: 0,
title: {
text: 'Price',
}
},
{
top: 225,
//lineWidth: 0,
//min: 0,
//max: 5,
gridLineWidth: 0,
offset: 0,
height: 100,
title: {
text: 'Volume',
}
},
],
series: [
{
yAxis: 0,
name: 'Price by time',
stack: 0,
//data: [1, 12, 32, 43],
data: [[1147651200000,67.79],[1147737600000,64.98],[1147824000000,65.26],[1147910400000,63.18],[1147996800000,64.51],[1148256000000,63.38],[1148342400000,63.15],[1148428800000,63.34],[1148515200000,64.33],[1148601600000,63.55],[1148947200000,61.22],[1149033600000,59.77],[1149120000000,62.17],[1149206400000,61.66],[1149465600000,60.00],[1149552000000,59.72],[1149638400000,58.56],[1149724800000,60.76],[1149811200000,59.24],[1150070400000,57.00],[1150156800000,58.33],[1150243200000,57.61],[1150329600000,59.38],[1150416000000,57.56],[1150675200000,57.20],[1150761600000,57.47],[1150848000000,57.86],[1150934400000,59.58],[1151020800000,58.83],[1151280000000,58.99],[1151366400000,57.43],[1151452800000,56.02],[1151539200000,58.97],[1151625600000,57.27],[1151884800000,57.95],[1152057600000,57.00],[1152144000000,55.77],[1152230400000,55.40],[1152489600000,55.00],[1152576000000,55.65],[1152662400000,52.96],[1152748800000,52.25],[1152835200000,50.67],[1153094400000,52.37],[1153180800000,52.90],[1153267200000,54.10],[1153353600000,60.50],[1153440000000,60.72],[1153699200000,61.42],[1153785600000,61.93],[1153872000000,63.87],[1153958400000,63.40],[1154044800000,65.59],[1154304000000,67.96],[1154390400000,67.18],[1154476800000,68.16],[1154563200000,69.59],[1154649600000,68.30],[1154908800000,67.21],[1154995200000,64.78],[1155081600000,63.59],[1155168000000,64.07],[1155254400000,63.65],[1155513600000,63.94],[1155600000000,66.45],[1155686400000,67.98],[1155772800000,67.59],[1155859200000,67.91],[1156118400000,66.56],[1156204800000,67.62],[1156291200000,67.31],[1156377600000,67.81],[1156464000000,68.75],[1156723200000,66.98],[1156809600000,66.48],[1156896000000,66.96],[1156982400000,67.85],],
tooltip: {
valueDecimals: 2
},
},
{
name: 'Volume by time',
yAxis: 1,
stack: 0,
data: [[1147651200000,67.79],[1147737600000,64.98],[1147824000000,65.26],[1147910400000,63.18],[1147996800000,64.51],[1148256000000,63.38],[1148342400000,63.15],[1148428800000,63.34],[1148515200000,64.33],[1148601600000,63.55],[1148947200000,61.22],[1149033600000,59.77],[1149120000000,62.17],[1149206400000,61.66],[1149465600000,60.00],[1149552000000,59.72],[1149638400000,58.56],[1149724800000,60.76],[1149811200000,59.24],[1150070400000,57.00],[1150156800000,58.33],[1150243200000,57.61],[1150329600000,59.38],[1150416000000,57.56],[1150675200000,57.20],[1150761600000,57.47],[1150848000000,57.86],[1150934400000,59.58],[1151020800000,58.83],[1151280000000,58.99],[1151366400000,57.43],[1151452800000,56.02],[1151539200000,58.97],[1151625600000,57.27],[1151884800000,57.95],[1152057600000,57.00],[1152144000000,55.77],[1152230400000,55.40],[1152489600000,55.00],[1152576000000,55.65],[1152662400000,52.96],[1152748800000,52.25],[1152835200000,50.67],[1153094400000,52.37],[1153180800000,52.90],[1153267200000,54.10],[1153353600000,60.50],[1153440000000,60.72],[1153699200000,61.42],[1153785600000,61.93],[1153872000000,63.87],[1153958400000,63.40],[1154044800000,65.59],[1154304000000,67.96],[1154390400000,67.18],[1154476800000,68.16],[1154563200000,69.59],[1154649600000,68.30],[1154908800000,67.21],[1154995200000,64.78],[1155081600000,63.59],[1155168000000,64.07],[1155254400000,63.65],[1155513600000,63.94],[1155600000000,66.45],[1155686400000,67.98],[1155772800000,67.59],[1155859200000,67.91],[1156118400000,66.56],[1156204800000,67.62],[1156291200000,67.31],[1156377600000,67.81],[1156464000000,68.75],[1156723200000,66.98],[1156809600000,66.48],[1156896000000,66.96],[1156982400000,67.85],],
tooltip: {
valueDecimals: 2
},
lineWidth: 3,
marker: {
enabled: false
},
type: 'column',
},
]
};
var chart = new Highcharts.Chart(options);
});

If you added the the "type" to the xAxis definition then the x values will be interpreted as dates and times rather than decimal values
xAxis: {
type : "datetime", //add this line
gridLineWidth: 1,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
you may have to fiddle with the start times and intervals to get HighChart to correctly interpret your x-values.
see this demo on the highchart website as an example. http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-time-series/

The reason is that you are not actually creating a Stock chart. Your code looks like:
var chart = new Highcharts.Chart(options);
If you want it to be a Stock chart do:
var chart = new Highcharts.StockChart(options);
A Chart by default is a category chart. StockChart is time-based.

You can use dateFormat to replace time in miliseconds with date.
http://jsfiddle.net/3bE4X/
formatter:function(){
return Highcharts.dateFormat('%d / %m / %Y',this.value);
}
http://api.highcharts.com/highcharts#Highcharts.dateFormat()

Resources