How can I add gradient color in an area chart. Please help. I need the gradient in the pink colored area of the graph.
Following is my code :
$(function () {
$('#container').highcharts({
chart: {
type: 'area',
animation: {
duration: 1000
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name: 'Dummy Data',
data: [1, 2, 3, 4, 5, 4, 3, 2, 1, 2, 3, 4],
color: 'pink'
}]
});
});
Please take look at the example http://www.highcharts.com/demo/line-time-series
EDIT:
http://jsfiddle.net/sbochan/HkeXp/
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, '#ff0000'],
[1, '#f4f4f4']
]
},
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/
I need create a highchart like this image
so what options i should set for chart?
for straight lines between markers and empty circle for markers and have dotted lines in background...
To make a step line, instead of a regular line, use series.step. To change the markers use series.marker. And to make the grid lines dashed, use yAxis.gridLineDashStyle. The Highcharts API reference is excellent and has lots of examples.
http://jsfiddle.net/jbo9jag5/6/
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
gridLineDashStyle: 'longdash'
},
series: [{
data: [1, 2, 3, 4, 3, 6, 7, 1, 9],
step: 'right',
name: 'Right',
marker: {
fillColor: '#FFFFFF',
radius: 5,
lineWidth: 2,
lineColor: null // inherit from series
}
}]
});
I'm new to Highcharts and I need help creating a graph that looks like the one displayed in the picture below.
Really would appreciate the help on this.
Use gridLineWidth to set the width of the grid: gridLineWidth: 2,
Be sure to set the gridZIndex to a higher number to get it over the series: gridZIndex: 4.
To reduce the columns' space use poitPadding and groupPaddingenter code here under plotOptions.
pointPadding: 0,
groupPadding:0,
Check the example (jsfiddle)
$('#container').highcharts({
chart: {
type: 'column',
backgroundColor: '#000000',
plotBackgroundColor: '#808080'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
],
gridLineWidth: 2,
gridZIndex: 4,
gridLineColor:'#000000'
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
gridLineWidth: 2,
gridZIndex: 4,
gridLineColor:'#000000'
},
plotOptions: {
series: {
pointPadding: 0,
groupPadding:0,
borderColor:'#808080',
}
},
series: [{
name: 'Tokyo',
color:'#D2691E',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
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/
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]
}]
});
});