Related
How to static values in stacked bar chart. Below is the code i am using
$(function () {
Highcharts.chart('container5', {
chart: {
type: 'bar'
},
title: {
text: null
},
xAxis: {
categories: [''],
lineWidth: 0, // STEP TWO
tickWidth: 0, // STEP ONE
labels: {
enabled: false
},
},
yAxis: {
min: 0,
title: {
text: ' '
},
labels: {
enabled: false,//default is true
},
gridLineWidth: 0,
minorGridLineWidth: 0,
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
},
column: { //at the top bar chart values
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
}
},
bar: {
dataLabels: {
enabled: true,
distance: -50,
formatter: function () {
var dlabel = this.series.name + '<br/>';
// dlabel += Math.round(this.percentage*100)/100 + ' %';
return dlabel
},
style: {
color: 'white',
},
},
}
},
series: [{
showInLegend: false,
name: '20',
data: [20]
}, {
showInLegend: false,
name: '20',
data: [20]
}, {
showInLegend: false,
name: '20',
data: [20]
}, {
showInLegend: false,
name: '20',
data: [20]
}, {
showInLegend: false,
name: '20',
data: [20]
}]
});
});
It is the output and refer the attachment.
In the screenshot marked in red rectangular box, want to show the values. Refer the screenshot attached below
Original Screenshot (sample one)
Like this screenshot i need to show the values at the top which can be seen at the top.
You can define multiple data labels and position one of them at the top of the column, for example:
series: [{
...,
dataLabels: [{}, {
format: '20yrs',
y: -100
}]
}, ...]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4909/
API Reference: https://api.highcharts.com/highcharts/series.bar.dataLabels
Added,
y: -100 to the bar.dataLabel option (before the formatter) .
Image Output:
enter image description here
At the top of the label some of the name is missing:
5-9yrs & 15-20yrs ..printing alternatively
and also inside the stacked bar chart, values "20" not get displayed.
I have create graph 3 level drilldown and want to show legend of 3rd level follow with color.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
labels: {
rotation: -45,
align: "right",
y: 30,
},
type: "category",
tickWidth: 0
},
yAxis: {
title: {
text: 'Total fruit consumption'
}
},
legend: {
enabled: true,
itemStyle: {
fontSize:'10px'
},
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
reversed:true
},
plotOptions: {
series: {
cropThreshold: 1000,
animation: {
duration: 300
},
cursor: 'pointer',
point: {
events: {
click: function () {
if(this.id)
{
alert(this.id);
}
}
}
}
},
column: {
cropThreshold: 1000,
minPointLength: 3,
animation: false,
stacking: 'normal'
}
},
series: [{
index: 0,
name: 'Tippers',
turboThreshold: 0,
cropThreshold: Infinity,
data: [{
name:'01-Feb-2018',
colorByPoint:true,
y:3,
drilldown:'Tippers-1-2-2018'
}]
}],
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
color: 'black',
fontWeight: 'normal'
},
series: [{
name: '01-Feb-2018',
id: 'Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: 'psb04221',
y: 1,
drilldown:'psb04221/Tippers-1-2-2018'
},{
name: 'rvd910939',
y: 2,
drilldown:'rvd910939/Tippers-1-2-2018'
},]
},{
name: '01-Feb-2018',
id: 'Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: 'rvd910939',
y: 2,
drilldown:'rvd910939/Trucks-1-2-2018'
},{
name: 'sks913031',
y: 1,
drilldown:'sks913031/Trucks-1-2-2018'
},]
},{
name: 'psb04221 / Tippers 1-February-2018',
id: 'psb04221/Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-44',
id: '44',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'rvd910939 / Tippers 1-February-2018',
id: 'rvd910939/Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-21',
id: '21',
y: 1,
type_legend: 'green',
color:'green'
},{
name: '01-February-2018-25',
id: '25',
y: 1,
type_legend: 'yellow',
color:'yellow'
},{
name: '01-February-2018-27',
id: '27',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'rvd910939 / Trucks 1-February-2018',
id: 'rvd910939/Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-13',
id: '13',
y: 1,
type_legend: 'red',
color:'red'
},{
name: '01-February-2018-26',
id: '26',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'sks913031 / Trucks 1-February-2018',
id: 'sks913031/Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-22',
id: '22',
y: 1,
type_legend: 'yellow',
color:'yellow'
},{
name: '01-February-2018-23',
id: '23',
y: 1,
type_legend: 'green',
color:'green'
},]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
1st drilldown legend show date is correct
2nd drilldown I want to show legend users
3rd drilldown I want to show legend for color filter
Please help me to add legend for show legend filter by color Red , Green and Blue of 3rd drilldown like this image : 3rd Drilldown
I have resolved problem by answer of ppotaczek.
In your example, the third level of drilldown is one series, that is why the legend show only one item. If you want to have multiple legend items on drilldown, you have to have multiple series. You can use drilldown event and addSeriesAsDrilldown method, like in the example below to achieve needed result.
Live demo: http://jsfiddle.net/BlackLabel/amg8234t/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown
https://api.highcharts.com/highcharts/chart.events.drilldown
Best regards!
Thank you so much.
Below is the complete code and , i am unable to do the 2nd level drilldown of pie chats.
How to add multilevel drilldown series? First chat i have 2 sections of data (completed and Fail) , in second chat data will be the dynamic depending upon the selection of the first pie slice. same thing for third level chat as well.
var chartSeriesData = [];
var chartSeriesData1 =[];
var chartDrilldownData = [];
chartSeriesData = [{
name: "Completed",
y: 1,
color: "#1068C7",
drilldown: "Completed"
}, {
name: "Fail",
y: 2,
color: "#11A852",
drilldown: "Fail"
}];
chartSeriesData1 = [{
id: "Completed",
data: [{
name: 'CEVA',
y: 15,
drilldown: 'CEVA-COMPLETED'
},{
name: 'SYNCHRON',
y: 13,
drilldown: 'SYNCHRON-COMPLETED'
},{
name: 'GENCO',
y: 23,
drilldown: 'GENCO-COMPLETED'
}],
}, {
id:"Fail",
data: [{
name: 'CEVA',
y: 45,
drilldown: 'CEVA-FAIL'
},{
name: 'SYNCHRON',
y: 23,
drilldown: 'SYNCHRON-FAIL'
},{
name: 'GENCO',
y: 23,
drilldown: 'GENCO-FAIL'
}],
}];
chartDrilldownData = [
{
id:"CEVA-COMPLETED",
data: [{
name: 'BFC',
y: 19
},{
name: 'BMC',
y: 23
}],
},
{
id:"SYNCHRON-COMPLETED",
data: [{
name: 'qwsh',
y: 1
},{
name: 'adwa',
y: 1
}],
},
{
id:"GENCO-COMPLETED",
data: [{
name: 'qwsh',
y: 1
},{
name: 'adwa',
y: 1
}],
} ,
{ id:"CEVA-FAIL",
data: [{
name: 'BFC',
y: 19
},{
name: 'BMC',
y: 23
}],
},
{
id:"SYNCHRON-FAIL",
data: [{
name: 'qwsh',
y: 1
},{
name: 'adwa',
y: 1
}],
},
{
id:"GENCO-FAIL",
data: [{
name: 'qwsh',
y: 1
},{
name: 'adwa',
y: 1
}],
}
];
console.log('----------------');
console.log(chartSeriesData);
console.log('----------------');
console.log(chartSeriesData1);
console.log('----------------');
console.log(chartDrilldownData);
console.log('-------------------');
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. January, 2018'
},
subtitle: {
text: 'Click the slices to view versions. Source: statcounter.com'
},
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
select: function () {
var drilldown = this.drilldown;
console.log('drilldown'+drilldown);
// alert(this.options);
//console.log(this.options)
console.log(this.series.data);
}
}
},
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
},
drilldown:true
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Status',
colorByPoint: true,
data: chartSeriesData
}],
drilldown:{
series: chartSeriesData1
}
});
You created chartDrilldownData but never use it in the chart parameters, so the second level never trigger on click.
Just remove this code :
];
chartDrilldownData = [
And the working Fiddle
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
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/