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
Related
I need help about the xaxis ticks label..again..I am stuck with this problem.
I want to hide the xaxis ticklabel and bar when data is 0.
$(function() {
var statement = [
[gd(2018, 6, 1), 0],
[gd(2018, 6, 2), 2000000],
[gd(2018, 6, 3), 240000000],
[gd(2018, 6, 4), 260000000],
[gd(2018, 6, 5), 280000000],
[gd(2018, 6, 6), 300000000],
[gd(2018, 6, 7), 320000000],
[gd(2018, 6, 8), 0],
[gd(2018, 6, 9), 0],
[gd(2018, 6, 10), 0],
[gd(2018, 6, 11), 0],
[gd(2018, 6, 12), 0],
[gd(2018, 6, 13), 0],
[gd(2018, 6, 14), 0],
[gd(2018, 6, 15), 0],
[gd(2018, 6, 16), 0],
[gd(2018, 6, 17), 0],
[gd(2018, 6, 18), 0],
[gd(2018, 6, 19), 0],
[gd(2018, 6, 20), 0],
[gd(2018, 6, 21), 0],
[gd(2018, 6, 22), 0],
[gd(2018, 6, 23), 0],
[gd(2018, 6, 24), 0],
[gd(2018, 6, 25), 0],
[gd(2018, 6, 26), 0],
[gd(2018, 6, 27), 0],
[gd(2018, 6, 28), 0],
[gd(2018, 6, 29), 0],
[gd(2018, 6, 30), 0]
];
var dataset = [{
label: "Electricity Consumption",
data: statement,
color: "#ffa500",
bars: {
show: true,
align: "center",
barWidth: 24 * 60 * 60 * 600,
lineWidth: 1
}
}];
var options = {
xaxis: {
mode: "time",
tickSize: [1, "day"],
timeformat: "%d %b",
tickLength: 0,
rotateTicks: 135,
axisLabel: "",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 8,
axisLabelFontFamily: "Verdana, Arial",
axisLabelPadding: 5,
color: "black"
},
yaxes: [{
position: "left",
color: "black",
axisLabel: "Usage",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Verdana, Arial",
axisLabelPadding: 3,
tickDecimals: 0,
tickFormatter: function numberWithCommas(x) {
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}
}],
legend: {
container: $("#legendContainer"),
noColumns: 2,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 1,
backgroundColor: {
colors: ["#ffffff", "#EDF5FF"]
}
}
};
$.plot($("#placeholder"), dataset, options);
function gd(year, month, day) {
console.log(Date.UTC(year, month - 1, day), new Date(Date.UTC(year, month - 1, day)));
return Date.UTC(year, month - 1, day);
}
});
This is the corresponding jfiddle (courtesy of Raidri).
I want to hide label from July 8-31 since usage is 0 but still show July 1.
Is there a way to do this? I only this setting
xaxis: {show:false}
To show only some tick labels you can use a conditional tickFormatter function for the x axis, for example
tickFormatter: function (tickValue, axis) {
// looking for datapoint at this tick
var value = dataset[0].data.find(dp => dp[0] == tickValue);
if ((tickValue == dataset[0].data[0][0]) || (value && value[1] > 0.0)) {
// first tick on the axis or a tick where the value is greater zero
var tickDate = new Date(tickValue);
// manually setting the tick format
return (tickDate.getDate() < 10 ? ('0' + tickDate.getDate()) : tickDate.getDate()) + '<br />' + monthNames[tickDate.getMonth()];
}
else {
return '';
}
}
See this updated fiddle for the full example.
I have a highcharts which appears to show one day too many in the x-axis. This occurs when I set endOnTick to true, and if I instead set endOnTick to false the x-axis seems to be wrongly aligned (not in center, as if there were to be another tick that's supposed to be there). As you can see from my fiddle I am using moment.js to set the min/max dates, but startOf('month') works fine and endOf('month') should show the last day of the month, shouldn't it? I've tried to set UTC to false as you can see in the fiddle, but that didn't work. I am sorry if I'm missing something obvious here but I am quite new to both Highcharts and moment.js so please be patient with me :) Any tips would be appreciated.
Here is my code:
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var myChart = $('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: moment().format('MMMM') + ' ' + moment().format('YYYY')
},
xAxis: {
title: {
text: 'DATE'
},
type: 'datetime',
endOnTick: true,
tickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: {
day: '%e'
},
min: moment().startOf('month'),
max: moment().endOf('month')
},
yAxis: {
title: {
text: null
},
max: 4,
min: 1,
allowDecimals: false,
tickInterval: 1
},
plotOptions: {
series: {
marker: {
symbol: 'circle'
},
animation: false
}
},
series: [{
data: [
[Date.UTC(2017, 6, 25), 3.2],
[Date.UTC(2017, 7, 1), 2],
[Date.UTC(2017, 7, 5), 1.75],
[Date.UTC(2017, 7, 10), 2.4],
[Date.UTC(2017, 7, 15), 2.7],
[Date.UTC(2017, 7, 23), 2.3],
[Date.UTC(2017, 7, 28), 3],
[Date.UTC(2017, 7, 31), 2]
]
}, {
data: [
[Date.UTC(2017, 7, 1), 3],
[Date.UTC(2017, 7, 5), 2.75],
[Date.UTC(2017, 7, 10), 3.2],
[Date.UTC(2017, 7, 15), 2.3],
[Date.UTC(2017, 7, 23), 3.3],
[Date.UTC(2017, 7, 28), 1.5]
]
}],
legend: {
enabled: false
},
exporting: {
enabled: false
},
})
}
)
And here is a fiddle with the same code: https://jsfiddle.net/t0eeab8b/1/
Thanks in advance!
I'm using Jquery Flot to plot my charts, and now I want to pass a specific one to Highchart.
This is my Chart using Jquery Flot
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 15]];
var data2 = [
[gd(2013, 1, 1), 3], [gd(2013, 2, 1), 5], [gd(2013, 3, 1), 3], [gd(2013, 4, 1), 11],
[gd(2013, 5, 5), 4], [gd(2013, 6, 1), 13], [gd(2013, 7, 1), 9], [gd(2013, 8, 1), 5],
[gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];
var data2014 = {
label: "Receitas 2014",
data: data1,
xaxis: 1
};
var data2013 = {
label: "Receitas 2013",
data: data2,
xaxis: 2
};
$("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
data2014, data2013
],
{
series: {
lines: {
show: false,
fill: true
},
splines: {
show: true,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 2,
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
color: '#d5d5d5'
},
colors: ["#1ab394", "#464f88"],
xaxes: [{
mode: "time",
tickSize: [1, "month"],
tickLength: null,
colors: ["#838383", "#838383"],
timeformat: "%b",
max: (new Date("2014/12/1")).getTime()
}, {
ticks: false
}],
yaxis: {
ticks: 4
},
legend: {
backgroundOpacity: 0.5,
noColumns: 1,
position: "nw",
color: "#000000 !important",
}
}
);
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
I'm trying convert this chart, to a highchart but I'm a little bit confusing because in highchart a spline is a type while in Jquery Flot its an option.
How far I did
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 15]];
var data2 = [
[gd(2013, 1, 1), 3], [gd(2013, 2, 1), 5], [gd(2013, 3, 1), 3], [gd(2013, 4, 1), 11],
[gd(2013, 5, 5), 4], [gd(2013, 6, 1), 13], [gd(2013, 7, 1), 9], [gd(2013, 8, 1), 5],
[gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];
$('#flot-dashboard-chart').highcharts('StockChart', {
rangeSelector: {
inputEnabled: $('#flot-dashboard-chart').width() > 480,
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
colors: ['#1ab394'],
plotOptions: {
area: {
color: '#1ab394',
fillColor: '#1ab394'
}
},
series: [{
name: 'AAPL Stock Price',
data: data1,
type: 'areaspline',
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}]
});
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
But is very different the result. I'm reading the API for more information, but some options are in different places.
Can someone help me plot a graph using highchart ?
UPDATE
I'm getting close
CODE
$(function () {
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 15]];
var data2 = [
[gd(2013, 1, 1), 3], [gd(2013, 2, 1), 5], [gd(2013, 3, 1), 3], [gd(2013, 4, 1), 11],
[gd(2013, 5, 5), 4], [gd(2013, 6, 1), 13], [gd(2013, 7, 1), 9], [gd(2013, 8, 1), 5],
[gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
colors: ['#1ab394', '#464f88'],
plotOptions: {
areaspline: {
fillOpacity: 0.4
}
},
series: [{
name: 'Receitas 2014',
data: [[1, 4], [2, 8], [3, 4], [4, 10], [5, 4], [6, 16], [7, 15]]
}, {
name: 'Receitas 2013',
data: [[1, 3], [2, 5], [3, 3], [4, 11], [5, 4], [6, 13], [7, 9], [8, 5], [9, 2], [10, 3], [11, 2], [12, 1]]
}]
});
});
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
Why don't you just set the categories of the xAxis to an array containing the months as follows :
xAxis: {
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
}
And then set your data using simple arrays :
var data1 = [4,8,4,10,4,16,15];
var data2 = [3,5,3,11,4,13,9,5,2,3,2,1];
Maybe that's not what you need, but take a look at the result and tell me what you think: http://jsfiddle.net/yohanrobert/T3Dpf/1/
EDIT
If you still want to use dates within your data arrays, what you could do is to create a xAxis with type set to 'datetime' for the first series like this:
{
type: 'datetime',
dateTimeLabelFormats: {
month: '%b' // Display months as labels ( 'Jan', 'Feb', ...)
},
showLastLabel: false, // If not set to false, displays 'Jan' at the end of the xAxis
tickInterval: 24 * 3600 * 1000 * 30.4 // Displays tick for each month
}
and then add one hidden xAxis for each new series:
{
type: 'datetime',
labels: {
enabled: false // Remove the label
},
tickWidth: 0, // Remove the ticks
lineWidth: 0 // Remove the axis line
}
Finally, you will need to set the extremes for the these series to go from January to December.
Here is an example with three series: http://jsfiddle.net/yohanrobert/T3Dpf/3/
This might not be the easiest way though.
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.
I have a highcharts graph with 2 lines. The x-axis is type datetime.
I want a labeled tick in the x-axis for every month in the overall date range: Jul '11, Aug '11, Sep '11, etc.
The only way all of the monthly ticks will display is if I set my parent container to be extremely wide. However, my production layout only has a container of 695px.
How do I force all of the ticks to display when I'm at the smaller width?
I have a fiddle here
Here is my code:
var chart;
var lineIndex = 0,splineIndex=0;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy'
},
exporting: { enabled: false },
title: {
text: ''
},
legend:{
itemStyle: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
}
},
xAxis: {
type: 'datetime',
min: Date.UTC(2011, 4, 31),
max: Date.UTC(2012, 11, 6),
labels: {
step: 1,
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
}
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b \'%y',
year: '%Y'
}
},
yAxis: [{ // Primary yAxis
labels: {
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
},
formatter: function() {
return '$' + Highcharts.numberFormat(this.value,2,'.',",");
}
},
title: {
text: '',
style: {
color: '#89A54E'
},
},
max:.85,
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: ''
},
min:9000,
max:12000,
labels: {
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
},
formatter: function() {
return '$' + Highcharts.numberFormat(this.value,0,".",",");
}
}
}],
tooltip: {
enabled: false
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
if(this.y == 10000) {
return '<div class="tweak">$' + Highcharts.numberFormat(Math.round(this.y),0,".",",") + '</div>';
} else if (this.y > 5) {
return '<div class="tweak-0">$' + Highcharts.numberFormat(Math.round(this.y),0,".",",") + '</div>';
} else if (this.x == Date.UTC(2011, 11, 1)) { // grab values for special dates and assign tweak classes so we can adjust the label spacing
return '<div class="tweak-1">$' + Highcharts.numberFormat(this.y,3,".",",") + '</div>';
} else if (this.x == Date.UTC(2012, 1, 1)) {
return '<div class="tweak-2">$' + Highcharts.numberFormat(this.y,3,".",",") + '</div>';
} else if (this.x == Date.UTC(2011, 7, 1) || this.x == Date.UTC(2012, 7, 1) ) {
return '<div class="tweak-3">$' + Highcharts.numberFormat(this.y,2,".",",") + '</div>';
} else if ( this.x == Date.UTC(2012, 0, 17) ) {
return '<div class="tweak-4">$' + Highcharts.numberFormat(this.y,3,".",",") + '</div>';
}
}}
}
},
credits: {
enabled: false
},
series: [{
name: 'Growth of $10,000 Investment',
type: 'line',
color: '#002d56',
yAxis: 1,
data: [
[Date.UTC(2011, 5, 1), 10000],
[Date.UTC(2011, 8, 1), 9996],
[Date.UTC(2011, 11, 1), 10652],
[Date.UTC(2012, 2, 1), 11387],
[Date.UTC(2012, 5, 1), 11586],
[Date.UTC(2012, 8, 1), 11984],
[Date.UTC(2012, 11, 1), 12179]
]
}, {
name: 'Historical Distributions Per Share',
color: '#762123',
type: 'line',
enableMouseTracking: false,
data: [
[Date.UTC(2011, 5, 1), 0.70],
[Date.UTC(2011, 6, 1), 0.70],
[Date.UTC(2011, 7, 1), 0.70],
[Date.UTC(2011, 8, 1), 0.70],
[Date.UTC(2011, 9, 1), 0.70],
[Date.UTC(2011, 9, 25), 0.70],
[Date.UTC(2011, 10, 1), 0.717],
[Date.UTC(2011, 11, 1), 0.717],
[Date.UTC(2012, 0, 10), 0.717],
[Date.UTC(2012, 0, 17), 0.728],
[Date.UTC(2012, 0, 24), 0.728],
[Date.UTC(2012, 0, 31), 0.745],
[Date.UTC(2012, 1, 1), 0.745],
[Date.UTC(2012, 1, 28), 0.745],
[Date.UTC(2012, 2, 6), 0.76],
[Date.UTC(2012, 2, 13), 0.76],
[Date.UTC(2012, 2, 20), 0.76],
[Date.UTC(2012, 2, 27), 0.76],
[Date.UTC(2012, 3, 3), 0.76],
[Date.UTC(2012, 3, 10), 0.76],
[Date.UTC(2012, 3, 17), 0.76],
[Date.UTC(2012, 3, 24), 0.76],
[Date.UTC(2012, 4, 1), 0.76],
[Date.UTC(2012, 4, 8), 0.76],
[Date.UTC(2012, 4, 15), 0.76],
[Date.UTC(2012, 4, 22), 0.76],
[Date.UTC(2012, 4, 29), 0.76],
[Date.UTC(2012, 5, 5), 0.76],
[Date.UTC(2012, 5, 12), 0.76],
[Date.UTC(2012, 5, 19), 0.76],
[Date.UTC(2012, 5, 26), 0.76],
[Date.UTC(2012, 6, 3), 0.76],
[Date.UTC(2012, 6, 10), 0.76],
[Date.UTC(2012, 6, 17), 0.76],
[Date.UTC(2012, 6, 24), 0.76],
[Date.UTC(2012, 6, 31), 0.76],
[Date.UTC(2012, 7, 1), 0.76],
[Date.UTC(2012, 7, 7), 0.76],
[Date.UTC(2012, 7, 14), 0.76],
[Date.UTC(2012, 7, 21), 0.76],
[Date.UTC(2012, 7, 28), 0.76],
[Date.UTC(2012, 8, 4), 0.76],
[Date.UTC(2012, 8, 11), 0.76],
[Date.UTC(2012, 8, 18), 0.76],
[Date.UTC(2012, 8, 25), 0.76],
[Date.UTC(2012, 11, 1), 0.76]
],
marker: {
enabled: false
}
}]
});
});
You can add the tickInterval to the xAxis properties:
...
tickInterval: 30 * 24 * 3600 * 1000,
...
There will appear some overlap so also might want to rotate the labels a bit:
See this jsfiddle.