Is there a way to keep the stackLabels on a highcharts stacked column chart, but hide the yAxis?
I have borrowed this fiddle from the HC Author to show the issue. You can toggle the yAxis visibility and this also toggles the stackLabels.
My HighCharts code is:
$(function() {
// Configure the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Highcharts axis visibility'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Peaches']
},
yAxis: {
allowDecimals: false,
title: {
text: 'Fruit'
},
stackLabels: {
enabled: true
},
visible: false
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
data: [1, 3, 2, 4],
name: 'Ola'
}, {
data: [5, 4, 5, 2],
name: 'Kari'
}]
});
var yVis = false,
xVis = true;
$('#toggle-y').click(function() {
yVis = !yVis;
$('#container').highcharts().yAxis[0].update({
visible: yVis
});
});
$('#toggle-x').click(function() {
xVis = !xVis;
$('#container').highcharts().xAxis[0].update({
visible: xVis
});
});
});
Can stackLabels be visible with a hidden yAxis?
You can manipulate on elements in yAxis, instead of set the visibility.
$('#toggle-y').click(function() {
yVis = !yVis;
$('#container').highcharts().yAxis[0].update({
labels: {
enabled: yVis
},
gridLineWidth: yVis ? 1 : 0,
title:{
enabled: yVis
}
});
});
Example:
http://jsfiddle.net/hg1bcva7/
Related
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!
Here is my following chart config. I have been doing some research but couldn't find any help to enabling vertical scrollbar.
I know that I can set overflow-y property for chart container div, but to achieve frozen X-axis I need vertical scroll on series that is not container.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['CITY1', 'CITY2','CITY3','CITY4'],
minorTickLength: 0,
tickLength: 0,
lineWidth: 0,
tickwidth: 0,
},
yAxis: {
max: 100,
tickInterval: 25,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
grouping: false,
stacking: 'normal'
}
},
scrollbar: {
enabled: true
},
series: [{
name: 'Q1',
data: [50, 70,0,35]
},{
name: 'Q2',
data: [20, 0,50,0]
},{
name: 'Q3',
data: [0, 0,40,20]
},{
name: 'Q4',
data: [0, 30,0,20]
}]
});
});
Can anybody suggest me how to enable the vertical scrollbar in Highcharts?
#Swetha: That fiddle is using Highstock library. Highcharts does not support scrollbars. Scrollbars are Highstock only
http://www.highcharts.com/docs/chart-concepts/scrollbar
You could set a fixed height or width to the chart and wrap into a div width overflow-x:auto, it's not the same but it is something at least.
Try this fiddle: http://jsfiddle.net/fj6d2/3076/
This may help you.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type:'bar',
},
xAxis: {
categories: ['CITY1', 'CITY2','CITY3','CITY4'],
min:2,
},
yAxis: {
title: {
text: 'Total fruit consumption'
},
},
plotOptions: {
series: {
grouping: false,
stacking: 'normal'
}
},
legend: {
verticalAlign: 'top',
y: 100,
align: 'right'
},
scrollbar: {
enabled: true
},
series: [{
name: 'Q1',
data: [50, 70,0,35]
}, {
name: 'Q2',
data: [20, 0,50,0]
}, {
name: 'Q3',
data: [0, 0,40,20]
},{
name: 'Q4',
data: [0, 30,0,20]
}]
});
Please see below code for chart.
It is not displaying colors properly as defined in the js.
When I run this js in jsfiddle, it does show me correct colors.
jQuery(document).ready(function () {
var my_chart = {
chart: {
renderTo: 'divTotalOpenPositionsGraph',
type: 'column',
marginLeft: 13, marginBottom: 30,marginTop:5,
fontFamily: 'Arial,Helvetica,sans-serif',
},
credits: {
enabled: false
},
title: {
text: 'Open Position'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
colorByPoint: true,
borderWidth: 0,
animation: {
duration: 5000
},
dataLabels:{
enabled:true,
formatter:function(){
if(this.y > 0)
return this.y;
}
}
}
},
series: [{
name: 'Positions',
data: [6,9]
}],
colors: [
'#f89422',
'#8cc641'
],
xAxis: {
categories: ['Internship','Employment'],
labels: {
enabled: true
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
}
},
};
new Highcharts.Chart(my_chart);
});
Can anyone please correct me on this? I need orange color in first column and green in second column.
Thank you in advanced.
I came across some syntax errors, but as a result I reproduced your example here:
http://jsfiddle.net/WVgDM/
Colors are as you described.
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
I have created a high chart but would like to have a similar voting style to youtube; with positive vs negative. My issue is getting the bar to stay the full width of the graph, I know percentages can fix this but I want whole numbers.
http://jsfiddle.net/u6H3b/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft:0
},
title: {
text: 'votes'
},
credits: {
enabled: false
},
xAxis: {
categories: ['Apples'],
title: {
enabled: false
}
},
exporting: {
enabled: false
},
yAxis: {
min: 0,
max:23,
title: {
enabled: false },
gridLineColor: '#fff',
lineColor: '#fff'
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Yes',
data: [20]
},{
name: 'No',
data: [3]
}]
});
});
One option is to use 'endOnTick':
yAxis: {
endOnTick: false,
http://jsfiddle.net/f3eFd/
If you want the end tick (23) to show, you could also add:
tickInterval:23,
http://jsfiddle.net/bLDpg/
If you really want to get fancy, you can define each tick you need. In the following code, it prints ticks at 0, 3 and at 23.
tickPositioner: function () {
var positions = [0, 3, 23];
return positions;
},
http://jsfiddle.net/aSHz3/
I think, all you need to set is endOnTick: false and maxPadding: 0, see: http://jsfiddle.net/u6H3b/1/
The only problem is that last tick is not displayed, if this is issue for you, use tickPositioner as suggested by SteveP.