i'm trying to show dates on x-axis. all dates are showing one day off. here is my dates to be shown 4/23/2017, 4/30/2017, 5/7/2017, 5/14/2017,05/21/2017,06/04/2017 in x-axis. and what it's showing is thisenter image description here. it's show date which is not there or near (5/29/2017) which is overlapping with other. this is my codexAxis: { tickAmount: 5,
type: 'datetime',
dateTimeLabelFormats: {
day: '%m/%d/%Y',
week: '%m/%d/%Y',
month: '%m/%d/%Y',
},
labels: {
style: {
fontFamily : "Open Sans"
},
}
},
time: {useUTC: false },
It happens because you've time.useUTC = true (default option). Change it to false and it should work as expected.
Code:
var data = [
['4 / 23 / 2017', 1], // [date, value]
['4 / 30 / 2017', 2],
['5 / 7 / 2017', 4],
['5 / 14 / 2017', 2],
['05 / 21 / 2017', 3],
['06 / 04 / 2017', 5]
];
Highcharts.chart('container', {
xAxis: {
tickAmount: 5,
type: 'datetime',
dateTimeLabelFormats: {
day: '%m/%d/%Y',
week: '%m/%d/%Y',
month: '%m/%d/%Y',
},
labels: {
style: {
fontFamily: "Open Sans"
},
}
},
time: {
useUTC: false
},
series: [{
data: data.map(elem => {
elem[0] = new Date(elem[0]).getTime();
return elem;
})
}]
});
API:
https://api.highcharts.com/highcharts/time.useUTC
Demo:
http://jsfiddle.net/BlackLabel/cm4azod0
Related
Is there a way to create a column chart which has conditional coloring and also shows up in legend, as shown in this image.
Thanks!
That is no problem at all, only issue is columns being offcenter due to empty values in one series. (We need two series for legends) It can be solved adding offset values to xAxis.
let rawData = [
{
month: 1,
costOfRepair: 200,
lessThanLastYear: true
},
{
month: 2,
costOfRepair: 300,
lessThanLastYear: true
},
{
month: 3,
costOfRepair: 3800,
lessThanLastYear: false
},
{
month: 4,
costOfRepair: 2000,
lessThanLastYear: true
},
{
month: 5,
costOfRepair: 4000,
lessThanLastYear: false
},
{
month: 6,
costOfRepair: 2500,
lessThanLastYear: false
},
{
month: 7,
costOfRepair: 100,
lessThanLastYear: false
},
{
month: 8,
costOfRepair: 4500,
lessThanLastYear: false
},
{
month: 9,
costOfRepair: 4000,
lessThanLastYear: false
},
{
month: 10,
costOfRepair: 2000,
lessThanLastYear: false
},
{
month: 11,
costOfRepair: 5800,
lessThanLastYear: false
},
{
month: 12,
costOfRepair: 2500,
lessThanLastYear: false
},
]
function processRawData(lessThanLastYear) {
let data = []
rawData.forEach(dataPoint => {
if(dataPoint.lessThanLastYear === lessThanLastYear){
data.push({
x: dataPoint.lessThanLastYear === true ? dataPoint.month + 0.15 : dataPoint.month - 0.15,
y: dataPoint.costOfRepair,
})
}
})
return data
}
Highcharts.chart('container', {
series: [
{
name: 'Cost (>= Previous Year)',
type: 'column',
color: 'red',
data: processRawData(true)
},
{
name: 'Cost (<= Previous Year)',
type: 'column',
color: 'green',
data: processRawData(false)
}
]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
I am trying to build a stacked bar with highcharts. I have some issues regarding the date time format on x axis. see here: http://jsfiddle.net/9y2gnnLy/
I want to add to the x axis an interval of 6 months - which begins with the smallest date and ends with the highest. In addition I want to calculate the duration in tooltip. For example the difference between tow dates: current expiring date - retired date = duration. How can I access the retired date on x axis?
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Microsoft Office 2010', 'Microsoft Office 2013', 'Microsoft Office 365']
},
yAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%b %Y', this.value);
},
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name +'</b><br/>' + '<b>' + this.x +': </b><br/>'+
Highcharts.dateFormat('%b %Y',
new Date(this.y)) + " - "
+ Highcharts.dateFormat('%b %Y',
new Date("Retired Date - How to access the retired date on x axis")) + '<br/><br/><b>Duration: </b>';
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Retired',
color: 'rgba(223, 83, 83, .5)',
data: [Date.parse("1/2/2013"), Date.parse("2/3/2014"), Date.parse("3/4/2015")],
dataLabels: {
enabled: true,
format: '{series.name}'
}
}, {
name: 'Expiring',
data: [Date.parse("1/2/2012"), Date.parse("6/3/2013"), Date.parse("8/4/2014")],
dataLabels: {
enabled: true,
format: "{series.name}"
}
}, {
name: 'Standard',
data: [Date.parse("1/2/2011"), Date.parse("5/3/2012"), Date.parse("4/4/2013")],
dataLabels: {
enabled: true,
format: "{series.name}"
}
}, {
name: 'Planning',
color: 'rgba(119, 152, 191, .5)',
data: [Date.parse("1/2/2010"), Date.parse("9/3/2011"), Date.parse("5/4/2012")],
dataLabels: {
enabled: true,
format: '{series.name}'
}
}]
});
});
Is it possible to group like this?
You can use columnrange type of your series. With this type of series it will be much simpler to make the chart that you want to have.
You can set ranges in your bars, so they will look like they are stacked. You can use grouped categories plugin for adding more category levels
http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories
series: [{
name: '1',
data: [
[Date.UTC(2011, 01, 01), Date.UTC(2011, 02, 01)],
[Date.UTC(2011, 01, 02), Date.UTC(2011, 03, 01)],
[Date.UTC(2011, 01, 01), Date.UTC(2011, 06, 01)]
],
dataLabels: {
enabled: true,
format: "{series.name}"
}
}, {
name: '2',
data: [
[Date.UTC(2011, 02, 01), Date.UTC(2011, 03, 01)],
[Date.UTC(2011, 03, 01), Date.UTC(2011, 10, 01)],
[Date.UTC(2011, 06, 01), Date.UTC(2011, 08, 01)]
],
dataLabels: {
enabled: true,
format: "{series.name}"
}
}]
You can move your dataLabels to center of your bar using align: 'center' paramter:
dataLabels: {
enabled: true,
align: 'center',
formatter: function() {
return this.series.name;
}
}
Here you can see an example how it can work:
http://jsfiddle.net/ttrtb6xt/1/
I have fiddle here
fiddle
What I want is to display all the days of jan 2012 on X-axis. i.e 1.jan,2.jan, and so on.I dont want interwal between two days.
this is x-axis code.
xAxis: {
type: 'datetime',
min: Date.UTC(2012, 0, 1),
max: Date.UTC(2012, 0, 31),
labels: {
step: 1,
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
}
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b \'%y',
year: '%Y'
}
},
This can be done with the xAxis.tickInterval property. As it says right in the docs that to get an interval of 1 day you would do:
xAxis: {
type: 'datetime',
min: Date.UTC(2012, 0, 1),
max: Date.UTC(2012, 0, 31),
tickInterval: 24 * 3600 * 1000, // 1 day
labels: {
step: 1,
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
}
},
As you can see it causes an overlap of your xAxis labels. You would then have to find the correct xAxis.labels formatting that suits your needs.
I have been creating a Highstock chart and I am facing problem in fixing xAxis interval in date/time formatter code here according to live stock data on 30 minutes interval.
Here is the code of my chart:
Highcharts.setOptions({
global: {
timezoneOffset: 4 * 60
}
});
var dataObject = {
chart: {
renderTo: 'container',
defaultSeriesType: 'area',
width: '1280',
height: '640'
},
plotOptions: {
series: {
lineWidth: 1
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '<br/>%H:%M:%S',
minute: '<br/>%H:%M:%S',
hour: '<br/>%H:%M:%S',
day: '%Y<br/>%b-%d',
week: '%Y<br/>%b-%d',
month: '%Y-%b',
year: '%Y'
},
tickPositions:['09:00:000','12:00:00','15:00:00','18:00:00']
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
min: minRange,
max: maxRange,
tickInterval: 0.5,
title: {
text: 'Last',
margin: 40
}
},
series: [{
name: 'AAPL',
fillColor : {
linearGradient : {
x1: 0,
y1: 0.8,
x2: 0,
y2: 0
},
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
data: [[1440161106000,112.65],[1440161931000,112.65],[1440162841000,112.65],[1440163745000,112.65],[1440164584000,111.41],[1440164704000,111.11],[1440165543000,111.51],[1440166443000,110.96],[1440167345000,110.66],[1440168183000,109.29],[1440168300000,109.5],[1440169144000,109.17],[1440170038000,108.29],[1440170945000,108.92],[1440171784000,108.48],[1440171904000,108.61],[1440172743000,108.81],[1440173640000,108.6],[1440174544000,107.72],[1440175385000,108.03],[1440175503000,107.99],[1440176338000,108],[1440177245000,108.24],[1440178143000,108.4],[1440178983000,108.28],[1440179104000,108.21],[1440179915000,108.2],[1440180844000,108.3],[1440181743000,108.06],[1440182585000,107.71],[1440182705000,107.51],[1440183543000,107.5],[1440184444000,106.53],[1440185345000,106.08],[1440186184000,106.61]] }]
};
chart = new Highcharts.StockChart(dataObject),function(chart){
$('#container').bind("mousewheel",function(event,delta){
var x = event.originalEvent.wheelDelta /120;
console.log(x);
if (delta > 0) {
var min = chart.xAxis[0].getExtremes().min,
max = chart.xAxis[0].getExtremes().max;
chart.xAxis[0].setExtremes((min + 12 * 3600 * 1000),(max - 12 * 3600 * 1000));
} else {
var min = chart.xAxis[0].getExtremes().min,
max = chart.xAxis[0].getExtremes().max;
chart.xAxis[0].setExtremes((min - 12 * 3600 * 1000),(max + 12 * 3600 * 1000));
}
});
};
JSFiddle : jsfiddle.net/zubairsultan/cvnzkv0s/5
You can fix minTickInterval to 3600000 so your xAxis will be "hourly based":
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '<br/>%H:%M:%S',
minute: '<br/>%H:%M:%S',
hour: '<br/>%H:%M:%S',
day: '%Y<br/>%b-%d',
week: '%Y<br/>%b-%d',
month: '%Y-%b',
year: '%Y'
},
minTickInterval: 3600000
},
See your JSFiddle modified here: http://jsfiddle.net/cvnzkv0s/9/
Is that what you want ?
I'm not sure what's going on, but dates are being displayed on the axis and in tooltips a month out. So the first date in data on this chart is in July but it shows up as in August and so on. Any ideas? I've put the code in a JSFiddle (http://jsfiddle.net/Z2VGL/1/) and also below:
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: ''
},
plotOptions: {
series: {
lineWidth: 5,
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
radius: 6,
lineColor: null // inherit from series
}
}
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'Ability Score (out of 100)',
style: {
color: '#323A45',
fontWeight: 'bold'
}
},
min: 0
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %b', this.x) + ': ' + this.y;
}
},
series: [{
name: 'Overall Ability',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(2013, 07, 12), 50],
[Date.UTC(2013, 08, 13), 57.9474605576],
[Date.UTC(2013, 08, 14), 58.5667571154],
[Date.UTC(2013, 08, 15), 69.0590308869], ]
}, {
name: 'Target',
data: [
[Date.UTC(2013, 07, 12), 80],
[Date.UTC(2013, 08, 13), 80],
[Date.UTC(2013, 08, 14), 80],
[Date.UTC(2013, 08, 15), 80],
/*
[Date.UTC(2013, 0, 1), 80.0],
[Date.UTC(2013, 1, 1), 80.0],
[Date.UTC(2013, 2, 1), 80.0],
[Date.UTC(2013, 3, 1), 80.0],
[Date.UTC(2013, 4, 1), 80.0],
[Date.UTC(2013, 5, 1), 80.0],
[Date.UTC(2013, 6, 1), 80.0],
[Date.UTC(2013, 7, 1), 80.0]
*/
],
dashStyle: 'longdash',
marker: {
enabled: false
}
}]
});
});
Thanks in advance.
As you can see from this doc: Mozilla JS Reference Date UTC
month
An integer between 0 and 11 representing the month.