Highcharts | Making multiple y axis scales - highcharts

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/

Related

Axis with wrong interval

Please see picture and code below. Sample in JSFiddle https://jsfiddle.net/KampfmeierDirk/ufjazwp9/1/
The ticks should start at the minimum 20185351 with the given interval 10101. The next tick should be at 20195452 and so on.
But the y-axis starts at 0 and the first tick to show is 20191899 ( = 1999 * 10101 ). Is it possible to shift the ticks in the desired way?
Thanks and kind regards, Dirk
Highcharts.chart('container', {
chart: {
type: 'bar'
},
plotOptions: {
series: {
stacking: 'normal'
}
},
yAxis: {
min: 20185351,
max: 20387371,
tickInterval: 10101,
startOnTick: false,
endOnTick: false,
reversedStacks: false,
labels: {
format: '{value}',
style: {
fontSize: '8px'
}
}
},
series: [{
name: 'A',
data: [20185351]
},{
name: 'B',
data: [100000]
},{
name: 'C',
data: [10000]
}]
});
Use tickPositioner option:
yAxis: {
tickInterval: 10101,
reversedStacks: false,
tickPositioner: function(){
var positions = [];
for (var i = 20185351; i <= 20387371; i+= 10101) {
positions.push(i);
}
return positions;
},
labels: {
format: '{value}',
style: {
fontSize: '8px'
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/h4rfju98/
API: https://api.highcharts.com/highcharts/yAxis.tickPositioner

Highcharts dataLabels not showing in all levels of drilldown

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
}

highchart Axis values color

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

how do I get two highcharts on one page?

I have two charts that I am trying to load on separate div's on the same page, they are similar but one is a drill down and the other isn't. I have tried wrapping the entire function with var chart = $('#review').highcharts({ but it doesn't work.
The two charts are below:
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['Metric 1', 'Metric 2', 'Metric 3','metric 4'],
name = 'Votes',
data = [{
y: 1,
color: colors[0],
}, {
y: 2,
color: colors[1],
}, {
y: 3,
color: colors[2],
},{
y: 5,
color: colors[3],
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
var chart = $('#review').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Review breakdown'
},
xAxis: {
categories: categories
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +'<br><b>'+ this.y +' stars</b><br/>';
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
}, yAxis: {min: 0, max: 5,
title: {text: 'Star Rating'}
}
})
.highcharts(); // return chart
});
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['positive', 'negative', 'sum'],
name = 'Votes',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'Positive votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [10.85, 7.35, 33.06],
color: colors[0]
}
}, {
y: -7.15,
color: colors[3],
drilldown: {
name: 'Negative votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [-4.55, -1.42, -0.23],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Total votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
var chart = $('#votes').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Vote breakdown'
},
subtitle: {
text: 'Click the columns to view breakdown.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total votes'
}
},
plotOptions: {
column: {
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);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +' votes</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' breakdown';
} else {
s += 'Click to return';
}
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
})
.highcharts(); // return chart
});
If you're trying to get two charts on one page then it is VERY simple.
<div id="chart-A" class="chart"></div>
<div class="spacer"></div>
<div id="chart-B" class="chart"></div>
CSS - Just to make the example a little easier on the eyes
.chart {
height: 200px;
}
.spacer {
height: 20px;
}
JavaScript
$(function() {
// If you need to specify any global settings such as colors or other settings you can do that here
// Build Chart A
$('#chart-A').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart A'
},
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
},
yAxis: {
min: 0,
title: {
text: 'Apple Consumption'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true
},
series: [{
name: 'Apples',
data: [5, 3, 8, 2, 4]
}]
});
// Build Chart B
$('#chart-B').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart B'
},
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
},
yAxis: {
min: 0,
title: {
text: 'Miles during Run'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true
},
series: [{
name: 'Miles',
data: [2.4, 3.8, 6.1, 5.3, 4.1]
}]
});
});
Here's a JSFiddle: http://jsfiddle.net/engemasa/7cvCX/
I am not really sure what some of your code is trying to do - seems a little needlessly complicated, FWIW
AS to how to make multiple charts on the same page - you do it just like you would make one chart on a page, just do it more than once :)
and make sure you have different container element ids - otherwise you are just overwriting one chart with the next.
One example of multiple charts on a page:
http://jsfiddle.net/kwtZr/1/
there's no relevant code to put here, just click the link

Bar value depend on other bar value in HighChart

I am developing bar chart using Highchart library.I created two y axis, first is for TAM and second for Share.Share is in percentage while TAM is not.For the Share y-axis value, I made the maximum value is 100 and it fixed, but for TAM the value is dynamic.
Referring to the graph
[http://jsfiddle.net/unidha/vGVRb/45/][1]
There a requirement to make Share bar height to depend on the Tam bar height. For example, currently Tam one is 12,300,000 unit and share one is 70% .Based on the graph, Share One is taller than Tam One because it has it's own axis.Now how I want to make the Share One's height is 70% from Tam One 's bar height?
Is it possible to do that?As my understanding for all this time, the bar height should be determined by the y-axis NOT based on other bar height.In case got solution for such requirement, what possibility it should be?
Here the same code that reside in above jsfiddle for your reference.
$(function () {
$('#container').highcharts({
chart: {
type:'column',
zoomType: 'xy',
alignTicks:false
},
title: {
text: 'Performance Snapshot'
},
xAxis: [{
categories: ['Tam One Share One ', ' Tam Two Share Two '],
//NUR
tickWidth:0
}],
yAxis: [{ // Primary yAxis
labels: {
// format: '{value}%',
style: {
// color: '#89A54E'
color: 'FFFFFF'
},
//NUR
step:2,
y:0
} ,
min: 0,
minRange:0.1,
max:100,
title: {
text: 'Share',
style: {
// color: '#89A54E'
color: '#4572A7'
}
}
}, { // Secondary yAxis
title: {
text: 'Tam',
style: {
color: '#4572A7'
}
},
labels: {
//NUR format: '{value} unit',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
series: [{
name: 'Tam Unit',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [12300000, 34400000],
tooltip: {
valueSuffix: ' unit'
},
groupPadding: 0
}, {
name: 'Share',
color: '#89A54E',
type: 'column',
data: [70,40],
tooltip: {
valueSuffix: '%'
},
groupPadding: 0
}]
});
});
Thanks
You can do this, but you need to pass series data as calculated values, not percent, for example: http://jsfiddle.net/vGVRb/48/
tooltip: {
shared: true,
formatter: function () {
var s = this.x,
points = this.points,
len = points.length;
for (var i = 0; i < len; i++) {
var p = points[i];
console.log(p);
s += '<br><span style="color:' + p.series.color + '">' + p.series.name + '</span><span>: ' + p.point.label + '</span>';
}
return s;
}
},
series: [{
name: 'Tam Unit',
color: '#4572A7',
type: 'column',
data: [{
y: 12300000,
label: '12300000 units'
}, {
y: 34400000,
label: '34400000 units'
}],
groupPadding: 0
}, {
name: 'Share',
color: '#89A54E',
type: 'column',
data: [{
y: 12300000 * 0.7,
label: '70%'
}, {
y: 34400000 * 0.4,
label: '40%'
}],
groupPadding: 0
}]
You can observe 'label' property under data, which is used later in tooltip.formatter to make sure you will display proper tooltip. Also, values are calculated accordingly to percentage in label.

Resources