We are using Highchart's API for generating some line charts. One of the requirement for these charts is that we should end the xAxis scale with the last xAxis value of the data provided and show that tick label for it.
Data: [[2014-08-28,.434],[2014-10-17,.234],[2014-11-5,.134],[2015-01-12,.274]]
Expected:
Last plot for xAxis on: 2015-01-12 (Line chart finish at the end of the chart area)
Last tick label for xAxis: Jan '12
Actual (http://jsfiddle.net/u2pa6qqL/3/):
Last plot for xAxis: 2015-01-12(gap between the last plot and the end of the chart area)
Last tick label for xAxis: Feb'15
$(function () {
$('#container').highcharts({
title: {
text: 'Chart reflow is set to true'
},
subtitle: {
text: 'When resizing the window or the frame, the chart should resize'
},
xAxis: {
type: 'datetime',
endOnTick: true,
dateTimeLabelFormats: {
day: '%b %e'
},
},
series: [{
data: [[new Date('2014-08-28').getTime(),.434],[new Date('2014-10-17').getTime(),.234],[new Date('2014-11-5').getTime(),.134],[new Date('2015-01-12').getTime(),.274]]
}]
});
});
I have tried with highchart settings showLastLabel, endOnTick, the xAxis extreme MAX & Min and setExtreme. nothing worked.
Can anyone please shed some light on this,
Thanks,
Sarath
You can use tickPositions or tickPositioner to print ticks in defined positions.
Related
I want to disable or hide marked x-axis on the following image:
But I still need to be able to show a plot line.
I tried to play around with "xAxis" Highcharts property and I am able to hide marked x-axis, but then I can not add a plot line. It seems to me this axis is somehow connected with the plot.
Thanks a lot for help.
The plotLines are connected to an axis, but you can separately disable the grid and the labels:
xAxis: [{
...,
grid: {
enabled: false
},
plotLines: [{
color: 'red',
value: today + day * 7,
width: 5
}],
labels: {
enabled: false
},
tickLength: 0
}, {
visible: false
}]
Live demo: https://jsfiddle.net/BlackLabel/c2xLruvp/
API Reference: https://api.highcharts.com/gantt/xAxis.visible
I am using Highcharts v6.0.7.
Objective:
I need to center align column bars “on” x-axis tickmarks.
Configuration:
Highcharts column chart
X-axis is datetime and non-categorized.
I am using pointPlacement with a numeric value in order to center align the column bars of my chart over x-axis tickmarks.
Issue:
Yesterday, a certain numeric value for pointPlacement centered the column bars “on” tickmarks. However, today, all configuration remaining same, the column bars are at an offset from the x-axis tickmarks.
Questions:
Is this a bug with Highcharts or should I need more configuration along with pointPlacement to center the column bars. I referred to this documentation -- https://api.highcharts.com/highcharts/series.column.pointPlacement
For non-categorized x-axes, is there an alternative property to center the column bars on axis tickmarks?
I see that in my chart, pointPlacement values of “on” and “between” do not work as expected. Also a value of 0 does not center the column bar “on” the axis tickmarks (the documentation states it should)
Code
this.chart = new Chart({
chart: {
type: 'column',
},
title: {
text: this.title
},
xAxis: {
type: this.xType,
startOnTick: true,
min: moment(this.pointStart).add(1, 'days').unix() * 1000,
tickInterval: this.xTickInterval,
labels : {
align: 'center'
}
},
yAxis: {
...
},
tooltip : {
...
},
credits: {
...
},
plotOptions: {
column: {
pointPlacement: 0.4
},
series: {
pointStart: this.pointStart ? moment(this.pointStart).unix() * 1000 : 0,
pointInterval: this.pointInterval,
showInLegend: false
}
},
series: [{
data: [], //show empty grid initially
}]
});
I want to show multiple lines on a chart plotting numbers and dates. I want to X Axis to always show all the months, starting at January through to December, even if there is only data for, say, february and march. I have created a fiddle here. How can I do this? You can see in the fiddle that only the months I have data for show.
I would also like the X axis to show 'Jan', 'Feb' etc, and no numbers. Is this possible?
My code so far is:
$('#container').highcharts({
title: {
text: 'Chart reflow is set to true'
},
subtitle: {
text: 'When resizing the window or the frame, the chart should resize'
},
xAxis: {
type: "datetime"
},
series: [{
data:[[1456444800000,173682],[1456531200000,21136],[1457049600000,21136],[1457395200000,199158],[1457913600000,413265],[1458777600000,21136],[1459209600000,199158],[1459987200000,413265],[1460505600000,21136],[1461024000000,199158],[1461715200000,413265],[1462406400000,199158]]
}]
});
Set a min and max value for your x axis:
xAxis: {
type: "datetime",
tickInterval:86400000 * 30,
min: Date.UTC(2016,0,1),
max: Date.UTC(2016,11,31)
}
Example:
http://jsfiddle.net/jlbriggs/ejjtc73h/2/
I am using highcharts.js to generate my graph. Actually , I am formatting time and populating in x-axis ticks and I am giving Y-axis label. when there is single json response both the x-axis ticks and y-axis labels are coming properly but when there is more than a single response x-axis ticks get disbled and y-axis label is coming without any error.\
xAxis: {
type: 'datetime',
tickInterval: 2 * 3600 * 1000,
min: stime,
max: etime,
dateTimeLabelFormats: {
hour: '%I %p'
},
title: {
text: undefined
}
},
yAxis: {
title: {
text: "Calories History"
},
min: 0
},
help me to resolve the issue I want the y-axis label as well as x-axis ticks when there are more resposne in my json response
I'm trying the Highcharts tools to display some graph with huge amount of data and series comparison.
the king of graph I need is exactly the one given in this example.
Except that mine has to be displayed in vertical ( with the time line on y axis, from the top to the bottom, and value on the x axis)
like the 'spline inverted' example ( seen here ) show, it's quite useful to display altitude related data for example.
I can easily imagine to invert values and exchange axis legends, but I don't think the time line navigator will follow...
I also tried to set the graph as inverted like in the 'Spline with inverted axes' example :
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
inverted: true
},
...
but it didn't work.
Is there a way to display the exact same graph in vertical with the time line navigator on the y axis ?
EDIT : its seems its not possible to use invert on HighStock graphs (as seen in doc),
So I adjust my question :
Can we use an HighCharts inverted graph to display as many points that in HighStock charts ? (even if we won't get any scroll navigator on the y-axis)
Highstock doesn't support inverted charts, see: http://api.highcharts.com/highstock#chart
EDIT:
It is possible to use inverted Highcharts with dataGrouping, it of course requires Highstock in files, but just create chart using Highcharts.Chart(). Don't forget to enable dataGrouping from Highstock. See example: http://jsfiddle.net/PATyv/2/
Code:
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
inverted: true
},
title: {
text: 'USD to EUR exchange rate'
},
tooltip: {
style: {
width: '200px'
},
valueDecimals: 4
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
dataGrouping: {
enabled: true
}
}]
});