Highcharts columns have no width (seemingly arbitrarily)

Highcharts columns have no width (seemingly arbitrarily) - javascript

I'm working with a column chart using Highcharts. The chart needs to handle an arbitrary number of columns.
Here's an example of one such chart that I need to handle:
$('#TimesChart2').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Response Times'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'Minutes'
}
},
series: [{
name: 'Average Response Time',
data: [[Date.UTC(2013, 6, 30), 878.42], [Date.UTC(2013, 6, 31), 579.68], [Date.UTC(2013, 7, 1), 400.42], [Date.UTC(2013, 7, 2), 622.95], [Date.UTC(2013, 7, 5), 1260.97], [Date.UTC(2013, 7, 3), 0], [Date.UTC(2013, 7, 4), 0], [Date.UTC(2013, 7, 6), 517.945] ],
dataGrouping: {
enabled: false
},
pointPadding: .05
}],
});
The problem is that the columns have an extremely small width on this set of data. In some datasets (see the first graph in the jsfiddle link), the columns have normal width and are fine.
One possible workaround is to set the pointWidth to a fixed value, but then on large graphs the columns overlap. I've tried experimenting with pointPadding and grouping as well, to no avail.
http://jsfiddle.net/3NZZW/
Anyone know what's happening here?

That's really odd. But, you're first data series is in reverse date order. If you fix that, the chart is right.
http://jsfiddle.net/pUTQd/
series: [{
name: 'Average Response Time',
data: [[Date.UTC(2013, 7, 2), 354.5], [Date.UTC(2013, 7, 3), 1981.875], [Date.UTC(2013, 7, 4), 434.5], [Date.UTC(2013, 7, 5), 678.1], [Date.UTC(2013, 7, 6), 87.465] ],
dataGrouping: {
enabled: false
},
pointPadding: .05
}],
(note I just changed the dates, I didn't change the data)

Related

How to set explicit axis extents for datetime axis in Highcharts?

I have a Highcharts scatter plot with a datetime x-axis. I want to explicitly set the min and max values for the x-axis, regardless of the chart width.
In the example below, I set xAxis.min to be 01/05/2023, but you can see that the plot renders with 01/04/2023 as the minimum value. It seems this minimum value can vary depending on the width of the plot.
Is there any way that I can set specific start/end values for the axis (and use startOnTick/endOnTick), regardless of the plot width?
let start = "05 Jan 2023 00:00:00 GMT"; // x-axis start
let end = "12 Jan 2023 00:00:00 GMT"; // x-axis end
Highcharts.chart("trendPlot", {
accessibility: { enabled: false },
chart: {
type: "scatter",
},
xAxis: {
type: "datetime",
min: Date.parse(start),
max: Date.parse(end),
startOnTick: true,
endOnTick: true,
labels: {
format: "{value:%m/%d/%y}",
enabled: true,
},
},
series: [{
"data": [
[1672894800000, 1]
]
}]
});
#trendPlot {
width: 500px;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="trendPlot"></div>

Put a data as a UNIX time format, timestamp or Date.UTC method for preparing data, explained how to working with data-compression in Highcharts.
chart: {
type: "scatter",
},
xAxis: {
type: "datetime",
tickInterval: 24 * 3600 * 1000, // one day
minTickInterval: 24 * 3600 * 1000, // one day
labels: {
format: "{value:%m/%d/%y}",
enabled: true,
},
min: Date.UTC(2019, 5, 18),
max: Date.UTC(2019, 5, 20),
},
series: [{
pointStart: Date.UTC(2019, 5, 18),
data: [
[Date.UTC(2019, 5, 18), 1],
[Date.UTC(2019, 5, 18), 3],
[Date.UTC(2019, 5, 20), 5],
[Date.UTC(2019, 5, 21), 1]
]
}]
Demo: https://jsfiddle.net/BlackLabel/oq9Luxey/

Highcharts: Month seems to be off by one day

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!

How to show time values in stacked column using High stock

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

Highcharts spline and columnrange inverted

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.

Highcharts passing time.

I'm trying to get the x-axis to display the day on which the data was pulled.
xAxis: {
type: 'datetime',
day: '%e'
},
So far I've tried.
1.
data: [[Date.UTC(2013, 5, 11),0.12],[Date.UTC(2013, 5, 10),-1.54],[Date.UTC(2013, 5, 9),-1.76],[Date.UTC(2013, 5, 8),-3.94],[Date.UTC(2013, 5, 7),-3.52],[Date.UTC(2013, 5, 6),-2.35],[Date.UTC(2013, 5, 5),-3.29],[Date.UTC(2013, 5, 4),-3.21],[Date.UTC(2013, 5, 3),-1.37],[Date.UTC(2013, 5, 2),-1.87],[Date.UTC(2013, 5, 1),-1.77],[Date.UTC(2013, 4, 30),-1.89],[Date.UTC(2013, 4, 29),-1.69],[Date.UTC(2013, 4, 28),-1.63]]
2.
data: [[1368331081,0.12],[1368244681,-1.54],[1368158281,-1.76],[1368071881,-3.94],[1367985481,-3.52],[1367899081,-2.35],[1367812681,-3.29],[1367726281,-3.21],[1367639881,-1.37],[1367553481,-1.87],[1367467081,-1.77],[1367380681,-1.89],[1367294281,-1.69],[1367207881,-1.63]]
Both error out. Honestly I'm confused with this. What is the easy way to pass the timestamp for the xaxis?

Try:
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { day: '%e'}
}
Working jsfiddle example here: http://jsfiddle.net/tz8ea/

Develop Reference

JavaScript is the programming language of the Web.

Highcharts columns have no width (seemingly arbitrarily) - javascript

Related

How to set explicit axis extents for datetime axis in Highcharts?

Highcharts: Month seems to be off by one day

How to show time values in stacked column using High stock

Highcharts spline and columnrange inverted

Highcharts passing time.

Categories

Resources