I have the code for the chart below which are some horizontal bars (see code). In the desktop version the horizontal bars are fine but in mobile versions I would prefer that the bars turn vertical so it fits the screen better. How can I have the bars to be displayed horizontal in Desktops but vertical in Mobile Devices? The idea is that not only the bars but the legends turn vertical as well. TIA
//Grafica 1
$(function () {
Highcharts.chart('grafica1', {
chart: {
type: 'bar',
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: ' '
},
xAxis: {
type: 'category',
labels: {
useHTML: true
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: null,
},
labels: {
enabled: false,
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '({point.y:.1f} Million tones)%'
}
}
},
series: [{
name: 'Production',
colorByPoint: true,
data: [{
name: 'PACKAGING PAPERS<br>AND BOARDS',
y: 49,
color: '#005eb8',
}, {
name: 'CASE MATERIALS',
y: 29.9,
color: '#fff',
borderWidth : 2,
borderColor : '#005eb8'
}, {
name: 'OTHER PACKAGING & PAPER',
y: 14.4,
color: '#fff',
borderWidth : 2,
borderColor : '#005eb8'
},{
name: 'WRAPPINGS',
y: 4.7,
color: '#fff',
borderWidth : 2,
borderColor : '#005eb8'
}]
}]
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="grafica1" class="chart1Slide2"></div>
You can use responsive option to apply different chart options when some condition is fulfilled (e.g. if width is lower than 500px).
API Reference:
http://api.highcharts.com/highcharts/responsive
Example:
http://jsfiddle.net/u81kfa4k/
Related
In Highcharts, how do I control the gaps between categories?
I've highlighted the area I am talking about in blue below:
I want to make my highchart chart gaps look like this powerpoint version on the left below. The bars in PowerPoint go all the way to the end of the plot area, but highcharts have this big gap.
https://jsfiddle.net/15u0r64s/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Total', 'Male', 'Female', 'Other'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Total',
data: [10, 20, 31, '']
}, {
name: 'Male',
data: [10, 20, 60, 2]
}, {
name: 'Female',
data: [10, 20, 61, '']
}, {
name: 'Other',
data: [10, 20, 65, 4]
}]
});
You need to edit groupPadding and pointPadding properties:
plotOptions: {
bar: {
groupPadding: 0.05,
pointPadding: 0
}
}
Live demo: https://jsfiddle.net/BlackLabel/oqpxmL18/
API Reference:
https://api.highcharts.com/highcharts/series.bar.groupPadding
https://api.highcharts.com/highcharts/series.bar.pointPadding
I am trying to have combined chart to display bar charts below my 2 pie series .
I am trying to push the 3 bars below "Chart Title" and I am not being to achieve this with different parameters like grouppadding in highcharts . First I need to reduce the space between Bars to make it 10 px may be and then need to push the entire bar series after Semidonut Pie .
Anyway to achieve this ...
This is roughly the coding I have :
<HighchartWrapper
chartOptions={{
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotBackgroundColor: null,
plotShadow: false,
height: 400,
width: 650,
},
tooltip: {
formatter: function () {
console.log('In tooltip:', this);
if (this.key === 'yoyfnbrev')
var txt1 = 'YOY Func Rev' + this.y;
return txt1;
},
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
center: ['50%', '85%'],
size: '160%',
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
style: {
fontSize: '16px',
color: 'black',
style: {
fontFamily: "'Lato', sans-serif",
},
},
formatter: function () {
if (this.series.name === 'revthisyear')
return (
this.point.y.toFixed(0) + '%'
);
else if (this.series.name === 'revlastyear')
return this.point.y.toFixed(0) + '%';
},
},
},
},
bar: {
groupPadding: 0,
pointPadding: 0,
dataLabels: {
enabled: true,
},
},
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
title: {
text: null,
},
labels: {
enabled: false,
},
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
opposite: true,
title: {
text: null,
},
labels: {
enabled: false,
},
},
series: [
{
type: 'pie',
name: 'revlastyear',
innerSize: '40%',
data: [20,40,40],
colors: ['#1a7ead', '#e95326', '#008540'],
dataLabels: {
enabled: true,
// inside: true,
distance: -140,
},
},
{
type: 'pie',
name: 'revthisyear',
innerSize: '60%',
data: [[10, 70, 20],
colors: ['#1a7ead', '#e95326', '#008540'],
dataLabels: {
enabled: true,
// inside: false,
distance: -60,
},
},
{
type: 'bar',
name: 'yoyrev',
// innerSize: '10%',
data: [20, -100, -50],
colors: ['#1a7ead', '#e95326', '#008540'],
pointWidth: 10,
pointPadding: 0,
groupPadding: 0.3,
},
],
}}
/>
I think that a good solution will be to use independent yAxis and xAxis for this bar, set a smaller height for them and change the pie centre values. See:
xAxis: [{
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
title: {
text: null,
},
labels: {
enabled: false,
},
}, {
height: '20%'
}],
Demo: https://jsfiddle.net/BlackLabel/jc3fLvt1/1/
API: https://api.highcharts.com/highcharts/series.pie.center
API: https://api.highcharts.com/highcharts/series.bar.yAxis
The simplest solution is to create another chart:
Highcharts.chart('container', {
...,
series: [{
type: 'pie',
...
}]
});
Highcharts.chart('container2', {
...,
series: [{
type: 'bar',
...
}]
});
Live demo: http://jsfiddle.net/BlackLabel/r9yz6qdk/
I have a series that I would like to be ignored in the percentage calculation of a pie chart but still be shown/hidden when the legend item is clicked. The series represents the total and should always be 100%. If I set visible to false for the series it is initially hidden in the chart and the legend item is greyed out. However, clicking the legend item shows the series with the calculated percentage. It seems like I need another series behind the values I would like to be calculated and displayed, that's always 100%, any ideas?
Thanks!
Chart Config
vm.installationResultsConfig = {
options: {
exporting: {
type: 'application/pdf',
filename: 'installation-results'
},
credits: {
enabled: false
},
navigation: {
buttonOptions: {
enabled: false
}
},
chart: {
backgroundColor: '#F9F9F9',
borderColor: '#eee',
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: 440
},
title: {
text: 'Installation Results',
align: 'center',
verticalAlign: 'top'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
startAngle: 0,
endAngle: 360,
center: ['50%', '55%'],
showInLegend: true
}
},
legend: {
align: 'left',
verticalAlign: 'middle',
layout: 'vertical',
x: -8,
y: 30,
labelFormatter: function () {
if(this.name === 'All Vehicles') {
this.percentage = 100;
}
return '<span>' + this.name + '</span><br />' +
'<span>' + this.dataLabels.count + '</span><br />' +
'<span>' + $filter('number')(this.percentage) + '%</span>';
},
useHTML: true,
itemMarginTop: 5,
itemMarginBottom: 5
}
},
series: [{
type: 'pie',
name: 'Installation Results',
innerSize: '70%',
data: [
{
name: 'All Vehicles', // should be ignored and alway render as 100%
y: chartData.allVehicles,
color: '#999999',
dataLabels: {
count: $filter('number')(chartData.allVehicles)
}
},
{
name: 'Successful',
y: chartData.successful,
color: '#50CF63',
dataLabels: {
count: $filter('number')(chartData.successful)
}
},
{
name: 'Failed',
y: chartData.failed,
color: '#F22F1D',
dataLabels: {
count: $filter('number')(chartData.failed)
}
},
{
name: 'Not Attempted',
y: chartData.notAttempted,
color: '#296499',
dataLabels: {
count: $filter('number')(chartData.notAttempted)
}
}
]
}]
};
The percentage property will affect all pie slices in series. In that situation, you can create custom percentage property, which will be calculated based only on visible slices that are not 'All Vehicles' slice. Take a look at the example below. Also, I think that the labelFormatter function is not the right place to make calculations but I only wanted to show you the idea.
Example:
http://jsfiddle.net/g1hw761h/
The goal is to make a bar chart like this one in the picture showing the values in percentage but also in MillionTonnes:
The bars are representing the percentage value. The value of the million tonnes is just extra information. Both values can go at the end of the bar and the percentage should appear first and then the Million Tonnes value. Something like:
49% (49.6 Million Tonnes). How can I make this two values appear at the end of the bar? This is the code I have. TIA
Highcharts.chart('grafica1', {
chart: {
type: 'column',
inverted: true,
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: ' '
},
xAxis: {
type: 'category',
labels: {
useHTML: true
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: null,
},
labels: {
enabled: false,
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '({point.y:.1f} Million tones)%'
}
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
inverted: false
},
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
}
}
}]
},
series: [{
name: 'Production',
colorByPoint: true,
data: [{
name: 'PACKAGING PAPERS<br>AND BOARDS',
y: 49,
color: '#005eb8',
}, {
name: 'CASE MATERIALS',
y: 29.9,
color: '#fff',
borderWidth: 2,
borderColor: '#005eb8'
}, {
name: 'OTHER PACKAGING & PAPER',
y: 14.4,
color: '#fff',
borderWidth: 2,
borderColor: '#005eb8'
}, {
name: 'WRAPPINGS',
y: 4.7,
color: '#fff',
borderWidth: 2,
borderColor: '#005eb8'
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="grafica1" class="chart1Slide2"></div>
When using the stacking option (Doc) it's possible.
Here a working fiddle
In an Angular 4 project I am using the angular2-highcharts library to create a stacked bar chart. The following object is the configuration I have so far.
{
title: { text: '' },
xAxis: {
categories: [''],
crosshair: true,
visible: false
},
yAxis: {
min: 0,
max: 100,
title: {
text: ''
},
labels: {
enabled: true
},
visible: false
},
chart: {
type: 'bar',
backgroundColor: 'rgba(255, 255, 255, 0.1)'
},
legend: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function() {
return this.point.y + '%';
},
inside: true
},
enableMouseTracking: false,
},
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function () {
if (this.point.y) {
return this.point.y + '%';
}
return '';
},
style: { fontSize: '10px' },
padding: 10
},
borderWidth: 0
}
},
series: [{
name: 'Pending',
data: ...,
color: '#ff4233'
}, {
name: 'Executed',
data: ...,
color: '#34d788'
}, {
name: 'Cancelled',
data: ...,
color: '#8f8c87'
}]
}
and this produces this visual result ->
I need to transform this into ->
As you see in the desired result the chart has more height and also its edges are round. That I don't know how to do.
Have you tried to use rounded-corners plugin? With it you can use following properties:
borderRadiusTopLeft, borderRadiusTopRight, borderRadiusBottomRight and borderRadiusBottomLeft
Plugin Reference:
https://github.com/highcharts/rounded-corners
Example:
http://jsfiddle.net/3Lhzx8ao/