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
Related
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/
We are having problems with Highchart Column chart, the yaxis labels displayed are not consistent. The Column bars generated are between two yaxis labels. This gives the appearance of there is no yaxis scales and the bars are floating.
And also it is not generating the 0 yaxis scale from which the bar starts all the time. We have both negative and positive values, so the bar should be displayed above and below the 0 yaxis line.
We cannot post a sample because the behaviour is random, it works correctly most of the time only on some occasions it is not working (quiet regular to ignore though).
Please find below the column chart setting options:
{
chart: {
type: 'column',
height: response.ChartHeight ? response.ChartHeight : ChartDefaults.Height
},
xAxis: {
categories: response.TimePeriodTranslated,
labels: {
style: {
fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
}
}
},
yAxis: {
startOnTick: true,
title: {
text: ''
},
labels: {
style: {
fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
}
}
},
tooltip: {
useHTML: true,
formatter: function () {
return this.series.name + "<br>" + this.x + " </b> : <b> " + this.y.toFixed(response.NumberOfDecimal ? 2 : response.NumberOfDecimal);
}
},
title: {
text: response.ShowAsAtDate == 1 ? modelContents.GetTranslation('AsAt') + ' ' + response.AsAtDate : '',
align: 'left',
//x: 70,
style: {
fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
}
},
subtitle: {
text: '',
style: {
fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
}
},
legend: {
enabled: true,
itemStyle: {
fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
}
},
credits: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: response.ShowDataLabels == 1 ? true : false,
formatter: function () {
return this.y ? this.y.toFixed(response.NumberOfDecimal ? 2 : response.NumberOfDecimal) : this.y;
},
style: {
fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
}
},
//To set the bar width.
//pointWidth: GetBarSettings(dataToPlot)
},
column: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
// This can be handled in the drilldown event but our requirements with drilldown need this event implementation
SetChart(e, data, divId, dataId);
}
}
}
}
},
series: dataToPlot
};
Thanks,
Sarath
I am to plot column and line chart with grouped categories.js
below is the link of my code
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "column"
},
title: {
text: null
},
series: [{"name":"market1","data":[1,3,3,0]},{"name":"market2","data":[0,0,0,0,3,2,3,0]},{"name":"market3","data":[3,1,3,0], type: 'line'}],
xAxis: {
categories:[{"name":"newyork","categories":["p1","p2","p3","p4"]},{"name":"washington","categories":["p1","p2","p3","p4"]}]
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} mm',
style: {
color: '#4572A7'
}
},
opposite: true
}],
});
});
below is the link of my jsfiddle
http://jsfiddle.net/srikanth_kulkarni/gmrpY/
i am trying to get market3(line chart) to be measured against rainfall(second y axis) instead of temprature(first y axis).
Any suggestions would be really helpful
Regards,
Srikanth Kulkarni
Fiddle update
You need to set yAxis:Number|String:
{"name":"market3","data":[3,1,3,0],yAxis:1, type: 'line'}],
index starts with zero; so 1 here for yAxis 2.
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