How can I have a line graph with categories, but plot the lines in between the categories label? Is there a way to offset the plot to the beginning of the tick width?
Here is an example: http://jsfiddle.net/jMcfG/1/
I want the line to begin on the origin on the x axis, just like it would if the categories wouldn't be there.
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['0', '1', '2', '3', '4']
},
series: [{
data: [0,3,2,5]
}]
});
});
You can stick you chart to the bottom using threshold property. Like this:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
},
plotOptions: {
series: {
threshold: 0
},
},
xAxis: {
categories: ['0', '1', '2', '3', '4'],
},
series: [{
data: [0,3,2,5]
}]
});
});
http://jsfiddle.net/jMcfG/5/
For x-axis this is not possible with use of an API. You will need to do some custom programming. It's a feture that centers graph if categories are present.
I did find an alternative solution which is to add an imaginary point which mirrors the first plot and then set the x axis min to 1 to cut it out, so the graph will cross the origin and will only be visible on the positive side.
http://jsfiddle.net/jMcfG/7/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
min: 1,
categories: ['-13', '0', '1', '2', '3', '4']
},
yAxis: {
min: 0,
minPadding: 1
},
series: [{
data: [-1,1,3,2,5]
}]
});
});
Related
I have a chart created with highchart and here is the demo
$(function () {
var seriesData = [["apple",29.9], ["banana",71.5], ["orange",106.4], ["mango",106.4], ["mango",106.4], ["mango",106.4], ["mango",106.4], ["mango",106.4], ["mango",106.4], ["mango",106.4],];
$('#container').highcharts({
chart: {
},
xAxis: {
tickInterval: 1,
labels: {
enabled: true,
color: '#FFFFFF',
formatter: function() { return seriesData[this.value][0];
},
}
},
series: [{
data: seriesData
}]
});
});
and it have many labels placed on x-axis and i can not use rotation option. This is the output i would like to achieve
Set staggerLines: 2 in your xAxis labels, like this:
xAxis: {
labels: {
staggerLines: 2,
...
},
...
},
Working JSFiddle example: http://jsfiddle.net/ewolden/ktgd5h98/
API on staggerlines: https://api.highcharts.com/highcharts/xAxis.labels.staggerLines
I have a column chart which showing wrong dates :
Here is the fiddle of my code
data: [1432883717000,1432883717000,1433916917000]
All my timestamps belong to October 5th 2015, however the axis starts from 1970. Is there setting for enabling auto determination of time axis range?Is it possible to set point interval etc for this graph?
Set the min for the yAxis:
$(function () {
var series1 = [1432883717000, 1432883717000, 1433916917000];
var series2 = [null, 1433221380470, null];
var min1 = Math.min.apply(null, series1);
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: [800, 801, 802]
},
yAxis: {
type: 'datetime',
min: min1
},
series: [{
name: 'due by time',
data: series1
}, {
name: 'completed time',
data: series2
}
]
});
});
http://jsfiddle.net/5ft61jkq/43/
i create an empty highchart and add a series to the chart.
This is my code:
chart = new Highcharts.Chart({
chart: {
renderTo: 'hccontainer',
zoomType: 'x'
},
title: {
text: 'Telegramme'
},
subtitle: {
text: 'Offline'
},
exporting: {
enabled: false
},
legend: {
enabled: true
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
}
});
And here for example i add a series:
$.ajax({
'url' : 'ajax.php',
'type': 'GET',
'data': {
'action' : 'eibmon_hctel',
'hsid': hsid,
'grp': grp,
'df': datefrom,
'dt': dateto
},
success: function(items) {
chart.addSeries({
name: series_name,
data: items
}, true);
},
cache: false
});
The ajax.php send this result:
{"1441614256000":"1","1441586308000":"0","1441523112000":"1","1441515496000":"0","1441360423000":"1"
,"1441344522000":"1","1441341118000":"0","1441254853000":"1","1441238297000":"0","1441094577000":"1"
,"1441086395000":"0","1441086143000":"1","1441085875000":"0","1441085622000":"1"}
The chart will be redrawn but the line is missing. In the legend the new series get displayed. Is it not possible to start with an empty chart?
Thanks
Looks like your JSON structure is icorrect. You should have a x/y fields and number values.
Example:
{
x:"1441614256000",
y:"1"
}
After loading data, you can convert your json into correct form, parsing data in preprocessing.
When using a stacked colomn chart and xAxis type is datetime on the yAxis a lot of dates, although dispatched only 2 dates.
http://jsfiddle.net/jBxbe/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: {
},
plotOptions: {
column: {
stacking: 'normal',
minPointLength: 3
}
},
series: [{
name: 'Ex1',
data: [[1367280000000,8],[1369872000000,26349]]
}, {
name: 'Ex2',
data: [[1367280000000,19196],[1369872000000,31213]]
},]
});
});
With such a minimal amount about data, you are probably better off using a category xaxis instead of datetime. This will give you better control on the display.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Apr 2013','May 2013']
},
yAxis: {
},
plotOptions: {
column: {
stacking: 'normal',
minPointLength: 3
}
},
series: [{
name: 'Ex1',
data: [8,26349]
}, {
name: 'Ex2',
data: [19196,31213]
},]
});
});
Fiddle here.
You can use pointRange parameter http://api.highcharts.com/highcharts#plotOptions.column.pointRange / tickInterval (http://api.highcharts.com/highcharts#xAxis.tickInterval) two categories http://api.highcharts.com/highcharts#xAxis.categories
I am creating a HighChart with a plotLine in it. The plotLine has a fixed value, while the data can vary between charts.
HighChart scales the y-axis automatically based on the maximum value of data, but it doesn't consider the plotLine's value in its calculations.
Hence, if the data range encompasses the plotLine value, the plotLine gets shown, but gets cropped out of the viewport if not.
Example:
$(function () {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Dummy Data by Region'
},
xAxis: {
categories: ['Africa', 'America', 'Asia']
},
yAxis: {
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
series: [{
name: 'Year 1800',
data: [107, 31, 650]
}]
});
});
});
JSFiddle for above code: http://jsfiddle.net/4R5HH/3/
The goal line (in red) is shown for the default data, but if I change the data to [107, 31, 250], then the plotLine goes out of the graph viewport and hence becomes invisible.
One other option that does not introduce data points:
yAxis: {
minRange:450,
min:0,
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
This sets the minimum for the yAxis to 0 (this is unlikely to be false in this case) and the minimum Range to 450.
See updated fiddle.
You need to add in a point to you chart but disable the marker.
I added a new series with scatter plot type and its value equal to the goal value:
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450]
}
See updated jsFiddle: http://jsfiddle.net/wergeld/4R5HH/4/
In some cases, wergeld's solution would be preferable than jank's solution, especially when you are not sure about min and minRange. But wergeld's solution has a minor issue. If you point your mouse over the plot line, it will show a point and tooltip on the point. To avoid this, I have modified his solution and added enableMouseTracking to get rid of the problem.
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450],
enableMouseTracking: false
}
See updated jsFiddle: http://jsfiddle.net/4R5HH/570/
You could simply set the max attribute to the max value you will have:
yAxis: {
max:650 //HERE
plotLines...
},
Adjust the axis while loading the chart:
$(function() {
$('#container').highcharts({
chart: {
events: {
load: function() {
var check = $('#container').highcharts();
var min = check.yAxis[0].min;
var max = check.yAxis[0].max;
var pLine = check.yAxis[0].chart.options.yAxis[0].plotLines[0].value;
if (pLine > max) {
check.yAxis[0].setExtremes(null, pLine);
}
if (pLine < min) {
check.yAxis[0].setExtremes(pLine, null);
}
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar'],
},
yAxis: {
minPadding: 0.30,
plotLines: [{
color: '#FF0000',
width: 2,
value: 200
}]
},
series: [{
data: [70, 60, 95]
}]
});
});