It seems that in a stepped xaxis the normal "showLastLabel" doesn't work. In my case, I am displaying every tenth year only; but if I want to see in any case the latest year, it doesn't work. Here is a fiddle.
$(function () {
var chart = new Highcharts.Chart(
{
chart:
{
renderTo: "container",
type: "line"
},
title:
{
text: "Emissions of CO2 - from Fossil Fuels - Total (CDIAC)"
},
xAxis:
{
categories: ['1961','1962','1963','1964','1965','1966','1967','1968','1969','1970','1971','1972','1973','1974','1975','1976','1977','1978','1979','1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010'],
labels:
{
step: 10
},
showLastLabel: true,
endOnTick: true
},
yAxis:
{
min: 0
},
series:
[ {
data: [836290,884698,947139,970623,961804,953139,937905,986489,1053841,1027857,1039329,1043832,1088357,1065419,1005220,1094115,1055965,1082764,1121897,1104068,1052479,1019684,1015786,1037513,1048350,1051961,1036999,1033773,1017926,1014450,930734,892705,878363,866267,864817,890342,862982,856064,823133,830657,854361,829449,834088,826572,807363,809521,784657,784000,732848,745994],
name: "Germany"
}]
});
});
Thanks for any hints!
http://jsfiddle.net/grg4b6xk/5/
This is the best way I could find:
chart:
{
renderTo: "container",
type: "line",
events:{
load:function(){
var ticks = $.map(this.axes[0].ticks, function(t){return t;});
ticks[ticks.length-2].render(0);
}
}
}
Add load event handler. In this event handler take ticks of axes x (axes[0] is x and axes[1] is y). ticks is an array-like object so you need to map it to an array to access it by index. The last item in that array is some tick with position -1 so the real last tick is in position before it (so it is length - 2). Then call the render function passing a number that divides by 10. I used 0. So the tick rerenders on the last position.
If you know you want data to end on 2011, then add that category:
categories: ['1961', '1962', '1963', '1964', '1965', '1966', '1967', '1968', '1969', '1970', '1971', '1972', '1973', '1974', '1975', '1976', '1977', '1978', '1979', '1980', '1981', '1982', '1983', '1984', '1985', '1986', '1987', '1988', '1989', '1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011']
Then force xAxis to display that label:
min: 0,
max: 50
And demo: http://jsfiddle.net/grg4b6xk/6/
Highcharts accepts null values, so in your case, I appended null and 2011 to their respective arrays. I'd show you the 'code' but that is literally all I did, and considering the key values are JSON code...I guess there you have it. Here's a fork of your fiddle functioning as you desired.
Related
Right off the bat here is the desired chart in ChartJS.
We have two x-axes. One showing power from a meter and the other showing meter state over time (open, closed, or in standby) In both datasets the X axis is Unix time. The power Y axis is numerical and the state x axis is one of the three state categories. Both are drawn in lines.
To get right to the point: how do I do this in Highcharts? I have the second axis set up:
xAxis: {
type: 'datetime'
},
yAxis: [
{
title: {
text: 'Real Power'
}
},
{
type: 'category', //I have also removed this line
title: {
text: 'state'
},
categories: ['closed', 'standby', 'open']
}
],
Any attempt to set the Y axis value to a string in highcharts results in a well known: https://www.highcharts.com/errors/14/
Furthermore online I only seem to find categories on the X axis. Any help getting to the right place is appreciated. Thanks in advance.
You can't use a string as x value, use a number instead, for example:
series: [{
...
}, {
...,
yAxis: 1,
data: [1, 0, 2, 1]
}],
yAxis: [{
...
}, {
title: {
text: 'state'
},
categories: ['closed', 'standby', 'open'],
min: 0,
max: 2
}]
Live demo: http://jsfiddle.net/BlackLabel/o7Lvyadm/
API Reference: https://api.highcharts.com/highcharts/yAxis
I need to convert this Highcharts.JS chart to C3.JS chart
http://i.imgur.com/iwk3pyO.png
This was the Highcharts.JS code:
var chart = new Highcharts.Chart({
xAxis: {
title: {
text: 'Values'
}
},
yAxis: {
title: {
text: ' Frequency',
align: 'high',
offset: 23
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
series: [
{
data: []
}
]
});
Upon converting to C3.JS, I encounter a problem with the x-values. The bar chart of C3.JS, by default, assigns values to each bar as 0, 1, 2, ... n instead of the values that I wanted which is the following:
var xData = [0.1384261, 0.2337903, 0.3291545, 0.4245187, 0.5198829, 0.6152470999999999, 0.7106113000000001, 0.8059755, 0.9013397000000001, 0.9967039];
I tried to somehow "trick" it to show the x values as labels but the problem here is the red region at the back. I set the region to be displayed in 0 to 1 values but you'll notice in C3.JS that the region is place in the first and second bars instead of after the last graph since its value is less than 1.
https://jsfiddle.net/joefclarin/dh5epj0v/
Maybe a little bit late, but in case someone still needs it (or to use numerical X axis in bar chart). Here is an idea:
Instead of
regions: [
{start: 0, end: 1, class: 'red-color'}
]
You need to hack the end value according to how many items are less than 1 in your categories?. You code would be probably like this:
function fctGetItemLessThan1(xData){
//implement your count logic here + return value
}
then in your chart option:
...
regions: [
{start: fctGetItemLessThan1() - 1, end: fctGetItemLessThan1(), class: 'red-color'}
]
...
In your case, fctGetItemLessThan1() - 1 = 9, the result is as follow
I have the following code which display the line on the chart. I could not able to find how to format the x axis. I would like to show every thousand interval similar to y axis (0,1000,2000,3000,4000, etc). I am using Kendo UI.
function createChart() {
$("#chart").kendoChart({
title: {
text: "Units sold"
},
dataSource: {
data: stats
},
categoryAxis: {
labels: {
step: 1000,
format: "n0"
},
},
series: [{
type: "area",
line: {
style: "smooth"
},
field: "x",
categoryField: "y"
}],
});
}
Here is my fiddle:
http://jsfiddle.net/nDS3S/37/
If I get right, your code doesn't works because the step doesn't really mean that would be shown a label for each 1000, but in fact it will show a label for each serie. So your chart doesn't have 1000 series, that is why only 0 was displayed.
If you change your step to 5, you will see the labels, but displaying the exactly number for that specific serie.
Check this out.
I'm afraid you can't achieve what you want.
I need to have dates on my xaxis on my chart. I collect my data through a range datepicker where the user can enter a range of 14 days. I need the first value on the xaxis to be the start date of the range and the last value to be the end date of the range.
i want the the xaxis labels to read something like "27th Jan 2015" , "28th Jan 2015" or something in that direction and each tic to be 1 day. I've read the API-documentation and i've played around alot with the settings of the chart but for some reason i can not get it to work.
$('#graphColumn').highcharts({
title: {
text: '',
x: -20 //center
},
xAxis: {
categories: [dayArray[0], dayArray[1], dayArray[2], dayArray[3], dayArray[4], dayArray[5], dayArray[6], dayArray[7], dayArray[8], dayArray[9], dayArray[10], dayArray[11], dayArray[12], dayArray[13]]
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
credits: {
enabled: false
},
series: [{
showInLegend: false,
name: ' ',
data: series,
color: '#77B7C5',
marker: {
symbol: 'circle'
}
}, {
showInLegend: false,
name: '1 år sedan',
data: series1yearago,
color: "#71C73E",
marker: {
symbol: 'circle'
}
}]
});
here is my chart. I know the xaxis has categories set now but thats only for the moment, i know it should be datetime. My series are regular int arrays with one number on each index. I would apreciate any help that could be given here!
Edit: Here is a working jsfiddle example: http://jsfiddle.net/g0p00tLv/1
Your data, and how it is formatted, is what we really need to see.
You need to do one of two things:
1) pass your data as an array of [x,y] pairs, where x is either the epoch time stamp (in miliseconds), or a date.UTC object
2) pass your data as a single array of y values, and use the pointStart and pointInterval properties to set the date axis properly.
reference:
http://api.highcharts.com/highcharts#plotOptions.series.pointStart
http://api.highcharts.com/highcharts#plotOptions.series.pointInterval
If you need more info, set up a working fiddle example and post it here.
is it possible to set highcharts to show data only in specific time range, like 2 hours for example, without any zooming.
For example at the beginning i have data for 2 hours from now. And is it possible not to show some points if they do not fit 2 hours from now?
for example, on the highcharts x-axis labels will be always constant like: [12:00, 12:30, 13:00, 13:30, 14-00] even without any data that is related with this time.
And when the new data comes, labels of time shift to new values like: [12:30, 13:00, 13:30, 14:00, 14:30]
I tried to do like:
this.chart = new Highcharts.Chart({
chart: {
reflow: false,
type: 'line',
renderTo: newSensor.get('id')
},
title: {
text: newSensor.get('name')
},
xAxis: {
minRange : 1
},
yAxis: {
title: {
text: 'Values'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: dataToChart,
plotOptions: {
series: {
lineWidth: 1,
turboThreshold: 0,
threshold: null
}
}
});
But minRange is not right property for this.
I think you should set min and max for xAxis. Then, when new point is added (using addPoint() ) you should set new extremes using
chart.xAxis[0].setExtremes( newMin, newMax )