I could not find the color value for each Axis in highcharts api documentation.
in other words I mean changing color of numbers at left/down side of each axis.
currently the configuration for Axis is like this:
xAxis: {
lineColor: '#d8efe3',
labels: {
formatter: function() {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
lineColor: '#d8efe3',
gridLineColor: '#d8efe3',
title: {
text: null
},
labels: {
formatter: function() {
return this.value / 1000 +'k';
}
}
},
edit:
there is nothing special about the chart, anyway assume the chart is as simple as this one:
http://jsfiddle.net/highcharts/llexl/
I believe you are referring to the labels. Just change the style for the yAxis label.
DEMO
xAxis: {
lineColor: '#d8efe3',
labels: {
formatter: function() {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
labels: {
style: {
color: 'orange'
},
formatter: function() {
return this.value / 1000 +'k';
}
},
lineColor: '#d8efe3',
gridLineColor: '#d8efe3',
title: {
text: null
}
},
Hope this helps and let me know if you have any questions!
This should change x and y axis label colors to red. I believe this is what you are looking for.
xAxis: {
lineColor: '#d8efe3',
labels: {
style: {
color: 'red'
},
formatter: function() {
return this.value; // clean, unformatted number for year
}
}
}
},
yAxis: {
lineColor: '#d8efe3',
gridLineColor: '#d8efe3',
title: {
text: null
},
labels: {
style: {
color: 'red'
},
formatter: function() {
return this.value / 1000 +'k';
}
}
},
example
Docs
Related
I am trying to set the start of drawing column data from a minimum value, but cannot figure out how to do this. That is, that the axis starts with a value of -43, and not with 0 (see screenshots).
what i have
I want to get something like this:
what i want
chart: {
renderTo: 'container',
backgroundColor: 'transparent'
},
tooltip: {
formatter() {
return `${moment(this.x).format('MMM DD')}: ${this.y.toFixed(2)}`;
}
},
plotOptions: {
column: {
pointStart: -50,
dataLabels: {
enabled: true,
format: '{point.y:.2f}'
}
}
},
title: {
text: ''
},
yAxis: {
plotLines: [{
zIndex: 1,
color: '#5c5c5c',
value: 0,
width: 3,
}],
title: {
text: ''
}
},
xAxis: {
gridLineWidth : 1,
labels: {
formatter() {
return moment(this.value).format('MMM DD');
}
}
},
legend: {
enabled: false
},
series: [{
data: [...this.monthData.resultByDays.map(res => [res.date, res.result])],
type: 'column'
}]
I think that a good approach will be to use the columnrange series rather than basic column. In the columnrange it is possible to set the range where the point could start from.
Demo: https://jsfiddle.net/BlackLabel/ur6qgnbz/
And the code to hide the '-60' data label:
dataLabels: {
enabled: true,
formatter() {
if(this.y === -60) {
return false
} else {
return this.y
}
}
}
API: https://api.highcharts.com/highcharts/plotOptions.columnrange
Im trying to make this chart have multiple Y Axes, all of which have different values and tick intervals. Like Signal Strength be on a scale of 0%-100%, Temperature 0F-100F and Main Power be 0V to 25V but cant seem to figure it out. Here's my jFiddle:
http://jsfiddle.net/0k5k8ygz/
Code:
function createChart() {
Highcharts.stockChart('container', {
rangeSelector: {
selected: 4
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°F',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Main Power',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} volts',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Signal Strength',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: seriesOptions
});
}
$.each(names, function(i, name) {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});
If you add some data to each of the y-axes, they will get tick marks automatically. You assign data to a specific y-axis using the series.yAxis index:
seriesOptions[i] = {
name: name,
data: data,
yAxis: i,
};
If you also want to specify a valid range for the y-axes, you can set min and max on each individual axis:
...
labels: {
format: '{value} volts',
},
min: 0,
max: 25,
...
http://jsfiddle.net/0k5k8ygz/5/
I have a area chart build with highcharts, I am trying to reduce some spaces between y axis cell columns means reduce height from 0 to 1 , 1 to 2 etc, but not getting proper result. how to achieve it ?
jQuery(document).ready(function () {
var txt = document.getElementById('hdnYaxis');
var txtFoxXAxis = document.getElementById('hdnXaxis');
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Monthly Status'
},
xAxis: {
categories: $.parseJSON(txtFoxXAxis.value),
labels: {
style: {
color: 'red'
}
},
maxPadding: 0,
},
tooltip: {
pointFormat: '{series.name} <b>{point.y:,.0f}'
},
plotOptions: {
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: $.parseJSON(txt.value)
});
});
set tickPixelInterval in yAxis ,use this:
yAxis: {
tickPixelInterval: 10 // whatever you want
}
Set maxPadding on yAxis as 0.
yAxis:{
maxPadding:0
}
For some reason, the Chart's dataLabels are only displaying on bottom level of this drilldown. The dataLabels are set for 'column'. However, they don't display for every column rendered.
What do I need to change to get the dataLabels to display on all the levels of the drilldown?
Thanks.
See below for code and jsfiddle:
$('document').ready(function () {
var Drilldown = (function () {
var chart,
colors = Highcharts.getOptions().colors;
function setChart(name, categories, data, color, type) {
chart.xAxis[0].setCategories(categories);
for (var i = 0; i < chart.series.length; i++) {
chart.series[0].remove(true);
}
chart.addSeries({
name: name,
data: data,
color: color || 'white'
});
}
function buildDrillDown() {
var stores = ['92nd Gessner', 'Annco'],
dayparts = ['Breakfast','Lunch','Afternoon','Dinner','Late Night'],
categories = ['Gross Sales-06/18/2013','Qty Sold-06/18/2013','Gross Sales-06/19/2013','Qty Sold-06/19/2013'],
name = 'Gross Sales by Store Name',
moneyLabel = {
enabled: true,
color: '#89A54E',
style: {
fontWeight: 'bold'
},
formatter: function() {
return '$'+ Highcharts.numberFormat(this.y, 0);
}
},
data = [{
y: 9297.73,
color: colors[2],
drilldown: {
name: 'Gross Sales-06/18/2013',
dataLabels: moneyLabel,
categories: stores,
data: [{
y: 4567.05,
color: colors[0],
drilldown: {
name: "Gross Sales by Daypart",
categories: dayparts,
data: [310.71,1279.32,952.65,1059.91,964.46],
color: colors[0]
},
},
{
y: 4730.68,
color: colors[1],
drilldown: {
name: "Gross Sales by Daypart",
categories: dayparts,
data: [186.75,1629.05,881.34,1373.96,659.58],
color: colors[1]
},
}]
}
}];
chart = new Highcharts.Chart({
chart: {
renderTo: 'drilldown_display',
type: 'column'
},
title: {
text: 'Drillable Column Chart'
},
subtitle: {
text: 'Click the columns to view Stores. Click again to view Dayparts.'
},
xAxis: {
categories: categories
},
yAxis: { // Primary yAxis
labels: {
format: '${value}',
style: {
color: '#89A54E'
}
},
title: {
text: "Gross Sales",
style: {
color: '#89A54E'
}
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color: '#89A54E',
style: {
fontWeight: 'bold'
},
formatter: function() {
return '$' + this.y
}
},
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
}
}
},
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>Gross Sales: ' + this.y + '</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category;
} else {
s += 'Click to return to the beginning';
}
return s;
}
},
series: [{
name: name,
data: data,
color: 'white',
pointWidth: 75,
}],
exporting: {
buttons: {
customButton: {
text: 'Flat Chart',
onclick: function () {
$( "#chart_display" ).show();
$( "#drilldown_display").hide();
$("#pie_display").hide();
}
}
}
}
});
}
return {
buildDrillDown: buildDrillDown
};
})();
Drilldown.buildDrillDown();
});
http://jsfiddle.net/K9fQU/
Actually your code is kinda working. The data label behavior is inconsistent. When I play around your fiddle, the data label disappear for sure after I comment out enabled: true in dataLabels and run. However, if I added it back and run again, the data label shows up, hiding inside the plot area. Since you use the same color #89A54E for data label as the first level column, it's not quite obvious.
The reason that the data label hides inside the column is you didn't configure to handle the case when data label is overflow.
How to handle data labels that flow outside the plot area. The default is justify, which aligns them inside the plot area. For columns and bars, this means it will be moved inside the bar. To display data labels outside the plot area, set crop to false and overflow to "none". Defaults to justify.
So what you need to do is, set crop to false and overflow to "none":
plotOptions: {
column: {
dataLabels: {
overflow: 'none',
crop: false,
enabled: true,
color: '#89A54E',
style: {
fontWeight: 'bold'
},
formatter: function() {
return '$' + this.y
}
},
// other configuration
}
Do you see the range problem when I use multiple yAxis? How Can I solve this problem?
It is the same code I use!!
yAxis: [
{ labels: { formatter: function() { return this.value + '".$unitall1."' }, style: { color: '#89A54E' } }, title: { text: '".$graphall1."' , style: { color : '#4572A7' } }, opposite: true },
{ labels: { formatter: function() { return this.value + '".$unitall2."' }, style: { color: '#4572A7' } }, title: { text: '".$graphall2."' , style: { color : '#89A54E' } }, },
{ labels: { formatter: function() { return this.value + '".$unitall3."' }, style: { color: '#000000' } }, title: { text: '".$graphall3."' , style: { color : '#000000' } }, },
{ labels: { formatter: function() { return this.value + '".$unitall4."' }, style: { color: '#C4087C' } }, title: { text: '".$graphall4."' , style: { color : '#C4087C' } }, opposite: true }
],
You can use offset parameter to set distance yAxis properly.
http://api.highcharts.com/highstock#yAxis.offset
Use the yAxis.offset property to set the offset for each of your y-axis. Looks like the default gap between two axes is lesser in highstock then it is in highchart
You have two options:
use yAxis.offset for each axis, see: http://api.highcharts.com/highstock#yAxis.offset
use Highstock, but create chart using new Highcharts.Chart() instead of new Highcharts.StockChart(). In that case you can use Highstock features like ordinal axis, range selector, scrollbar etc. You have to just enable each of features directly: http://api.highcharts.com/highstock#scrollbar.enabled