I have a chart with two series. One series uses the left YAxis, the other uses the right YAxis. I would like the labels on each axis to have the same color as their respective series.
I know this can be done by manually assigning the colors, eg:
yAxis: [
{
labels: {
style: {
color: "red"
}
}
},
{
labels: {
style: {
color: "green"
}
}
}
],
series: [
{
color: "red",
yAxis: 0,
data: []
},
{
color: "green",
yAxis: 1,
data: []
}
]
But I would ideally prefer not to assign colors manually. When you don't specify any colors, the series colors are set automatically. I would like for the corresponding axis labels to have the same color.
To change the colors automatically, you can use the chart load event and update y-axes:
chart: {
events: {
load: function() {
this.series.forEach(function(s) {
s.yAxis.update({
labels: {
style: {
color: s.color
}
}
}, false);
});
this.redraw();
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/u0myw5az/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Axis#update
Related
I am trying to create a scheduling Gantt. I've based this gantt off of the Resource Management example. Lots of good stuff so far! I'm having a few problems, which I will make separate posts for.
The next problem that I'm dealing with is that I have many rows of data in the Gantt chart. I've added vertical scrolling capabilities, but the headers above the chart disappear when scrolling. I've found examples where the headers don't scroll, but am unable to determine what in the code keeps the headers in place.
Here's the fiddle: https://jsfiddle.net/eddiem9/h9qw5rsj/15/
chart = Highcharts.ganttChart('container', {
series: series,
scrollablePlotArea: {
minHeight: 700
},
plotOptions: {
series: {
color: '#FF0000'
}
},
scrollbar: {
enabled: true
},
title: {
text: 'Irrigation Schedule',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize: '24px'
}
},
tooltip: {
pointFormat: '<span>Schedule: {point.schedule}</span><br/><span>From: {point.start:%m/%d %H:%M}</span><br/><span>To: {point.end:%m/%d %H:%M}</span>'
},
xAxis:
[{
labels: {
format: '{value:%H}' // hour of the day (not working)
},
tickInterval: 1000 * 60 * 60, // HOUR
}, {
labels: {
format: '{value:%B %e}' // day name of the week
},
tickInterval: 1000 * 60 * 60 * 24, // Day
}
],
yAxis: {
type: 'category',
grid: {
columns: [{
title: {
text: 'Pump'
},
categories: map(series, function (s) {
return s.PumpName;
})
}, {
title: {
text: 'Zone'
},
categories: map(series, function (s) {
return s.IrrigationZoneName;
})
}, {
title: {
text: 'Status'
},
categories: map(series, function (s) {
return s.CurrentStatus;
})
}
]
}
}
})
Thanks in advance!
Eddie
You were so close to making it work, you just had a small mistake. scrollablePlotArea object must be defined inside the chart object.
Demo: https://jsfiddle.net/BlackLabel/bu5hfxm1/
chart: {
scrollablePlotArea: {
minHeight: 700
}
},
API: https://api.highcharts.com/gantt/chart.scrollablePlotArea
EDIT:
After digging into the issue I think that a better option will be use the scrollbar for the yAxis than scrollablePlotArea.
Demo: https://jsfiddle.net/BlackLabel/s013uqa5/
stock module is required
Example of the options config for yAxis:
scrollbar: {
enabled: true,
showFull: false
},
max: 5,
API: https://api.highcharts.com/highstock/yAxis.scrollbar
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
}
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
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