Highcharts can connect a series line between null values, but it appears that it cannot connect a line between points with value of 0 if the yAxis min is also set to 0. Is there a workaround?
Here's an example: http://jsfiddle.net/p2EYM/2/
What the chart looks like (note breaks in line):
and the Highcharts code:
$(function () {
$('#container').highcharts({
title: {
text: 'Points with zero value are not connected by line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
offset: 10,
},
plotOptions: {
series: {
connectNulls: true
}
},
yAxis: {
min: 0,
},
series: [{
data: [20, 0, 0, 0, 0, 40, 50, 10, null, null, 0, 0]
}]
});
});
Related
Is there a way to change the color of a line on my label?
Here is my code:
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
lineColor: '#FF0000',
labels:{
lineColor: '#FF0000',
},
gridLineColor: 'red',
},
yAxis: {
lineColor: '#FF0000',
lineWidth: 1,
labels:{
x: -50,
}
},
For reference: http://jsfiddle.net/vq1tqhrs/
You need to set tickColor, like this:
xAxis: {
tickColor: 'red'
...
}
Working example: http://jsfiddle.net/ewolden/vq1tqhrs/1/
Can anyone help me set step value on x-axis or y-axis dynamically say on clicking a button (not at the design time). In the example below, I should be able to set the step/interval as 100 instead of 250.
here is the example fiddle
http://jsfiddle.net/PanicJ/H2pyC/8/
$(function () {
var setA = [29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4];
var setB = [129.2, 144.0, 176.0, 135.6, 248.5, 316.4, 694.1, 795.6, 954.4, 1029.9, 1171.5, 1506.4];
var data = Math.random() < 0.5 ? setA : setB;
var height=Math.max.apply(Math, data);
if(height > 1000){
height = 1000;
}
$('#container').highcharts({
chart: {
marginRight: 80 // like left
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: [{
lineWidth: 1,
max: height,
min: 0,
title: {
text: 'Primary Axis'
}
}],
series: [{
data: data
}]
});
});
The tickInterval is what you want to change:
$('#setStep').click(function () {
var chart = $('#container').highcharts();
chart.yAxis[0].update({
tickInterval: 100
});
});
http://jsfiddle.net/blaird/H2pyC/85/
I want my chart to start from left most corner from zero and without the gap. Please help me to out on this.
Here is my chart: http://jsfiddle.net/ssarabando/egQH8/2/
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min: 0
},
yAxis: {
min: 0,
max: 100, startOnTick: false
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 0, 0, 0, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
Here is the screen shot of what I'm talking about:
http://awesomescreenshot.com/0c347ofz76
categories and startOnTick doesn't work well together. But you can use labels, tickInterval and min/maxPadding together like this to make it work:
var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickInterval: 1,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
}
Here's the DEMO
You can set min/max values and tickmarkPlacement as 'on'.
Example: http://jsfiddle.net/egQH8/30/
I am new to Highchart.
I have a line chart. X axis is a series of dates, and the Y values are only integers.
How can I make Highchart display only integers on the values of Y axis?
Try to null all values in xAxis or use following code.
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
enabled: false
}
}
Please see the example
http://jsfiddle.net/ssgoanb5/
See the Doc: http://api.highcharts.com/highcharts#xAxis.labels.enabled
New Updates:
For avoiding decimals values on graph Axis(x/y), Add allowDecimals attributes.
See the Doc. http://api.highcharts.com/highcharts#yAxis.allowDecimals
yAxis: {
allowDecimals: false,
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}
Please check the updated JSfiddle: http://jsfiddle.net/ssgoanb5/6/
I want to render a histogram/line chart using HighCharts.
I don't want to hard code the array which is used by series.
My data that I wish to render is in the object display, which looks like:
0: o, 107983,
1: 1, 347923,
2: 2, 182329,
.
.
.
My code is here:
function RenderChart(display) {
myDisplay = display;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Metric histogram'
},
xAxis: {
//categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
minPadding: 0.05,
maxPadding: 0.05
},
plotOptions: {
line: {
animation: false
},
column: {
groupPadding: 0,
pointPadding: 0,
borderWidth: 0
}
},
series: [{
data: [myDisplay]
}]
});
};
This doesn't render the line chart. It renders an empty chart.
run a routine such that the response you get is processed as accepted by the highchart. then you can assign the resultant to the data directly.
try this, it will work