Highcharts -how to change world regions style in area stacked charts - highcharts

I am trying to this chart:
How can I style the world regions so that all of them appear? In the pre view they appear in a straight line but the final view they show in the columns of 3. Not all of them appear. TIA!
//Grafica 1
$(function () {
Highcharts.chart('grafica1', {
chart: {
type: 'area',
},
title: {
text: ' '
},
xAxis: {
categories: ['1350', '1400', '1450', '1500', '1550', '1699', '1750'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
split: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
name: 'Africa',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'L. America',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Oceania',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'S-E. Asia',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Japan',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'China',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Near East',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Asian CIS',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Russia',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'East Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Central Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'W. Europe - Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'N. America',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});

Related

Highcharts:Remove the color area below the 2 series

I want fill color in between the 2 series.I tried setting the white color for the second series but the transparent first series color is visible.
yAxis: {
title: {
text: 'Billions'
},
},
tooltip: {
split: true,
},
plotOptions: {
area: {
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268],
color: '#A5E1D2',
lineColor: '#008484',
lineWidth: 2,
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766],
color: 'white',
lineColor: '#002E2E',
lineWidth: 2,
}
jsfiddle
You can use a linearGradient for the color of the first series and set the color to 'transparent' for the second series
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268],
color: {
linearGradient: { x1: 0.02, x2: 0.98, y1: 0, y2: 1 },
stops: [
[0, 'green'],
[0.8, 'transparent'],
]
},
lineColor: '#008484',
lineWidth: 2,
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766],
color: 'transparent',
lineColor: '#002E2E',
lineWidth: 2,
}]
Here is a working fiddle:
https://jsfiddle.net/3k5t0r4v/
Here you can read more about how linearGradient works and other methods to style your highcharts:
Colors in Highcharts
This post helped
This is the updated jsfiddle
https://jsfiddle.net/diasraphael88/hdg83Lpw/
{
color: '#A5E1D2',
data: [3, 3, 2, 3, 3, 6, 3]
},{
color: '#A5E1D2',
data: [0, 0, 0, 0, 0, 0, 0]
},{
id: 'transparent',
color: 'rgba(255,255,255,0)',
data: [27,25,16,13,9,17,11]
}]
}, function(chart){
chart.get('transparent').area.hide();
});

Highcharts - how to position values closer to the Y axis

Please see code. The values on the Y axis appear too far from the Y axis. I tried to get them closer but then the whole graph got distorted. I would appreciate any ideas on how to achieve this. Thanks in advance
//Grafica 1
$(function () {
Highcharts.chart('grafica1', {
chart: {
type: 'area',
},
title: {
text: ' '
},
xAxis: {
categories: ['1350', '1400', '1450', '1500', '1550', '1699', '1750'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
split: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
name: 'Africa',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'L. America',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Oceania',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'S-E. Asia',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Japan',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'China',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Near East',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Asian CIS',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Russia',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'East Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Central Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'W. Europe - Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'N. America',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
Lables should be added in xAxis as
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
define categories as
var categories= ['1350', '1400', '1450', '1500', '1550', '1699', '1750'];
Working fiddle
finally js
$(function () {
var categories= ['1350', '1400', '1450', '1500', '1550', '1699', '1750'];
Highcharts.chart('grafica1', {
chart: {
type: 'area',
},
title: {
text: ' '
},
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
split: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff',
}
}
},
series: [{
name: 'Africa',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'L. America',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Oceania',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'S-E. Asia',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Japan',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'China',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Near East',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Asian CIS',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Russia',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'East Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Central Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'W. Europe - Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'N. America',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});

Highcharts 3d bar chart data labels position is wrong

I need to show bar chart with data labels.
When it is 2d, all is fine.
But when I show it as 3d bar the data labels position get wrong.
The code below:
$('#container').highcharts({
chart: {
type: 'bar',
margin: 75,
options3d: {
enabled: true,
alpha: 35,
beta: 15,
depth: 110
}
},
plotOptions: {
bar: {
depth: 40,
stacking: true,
grouping: false,
groupZPadding: 10,
dataLabels:{enabled:true}
}
},
series: [{
data: [1, 2, 4, 3, 2, 4],
stack: 0
}, {
data: [5, 6, 3, 4, 1, 2],
stack: 0
}, {
data: [7, 9, 8, 7, 5, 8],
stack: 1
}]
});
});
demo:
http://jsfiddle.net/4dccq/277/
Thanks in advance
This is a known issue-
https://github.com/highcharts/highcharts/issues/4160
Meanwhile set alpha and beta to 0 and set stacking to false will solve the problem.
It still be 3d - but with no angle and not stack.
This code work for me-
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
margin: 75,
options3d: {
enabled: true,
alpha: 0,
beta: 0,
}
},
plotOptions: {
bar: {
depth: 40,
stacking: false,
grouping: false,
groupZPadding: 0,
dataLabels:{
enabled:true,
format:'<span style="color:{point.color};"> {point.y:.0f}</span>'
}
}
},
series: [{
data: [1, 2, 4, 3, 2, 4],
stack: 1
}, {
data: [5, 6, 3, 4, 1, 2],
stack: 1
}, {
data: [7, 9, 8, 7, 5, 8],
stack: 2
}]
});
});
Did you mean this???
this is nice solution...
Here's a link!
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 35,
beta: 15,
depth: 110
}
},
plotOptions: {
bar: {
depth: 40,
stacking: true,
grouping: false,
groupZPadding: 10,
dataLabels:{enabled:true}
}
},
series: [{
data: [1, 2, 4, 3, 2, 4],
stack: 0
}, {
data: [5, 6, 3, 4, 1, 2],
stack: 1
}, {
data: [7, 9, 8, 7, 5, 8],
stack: 2
}]
});
});

