I am trying to make the y-axis visible using various ways, but every time I change the color of the axis the color of the whole graph i.e the series changes. Is there a way to make the y and x axes visible without changing the graph color.
xAxis: {
gapGridLineWidth: 0
},
yAxis: {
opposite:false,
},
navigator: {
enabled:false,
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false,
},
You should be able to change color of your axes without changing color of your series.
You can use tickColor, lineColor, gridLineColor and labels.style for setting colors of your label:
http://api.highcharts.com/highcharts/yAxis.lineColor
yAxis: {
lineColor: 'red',
gridLineColor: 'red',
tickColor: 'red',
labels: {
style: {
color: 'red'
}
}
},
xAxis: {
lineColor: 'red',
tickColor: 'red',
labels: {
style: {
color: 'red'
}
}
},
Here you can see an example how it can work: http://jsfiddle.net/c9bfmzsm/
Related
In Highcharts, how do I control the gaps between categories?
I've highlighted the area I am talking about in blue below:
I want to make my highchart chart gaps look like this powerpoint version on the left below. The bars in PowerPoint go all the way to the end of the plot area, but highcharts have this big gap.
https://jsfiddle.net/15u0r64s/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Total', 'Male', 'Female', 'Other'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Total',
data: [10, 20, 31, '']
}, {
name: 'Male',
data: [10, 20, 60, 2]
}, {
name: 'Female',
data: [10, 20, 61, '']
}, {
name: 'Other',
data: [10, 20, 65, 4]
}]
});
You need to edit groupPadding and pointPadding properties:
plotOptions: {
bar: {
groupPadding: 0.05,
pointPadding: 0
}
}
Live demo: https://jsfiddle.net/BlackLabel/oqpxmL18/
API Reference:
https://api.highcharts.com/highcharts/series.bar.groupPadding
https://api.highcharts.com/highcharts/series.bar.pointPadding
I am looking for the desired output like so:
series.dataLabels.align: left/right` isn't cutting it. It only makes it appear just after the blue rectangle of each bar and not on the far right, which is not what I want. I have also looked at the highcharts api a little bit and I was not able to find a chart option that gets the job done. Thanks in advance.
My current chart options:
var options = {
chart: {
renderTo: 'container',
type: 'bar',
},
credits: {
enabled: false
},
colors: ['#024a7a'],
title:{
text:null
},
plotOptions: {
bar: {
animation: false
},
series: {
showInLegend: false,
states: {
hover: {
enabled:false
}
}
}
},
tooltip: {
enabled: false
},
xAxis: [{
categories: ['SAC 1', 'SAC 2', 'SAC 3'],
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
}],
yAxis: [{
gridLineWidth: 0,
labels: {
enabled: false
},
minorGridLineWidth: 0,
title: {
text: null
}
}],
series: [{
data: [10, 5, 15],
dataLabels: {
align: 'left',
enabled: true
}
}]
};
var chart = new Highcharts.Chart(options);
});
One of the ways to achieve that effect is passing specific xAxis and yAxis configuration objects, which contains few parameters:
xAxis: [{
opposite: true,
type: 'category',
labels: {
formatter: function() {
return this.chart.series[0].processedYData[this.pos] + ' %'
},
},
lineWidth: 0,
minorTickWidth: 1,
tickWidth: 0
},
yAxis: {
title: {
enabled: false
},
labels: {
enabled: false
},
gridLineWidth: 0,
max: 100
},
Configuration above fills labels by the series data values, so you should prepare series array similar like below:
series: [{
data: [31, 15, 9, 5]
}],
Lets look for this JSFiddle:
http://jsfiddle.net/daniel_s/yp9h6b7m/
Best regards!
When selecting the "All"-range in a HighStock chart with technical indicators then
the stock price (AAPL stock price) is not listed (most of the time, sometimes it appears) in the tooltip.
Open the sample chart here: http://jsfiddle.net/laff/SRfW6/
Hover over the chart and notice that the stock price is listed in the tooltip.
Click on the 'All' range selection.
Hover over the chart and notice that the stock price is no longer listed most of the time in the tooltip.
Has anybody an idea what the problem might be?
This the code from the example:
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
$(function() {
$('#container').highcharts('StockChart', {
title : {
text : 'MACD of AAPL stock price'
},
subtitle: {
text: 'From may 15, 2006 to May 10, 2013'
},
yAxis: [{
title: {
text: 'Price'
},
height: 200,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}, {
title: {
text: 'MACD'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}],
tooltip: {
crosshairs: true,
shared: true
},
rangeSelector : {
selected : 1
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
series : [{
name: 'AAPL Stock Price',
type : 'line',
id: 'primary',
data : data
}, {
name : 'MACD',
linkedTo: 'primary',
yAxis: 1,
showInLegend: true,
type: 'trendline',
algorithm: 'MACD'
}, {
name : 'Signal line',
linkedTo: 'primary',
yAxis: 1,
showInLegend: true,
type: 'trendline',
algorithm: 'signalLine'
}, {
name: 'Histogram',
linkedTo: 'primary',
yAxis: 1,
showInLegend: true,
type: 'histogram'
}]
});
});
});
Just adding this code to plotOptions.series seems to fix it (JSFiddle demonstration):
dataGrouping: { }
It appears that given your original code dataGrouping was somehow null.
I'll be honest. I don't know why. Looks borderline buggy.
With HighCharts 3.0, it is now possible to indicate to colors above and below one threshold. Like this example :
http://jsfiddle.net/highcharts/YWVHx/
Following code :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: data,
color: '#FF0000',
negativeColor: '#0088FF'
}]
});
});
});
Is it possible to have another threshold with a third color, like this for example :
Thanks in advance for your help.
It actually is possible if you don't mind plotting the data twice.
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
threshold : 0,
data: data,
color: 'orange',
negativeColor: 'blue'
},
{
name: 'Temperatures',
threshold : 10,
data: data,
color: 'red',
negativeColor: 'transparent'
}]
});
});
http://jsfiddle.net/YWVHx/97/
A feature to solve this without "hacks" was added in Highcharts 4.1.0 (February 2015), called zones (API). The given problem can be solved like this, using zones:
plotOptions: {
series: {
zones: [{
value: 0, // Values up to 0 (not including) ...
color: 'blue' // ... have the color blue
},{
value: 10, // Values up to 10 (not including) ...
color: 'orange' // ... have the color orange
},{
color: 'red' // Values from 10 (including) and up have the color red
}]
}
}
See this JSFiddle demonstration of how it looks.
Unfortunately this option is not possible, but you can request your suggestion in http://highcharts.uservoice.com and vote for it.
By the way, I can try use a plotLine, like this:
yAxis: {
title: {
text: 'My Chart'
},
plotLines: [{
id: 'limit-min',
dashStyle: 'ShortDash',
width: 2,
value: 80,
zIndex: 0,
label : {
text : '80% limit'
}
}, {
id: 'limit-max',
color: '#008000',
dashStyle: 'ShortDash',
width: 2,
value: 90,
zIndex: 0,
label : {
text : '90% limit'
}
}]
},
http://jsfiddle.net/gabrielesandoval/efHq7/
Is there a way to fill in the gap between the y-axis and the first point. The first point on my chart should be "25 years" and i would like the area between 0 and 25 to be filled in as well. Even if the tooltip doesn't work for that point, I would just like to visually show that the values between 0 and the first point.
I tried adding a point with a x value of zero but that didnt work. The only area charts I have seen where there is no gap between the two axis and the area are examples where the chart is inverted. Is there a proper way to do this?
Current Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Monthly Comparison'
},
subtitle: {
text: '1 vs 2'
},
xAxis: {
min: 0,
categories: [0, '25 years', '30 years', '35 years', '40 years', '45 years']
},
yAxis: {
labels: {
formatter: function() {
return '$' + this.value;
}
},
min: 0,
title: {
text: 'Cost'
}
},
tooltip: {
shared: true,
valuePrefix: '$'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
area: {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'area',
name: 'series1',
data: [['',60],['25 years',60], ['30 years',60], ['35 years',60], ['40 years',60], ['45 years',60]]
}, {
type: 'area',
name: 'series2',
data: [['',90], ['25 years',100], ['30 years',175], ['35 years',300], ['40 years',400], ['45 years',400]]
}]
});
});
You should set minPadding/maxPadding as 0, but these parameters doesn't work with categories. So you need to use numeric xAxis, instead of categories.