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
Related
Hi EveryOne I am using HighCharts library to plot charts , i want to achieve below pie chart i couldn't find proper example please help me on this.
You can enable sliced state for the blue point and use properties related with border:
series: [{
showInLegend: true,
allowPointSelect: true,
type: 'pie',
data: [{
y: 45,
color: 'black',
dataLabels: {
enabled: false
}
}, {
y: 55,
color: 'blue',
sliced: true,
borderWidth: 5,
borderColor: 'white',
dataLabels: {
format: '{point.y}%',
distance: -60,
style: {
fontSize: 24
}
}
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/gnqsuefw/
API Reference: https://api.highcharts.com/highcharts/series.pie.data.sliced
I created the extract pie for you here: https://jsfiddle.net/markwan/qm8xzr93/3/
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: "#f5f5f5",
backgroundColor: '#f5f5f5',
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
enabled: false
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
itemMarginBottom: 15,
x: 0,
y: 150
},
series: [{
name: 'Members',
colorByPoint: true,
data: [
{
name: 'Total Members: 1.000.000',
y: 450000,
color: "#393f4e",
borderWidth: 1,
borderColor: '#f5f5f5',
dataLabels: {
enabled: false,
}
},
{
name: 'Targeted Members: 550.000',
y: 550000,
sliced: true,
borderWidth: 15,
borderColor: 'white',
color: "#34b9d5",
dataLabels: {
enabled: true,
format: '<b>{point.percentage:.0f}%</b>',
distance: -70,
style: {
fontSize: 30
}
}
}]
}]
});
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 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/
I have spiderweb highchart with dynamically calculated x/y values and all labels of y-axis are displayed correctly except the last one. Did anyone have same problem?
function GenerateSpiderWebChart(conteinerId,categories,values, color) {
$('#'+conteinerId).highcharts({
chart: {
polar: true,
type: 'line',
margin: 0
},
colors: [
color
],
exporting: {
enabled: false,
buttons: {
enabled: false
}
},
title: {
text: ' ',
x: -80,
useHTML: true
},
pane: {
size: '70%'
},
xAxis: {
categories: categories,
tickmarkPlacement: 'on',
lineWidth: 0,
labels: {
align: 'center',
distance: 43
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
endOnTick: true
},
tooltip: {
shared: true,
headerFormat: '<span style="font-size: 12px">{point.key}:</span> <b>{point.y:,.2f}</b>',
pointFormat: '',
useHTML: true
},
legend: {
enabled: false,
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: '',
data: values,
pointPlacement: 'on'
}]
});
}
Set yAxis.showLastLabel to true. API says "Defaults to true." but it is not true in this case. Example: http://jsfiddle.net/02mssxy8/1/
showLastLabel: true