How do I prevent Highcharts from truncating categories?

If space is too tight, the axis labels are truncated. I'm dealing with variable categories, so I'd prefer to have them overlap rather than disappear.
Example:
http://jsfiddle.net/z1axtk31/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Sub-saharan Africa', 'North America', 'South America', 'East Asia', 'Middle East', 'Europe', 'Oceania', 'Ancapistan', 'North Africa', 'Mordor', 'Atlantis'],
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: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2, 45, 23, 201, 50, 89, 210]
}/*, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6, 45, 23, 166, 50, 20, 110]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34, 45, 23, 20, 50, 133, 100]
}*/]
});
});
Simply set:
xAxis: {
labels: {
step: 1
}
}
Example

drilldown on column range

I'm wondering if somebody has tried to add drilldowns to a column range chart.
This is an example of what I'm trying to do: http://jsfiddle.net/pawelk79/8jmV6/
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'History'
},
subtitle: {
text: ''
},
xAxis: {
categories: ['Example 1','Example 2', 'Example 3'],
},
yAxis: {
type: 'datetime',
min: new Date('2007,01,01').getTime(),
max: new Date('2014,05,01').getTime(),
title: {
text: 'Year'
}
},
tooltip: true,
plotOptions: {
columnrange: {
dataLabels: {
enabled: false,
formatter: function () {
return this.y ;
}
}
}
},
legend: {
enabled:false
},
series: [{
name: 'Year',
data:
[
[Date.UTC(2007, 2, 2), Date.UTC(2009, 5, 10)],
[Date.UTC(2009, 6, 10), Date.UTC(2011, 9, 10)],
[Date.UTC(2011, 9, 25), Date.UTC(2014, 5, 1)]
]
}
]
});
});
Any advises welcome.
Thanks
P
This does actually work, you just need to be particularly careful about the formatting of both the main series and drilldown series:
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'datetime'
},
legend: {
enabled: false
},
series: [{
name: 'Yearly',
colorByPoint: true,
data: [{
name: 'Yearly1',
low: Date.UTC(2007, 2, 2),
high: Date.UTC(2009, 5, 10),
drilldown: 'monthly1'
}, {
name: 'Yearly2',
low: Date.UTC(2009, 6, 10),
high: Date.UTC(2011, 9, 10),
drilldown: 'monthly2'
}, {
name: 'Yearly3',
low: Date.UTC(2011, 9, 25),
high: Date.UTC(2014, 5, 1),
drilldown: 'monthly3'
}]
}],
drilldown: {
series: [{
id: 'monthly1',
data: [{
name: 'example1',
low: Date.UTC(2009, 6, 10),
high: Date.UTC(2009, 6, 11)
}, {
name: 'example2',
low: Date.UTC(2009, 6, 10),
high: Date.UTC(2009, 6, 15)
}]
}, {
id: 'monthly2',
data: [{
name: 'example1',
low: Date.UTC(2010, 5, 10),
high: Date.UTC(2010, 6, 11)
}, {
name: 'example2',
low: Date.UTC(2010, 8, 10),
high: Date.UTC(2010, 8, 15)
}]
}, {
id: 'monthly3',
data: [{
name: 'example1',
low: Date.UTC(2012, 9, 10),
high: Date.UTC(2012, 9, 11)
}, {
name: 'example2',
low: Date.UTC(2012, 11, 10),
high: Date.UTC(2012, 11, 15)
}]
}]
}
});
Here is a working fiddle:
http://jsfiddle.net/ycn75svr
Formatting the dataLabels further would make sense (make the dates readable and return the actual series/drilldown names propwerly) but I haven't included that in this fiddle.

Resources