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/
Related
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 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 have a stacked bar graph with two data attributes. I want to make the second bar looked grayed out with a dashed border. I've tried "dashStyle: 'longdash' but that and anything else i've tried doesn't work.
This is the look i'm going for:
In general it's not supported, but simple hack can enable this: http://jsfiddle.net/ztRF5/132/ (note: required is latest version from github).
// mapping between SVG attributes and the corresponding options
Highcharts.seriesTypes.bar.prototype.pointAttrToOptions.dashstyle = 'dashStyle';
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
bar: {
stacking: 'percent'
}
},
series: [{
data: [29.9],
borderColor: 'black',
borderWidth: 2,
dashStyle: 'dash'
}, {
data: [13]
}]
});
Notice that in the latest version of HighCharts, Highcharts.seriesTypes.bar.prototype.pointAttrToOptions is no longer defined, thus the code will error out. You can simply comment out the first line (Highcharts.seriesTypes.bar.prototype.pointAttrToOptions.dashstyle = 'dashStyle';) and it will work. (http://jsfiddle.net/willieliao/6c48x39v/)
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
bar: {
stacking: 'percent'
}
},
series: [{
data: [29.9],
borderColor: 'black',
borderWidth: 2,
dashStyle: 'dash'
}, {
data: [13]
}]
});
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/
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]
}]
});
});