How to control tickInterval of datetime in Highcharts - highcharts
I'm creating a simple spline chart using highcharts, here xAxis is of type 'datetime' and yAxis has random values between (0 - 100), the timeinterval is exactly one minute between each and every object of series data, i have set minTickInterval as 60000, but whenever the page is loaded the chart has correctly 5 ticks but i'm not able to see tick label
Highcharts.chart('container', {
chart: {
type: 'spline',
zoomType: 'x',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
}
},
time: {
useUTC: false
},
title: {
text: 'usage'
},
xAxis: {
type: 'datetime',
tickInterval: 60000
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#003366'
}]
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions:{
series:{
turboThreshold:0
}
},
series: [{
data: [
{x: new Date("Mon Apr 27 2020 11:41:59 GMT+0530 (India Standard Time)"),y: 42},
{x: new Date("Mon Apr 27 2020 11:42:59 GMT+0530 (India Standard Time)"),y: 4},
{x: new Date("Mon Apr 27 2020 11:43:59 GMT+0530 (India Standard Time)"),y: 4},
{x: new Date("Mon Apr 27 2020 11:44:59 GMT+0530 (India Standard Time)"),y: 4},
{x: new Date("Mon Apr 27 2020 11:45:59 GMT+0530 (India Standard Time)"),y: 4}
]
}]
});
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
Thanks in advance
Related
How do I change the style of the frame lines in a radar(polar) chart created with highcharts?
I am looking for settings to change some of the frame-lines in the radar chart.
There are 3 types of lines I'd like to be customized:
The red triangle line outside.
The 3 blue lines from center to each corner.
The small green triangle.
I've searched a lot but totally had no clue. I have tried to change the lineWidth of the yAxis and it only changes the width of the upper vertical line.
Here below is the code. It uses the latest highcharts to render the chart, as of Sep 12 2021 when I'm writing this question, it's 9.2.2:
window.chart = Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
polar: true,
type: 'area'
},
title: {
text: "radar chart title",
margin:33,
useHTML:true
},
tooltip: {
pointFormat: '<span style="color:{series.color}"><b>{point.y:,.0f}</b>'
},
plotOptions: {
animation:true
},
xAxis: {
categories: ["a","b","c"],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 4,
min: 0,
max:100
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: "Haha",
animation:true,
data: [52,119, 12],
lineWidth:4
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 400px"></div>
Use plot lines for y-axis:
yAxis: {
...
plotLines: [{
color: 'red',
value: 100,
zIndex: 2
}]
}
Use gridLineColor for x-axis:
xAxis: {
...,
gridLineColor: 'blue'
}
Use gridLineColor for y-axis:
yAxis: {
gridLineColor: 'green',
...
}
Live demo: http://jsfiddle.net/BlackLabel/fm45ab3k/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotLines
omit top border of highcharts chart
I have a columns chart and I need to draw the left, right and bottom lines of the chart (x/y axes) but need to either omit the top line
or ...
draw a white line to cover the top line. Viewing the raw data in Chrome, I can see the box is drawn using <rect>.
Is it possible to use JS to locate that and get the x,y,width attributes to draw a white line or remove it and replace with 3 black lines
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Annual Performance</title>
<!-- this code to include Highcharts with jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- <script src="/js/jquery.min.js"></script> -->
<!--this code is the required highcharts javascript file -->
<script src="http://code.highcharts.com/highcharts.js"></script>
<!-- <script src="/js/highcharts.js"></script> -->
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<script>
$(function () {
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
margin: 50,
plotBorderWidth: 3,
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y:.2f} %'
}
}
},
legend: {enabled: false},
yAxis: {
title: {text: null},
max: 4,
allowDecimals: false,
labels: {
enabled: true,
formatter: function() {
return this.value + ' %';
}
}
},
title: {
text: 'Annual Performance'
},
subtitle: {
text: 'XXX Shares'
},
series: [{
data: [
[2008, 2.17],
[2009, 0.15],
[2010, 0.00],
[2011, 0.00],
[2012, 0.01],
[2013, 0.01],
[2014, 0.01],
[2015, 0.00],
[2016, 0.00],
[2017, 0.38]
],
}]
});
});
</script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
You can create additional yAxis and use lineWidth and offset properties to acheve needed result:
xAxis: {
lineWidth: 3
},
yAxis: [{
lineWidth: 3,
offset: -2,
title: {
text: null
},
max: 4,
allowDecimals: false,
labels: {
enabled: true,
formatter: function() {
return this.value + ' %';
}
}
}, {
opposite: true,
title: {
text: ''
},
offset: -2,
lineWidth: 3,
}],
Live demo: http://jsfiddle.net/BlackLabel/cj497k6s/
API Reference: https://api.highcharts.com/highcharts/xAxis.lineWidth
Highcharts x axis date format issues
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/
Highcharts is formating x axis text values as dates
For some reason, Highcharts is formatting my text categories as dates.
Background Info
I am getting my data from a Google Spreadsheet. The labels should say Grade 12, Grade 11, etc. I know I can overwrite the xAxis labels with the categories function, but I want I sustainable solution so that my end users can change the labels as they wish.
CodePen
$(function() {
Highcharts.setOptions({
chart: {
defaultSeriesType: 'bar',
backgroundColor: '#fff',
shadow: false
}
});
$('#ms-highschool').highcharts({
data: {
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
endColumn: 1,
startRow: 0,
googleSpreadsheetWorksheet: 5
},
title: {
text: 'Charter School Makret Share for High School Grades, SY 2014-15'
},
yAxis: {
min: 0,
max: 40,
tickInterval: 10,
title: {
text: 'PCS Share'
}
},
xAxis: {
labels: {
enabled: true,
}
}
});
});
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script>
</script>
</head>
<body>
<div id="ms-highschool"></div>
</body>
You can specify type of x axis explicitly to have the problem solved.
xAxis: {
labels: {
enabled: true,
},
type: "category"
}
Highcharts issues with date
I have a spline chart where in I am trying to achieve passrate starting today going 30 days back. Basically trying to see growth over period of last 30 days.
However I am seeing the dates mesing up in the x axis and they are going to october /months are added by 1 which means 26th Sep some how shown as 26th OCT.
Here is the JS fiddle: http://jsfiddle.net/Mn6sB/1/
Here is the code for the high chart -
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'chartContainer',
type: 'spline'
},
title: {
text: 'Pass rate statistics'
},
subtitle: {
text: 'Pass count per'
},
xAxis: {
type: 'datetime',
minTickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'PassCount'
},
min: 0
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +
'</b><br/> Date: '+ Highcharts.dateFormat('%e %b',this.x)+
'</b><br/> Pass Count: '+ this.y;
}
},
series: [{name: 'development', data:[[Date.UTC(2013,8,27),10],[Date.UTC(2013,8,28),5],[Date.UTC(2013,8,29),12],[Date.UTC(2013,8,30),12],[Date.UTC(2013,8,31),7],[Date.UTC(2013,9,2),13],[Date.UTC(2013,9,3),22],[Date.UTC(2013,9,4),1],[Date.UTC(2013,9,5),1],[Date.UTC(2013,9,7),1],[Date.UTC(2013,9,9),7],[Date.UTC(2013,9,10),16],[Date.UTC(2013,9,11),20],[Date.UTC(2013,9,12),11],[Date.UTC(2013,9,13),25],[Date.UTC(2013,9,14),4],[Date.UTC(2013,9,15),11],[Date.UTC(2013,9,16),16],[Date.UTC(2013,9,17),12],[Date.UTC(2013,9,18),22],[Date.UTC(2013,9,19),10],[Date.UTC(2013,9,20),1],[Date.UTC(2013,9,22),1],[Date.UTC(2013,9,23),1],[Date.UTC(2013,9,24),40],[Date.UTC(2013,9,25),14],[Date.UTC(2013,9,26),6],]},{name: 'topbr', data:[[Date.UTC(2013,8,28),2],[Date.UTC(2013,8,29),1],[Date.UTC(2013,8,30),1],[Date.UTC(2013,8,31),1],[Date.UTC(2013,9,1),1],[Date.UTC(2013,9,2),1],[Date.UTC(2013,9,3),1],[Date.UTC(2013,9,4),1],[Date.UTC(2013,9,5),1],[Date.UTC(2013,9,6),1],[Date.UTC(2013,9,7),1],[Date.UTC(2013,9,8),1],[Date.UTC(2013,9,9),1],[Date.UTC(2013,9,10),1],[Date.UTC(2013,9,11),1],[Date.UTC(2013,9,12),1],[Date.UTC(2013,9,13),1],[Date.UTC(2013,9,14),1],[Date.UTC(2013,9,16),1],[Date.UTC(2013,9,17),1],[Date.UTC(2013,9,18),1],[Date.UTC(2013,9,19),1],[Date.UTC(2013,9,20),1],[Date.UTC(2013,9,21),1],[Date.UTC(2013,9,22),1],[Date.UTC(2013,9,23),1],[Date.UTC(2013,9,24),1],[Date.UTC(2013,9,25),1],[Date.UTC(2013,9,26),1],]},{name: 'xxsomething', data:[[Date.UTC(2013,8,28),10],[Date.UTC(2013,8,29),1],[Date.UTC(2013,8,30),1],[Date.UTC(2013,9,1),3],[Date.UTC(2013,9,6),10],[Date.UTC(2013,9,7),1],[Date.UTC(2013,9,8),1],[Date.UTC(2013,9,9),3],[Date.UTC(2013,9,11),3],[Date.UTC(2013,9,12),1],[Date.UTC(2013,9,13),3],[Date.UTC(2013,9,14),3],[Date.UTC(2013,9,15),3],[Date.UTC(2013,9,16),3],[Date.UTC(2013,9,17),4],[Date.UTC(2013,9,18),42],[Date.UTC(2013,9,19),42],[Date.UTC(2013,9,20),41],[Date.UTC(2013,9,21),16],[Date.UTC(2013,9,24),4],[Date.UTC(2013,9,25),45],[Date.UTC(2013,9,26),2],]},{name: 'xxabcxos', data:[[Date.UTC(2013,8,30),1],[Date.UTC(2013,9,6),1],[Date.UTC(2013,9,25),1],]},{name: 'xxpqrs', data:[[Date.UTC(2013,8,28),2],[Date.UTC(2013,8,29),2],[Date.UTC(2013,8,30),1],[Date.UTC(2013,9,1),1],[Date.UTC(2013,9,2),1],[Date.UTC(2013,9,3),1],[Date.UTC(2013,9,4),1],[Date.UTC(2013,9,7),1],[Date.UTC(2013,9,8),1],[Date.UTC(2013,9,9),1],[Date.UTC(2013,9,10),1],[Date.UTC(2013,9,11),1],[Date.UTC(2013,9,12),1],[Date.UTC(2013,9,13),1],[Date.UTC(2013,9,15),1],[Date.UTC(2013,9,16),1],[Date.UTC(2013,9,17),1],[Date.UTC(2013,9,18),1],[Date.UTC(2013,9,19),1],[Date.UTC(2013,9,20),1],[Date.UTC(2013,9,21),2],[Date.UTC(2013,9,22),1],[Date.UTC(2013,9,23),1],[Date.UTC(2013,9,24),1],[Date.UTC(2013,9,25),1],]},{name: 'xxsomething_th', data:[[Date.UTC(2013,9,1),3],[Date.UTC(2013,9,24),4],]},{name: 'xxpqrs_dev', data:[[Date.UTC(2013,9,13),1],[Date.UTC(2013,9,21),1],]},{name: 'xxrel', data:[[Date.UTC(2013,9,15),1],]},{name: 'xxfun', data:[[Date.UTC(2013,8,28),2],[Date.UTC(2013,9,5),1],]},]
});
});
Month start with 0, not 1 when using Date. From a js console: new Date( Date.UTC(2013,1,27) ) Tue Feb 26 2013 19:00:00 GMT-0500 (Eastern Standard Time) new Date( Date.UTC(2013,0,27) ) Sat Jan 26 2013 19:00:00 GMT-0500 (Eastern Standard Time)