Highcharts: How to shift yAxis to center (e.g.Population by sex and age group)
0
similar to official demo.
Bar with negative stack | Highcharts
want to shift yAxis(age) to center.
like this 2011 Census - Office for National Statistics
javascript highcharts
asked Nov 27 '18 at 3:37
tokorotentokoroten
102
add a comment |
0
similar to official demo.
Bar with negative stack | Highcharts
want to shift yAxis(age) to center.
like this 2011 Census - Office for National Statistics
javascript highcharts
asked Nov 27 '18 at 3:37
tokorotentokoroten
102
add a comment |
0
0
0
similar to official demo.
Bar with negative stack | Highcharts
want to shift yAxis(age) to center.
like this 2011 Census - Office for National Statistics
javascript highcharts
asked Nov 27 '18 at 3:37
tokorotentokoroten
102
similar to official demo.
Bar with negative stack | Highcharts
want to shift yAxis(age) to center.
like this 2011 Census - Office for National Statistics
javascript highcharts
javascript highcharts
asked Nov 27 '18 at 3:37
tokorotentokoroten
102
asked Nov 27 '18 at 3:37
tokorotentokoroten
102
edited Nov 27 '18 at 3:42
tokoroten
asked Nov 27 '18 at 3:37
tokorotentokoroten
102
asked Nov 27 '18 at 3:37
tokorotentokoroten
102
asked Nov 27 '18 at 3:37
tokorotentokoroten
102
102
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
Unfortunately, Highcharts does not support such a chart type. However, you can create it using two bar charts aligned horizontally. Check demo I posted you below.
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="cnt">
<div id="container1"></div>
<div id="container2"></div>
</div>
CSS:
#container1,
#container2 {
width: 49%;
display: inline-block;
}
#cnt {
max-width: 800px;
margin: 0 auto;
}
JS:
var categories = [
'0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '
];
Highcharts.chart('container1', {
chart: {
type: 'bar',
marginRight: 1
},
yAxis: {
min: 0,
reversed: true,
title: {
enabled: false
}
},
xAxis: {
visible: false,
reversed: false,
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 30,
y: 10,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
pointPadding: 0,
groupPadding: 0,
name: 2011,
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
}, {
type: 'line',
color: '#000',
name: 2001,
marker: {
enabled: false
},
data: [
1.1, 1.0, 1.1, 2.1, 2.2,
2.4, 2.2, 3.1, 1.9, 2.4,
4.3, 4.7, 2.5, 2.2, 2.0,
2.1, 2.0, 1.5, 1.6, 1.2,
0.0
]
}]
});
Highcharts.chart('container2', {
chart: {
type: 'bar'
},
yAxis: {
min: 0,
enabled: false,
title: {
enabled: false
}
},
xAxis: {
reversed: false,
categories: categories,
tickLength: 0
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -20,
y: 10,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
color: '#ccaadd',
pointPadding: 0,
groupPadding: 0,
name: 2011,
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
}, {
type: 'line',
color: '#000',
name: 2001,
marker: {
enabled: false
},
data: [
1.1, 1.0, 1.1, 2.1, 2.2,
2.4, 2.2, 3.1, 1.9, 2.4,
4.3, 4.7, 2.5, 2.2, 2.0,
2.1, 2.0, 1.5, 1.6, 1.2,
0.0
]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/1fun4t0e/
answered Nov 27 '18 at 11:07
Wojciech ChmielWojciech Chmiel
1,9661210
thanks! But there are still three things I want to settle. Demo: https://jsfiddle.net/matamatak/w67ame3c 1.Add percentage on tooltip 2.Set Legend(man,woman,age) at the top. 3.Same value, same length. Woman data is equal to man data. But bars are slightly different lengths. Like this
– tokoroten
Nov 28 '18 at 3:16
1. Percentage of man and women separately or both? You can calculate it looping through your data and then usetooltip.formatter(api.highcharts.com/highcharts/tooltip.formatter) to calculate the percentage you need for each bar. 2. One legend with both man, woman and age? It will require to create a custom legend and usechart.series.hide()' andchart.series.show()` (api.highcharts.com/class-reference/Highcharts.Series#hide). 3. Yes, because both charts have the same percentage width set in css. The right one has axis labels and the same width, you have to adjust it.
– Wojciech Chmiel
Nov 28 '18 at 8:44
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53492364%2fhighcharts-how-to-shift-yaxis-to-center-e-g-population-by-sex-and-age-group%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Unfortunately, Highcharts does not support such a chart type. However, you can create it using two bar charts aligned horizontally. Check demo I posted you below.
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="cnt">
<div id="container1"></div>
<div id="container2"></div>
</div>
CSS:
#container1,
#container2 {
width: 49%;
display: inline-block;
}
#cnt {
max-width: 800px;
margin: 0 auto;
}
JS:
var categories = [
'0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '
];
Highcharts.chart('container1', {
chart: {
type: 'bar',
marginRight: 1
},
yAxis: {
min: 0,
reversed: true,
title: {
enabled: false
}
},
xAxis: {
visible: false,
reversed: false,
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 30,
y: 10,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
pointPadding: 0,
groupPadding: 0,
name: 2011,
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
}, {
type: 'line',
color: '#000',
name: 2001,
marker: {
enabled: false
},
data: [
1.1, 1.0, 1.1, 2.1, 2.2,
2.4, 2.2, 3.1, 1.9, 2.4,
4.3, 4.7, 2.5, 2.2, 2.0,
2.1, 2.0, 1.5, 1.6, 1.2,
0.0
]
}]
});
Highcharts.chart('container2', {
chart: {
type: 'bar'
},
yAxis: {
min: 0,
enabled: false,
title: {
enabled: false
}
},
xAxis: {
reversed: false,
categories: categories,
tickLength: 0
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -20,
y: 10,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
color: '#ccaadd',
pointPadding: 0,
groupPadding: 0,
name: 2011,
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
}, {
type: 'line',
color: '#000',
name: 2001,
marker: {
enabled: false
},
data: [
1.1, 1.0, 1.1, 2.1, 2.2,
2.4, 2.2, 3.1, 1.9, 2.4,
4.3, 4.7, 2.5, 2.2, 2.0,
2.1, 2.0, 1.5, 1.6, 1.2,
0.0
]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/1fun4t0e/
answered Nov 27 '18 at 11:07
Wojciech ChmielWojciech Chmiel
1,9661210
thanks! But there are still three things I want to settle. Demo: https://jsfiddle.net/matamatak/w67ame3c 1.Add percentage on tooltip 2.Set Legend(man,woman,age) at the top. 3.Same value, same length. Woman data is equal to man data. But bars are slightly different lengths. Like this
– tokoroten
Nov 28 '18 at 3:16
1. Percentage of man and women separately or both? You can calculate it looping through your data and then usetooltip.formatter(api.highcharts.com/highcharts/tooltip.formatter) to calculate the percentage you need for each bar. 2. One legend with both man, woman and age? It will require to create a custom legend and usechart.series.hide()' andchart.series.show()` (api.highcharts.com/class-reference/Highcharts.Series#hide). 3. Yes, because both charts have the same percentage width set in css. The right one has axis labels and the same width, you have to adjust it.
– Wojciech Chmiel
Nov 28 '18 at 8:44
add a comment |
1
Unfortunately, Highcharts does not support such a chart type. However, you can create it using two bar charts aligned horizontally. Check demo I posted you below.
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="cnt">
<div id="container1"></div>
<div id="container2"></div>
</div>
CSS:
#container1,
#container2 {
width: 49%;
display: inline-block;
}
#cnt {
max-width: 800px;
margin: 0 auto;
}
JS:
var categories = [
'0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '
];
Highcharts.chart('container1', {
chart: {
type: 'bar',
marginRight: 1
},
yAxis: {
min: 0,
reversed: true,
title: {
enabled: false
}
},
xAxis: {
visible: false,
reversed: false,
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 30,
y: 10,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
pointPadding: 0,
groupPadding: 0,
name: 2011,
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
}, {
type: 'line',
color: '#000',
name: 2001,
marker: {
enabled: false
},
data: [
1.1, 1.0, 1.1, 2.1, 2.2,
2.4, 2.2, 3.1, 1.9, 2.4,
4.3, 4.7, 2.5, 2.2, 2.0,
2.1, 2.0, 1.5, 1.6, 1.2,
0.0
]
}]
});
Highcharts.chart('container2', {
chart: {
type: 'bar'
},
yAxis: {
min: 0,
enabled: false,
title: {
enabled: false
}
},
xAxis: {
reversed: false,
categories: categories,
tickLength: 0
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -20,
y: 10,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
color: '#ccaadd',
pointPadding: 0,
groupPadding: 0,
name: 2011,
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
}, {
type: 'line',
color: '#000',
name: 2001,
marker: {
enabled: false
},
data: [
1.1, 1.0, 1.1, 2.1, 2.2,
2.4, 2.2, 3.1, 1.9, 2.4,
4.3, 4.7, 2.5, 2.2, 2.0,
2.1, 2.0, 1.5, 1.6, 1.2,
0.0
]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/1fun4t0e/
answered Nov 27 '18 at 11:07
Wojciech ChmielWojciech Chmiel
1,9661210
thanks! But there are still three things I want to settle. Demo: https://jsfiddle.net/matamatak/w67ame3c 1.Add percentage on tooltip 2.Set Legend(man,woman,age) at the top. 3.Same value, same length. Woman data is equal to man data. But bars are slightly different lengths. Like this
– tokoroten
Nov 28 '18 at 3:16
1. Percentage of man and women separately or both? You can calculate it looping through your data and then usetooltip.formatter(api.highcharts.com/highcharts/tooltip.formatter) to calculate the percentage you need for each bar. 2. One legend with both man, woman and age? It will require to create a custom legend and usechart.series.hide()' andchart.series.show()` (api.highcharts.com/class-reference/Highcharts.Series#hide). 3. Yes, because both charts have the same percentage width set in css. The right one has axis labels and the same width, you have to adjust it.
– Wojciech Chmiel
Nov 28 '18 at 8:44
add a comment |
1
1
1
Unfortunately, Highcharts does not support such a chart type. However, you can create it using two bar charts aligned horizontally. Check demo I posted you below.
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="cnt">
<div id="container1"></div>
<div id="container2"></div>
</div>
CSS:
#container1,
#container2 {
width: 49%;
display: inline-block;
}
#cnt {
max-width: 800px;
margin: 0 auto;
}
JS:
var categories = [
'0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '
];
Highcharts.chart('container1', {
chart: {
type: 'bar',
marginRight: 1
},
yAxis: {
min: 0,
reversed: true,
title: {
enabled: false
}
},
xAxis: {
visible: false,
reversed: false,
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 30,
y: 10,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
pointPadding: 0,
groupPadding: 0,
name: 2011,
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
}, {
type: 'line',
color: '#000',
name: 2001,
marker: {
enabled: false
},
data: [
1.1, 1.0, 1.1, 2.1, 2.2,
2.4, 2.2, 3.1, 1.9, 2.4,
4.3, 4.7, 2.5, 2.2, 2.0,
2.1, 2.0, 1.5, 1.6, 1.2,
0.0
]
}]
});
Highcharts.chart('container2', {
chart: {
type: 'bar'
},
yAxis: {
min: 0,
enabled: false,
title: {
enabled: false
}
},
xAxis: {
reversed: false,
categories: categories,
tickLength: 0
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -20,
y: 10,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
color: '#ccaadd',
pointPadding: 0,
groupPadding: 0,
name: 2011,
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
}, {
type: 'line',
color: '#000',
name: 2001,
marker: {
enabled: false
},
data: [
1.1, 1.0, 1.1, 2.1, 2.2,
2.4, 2.2, 3.1, 1.9, 2.4,
4.3, 4.7, 2.5, 2.2, 2.0,
2.1, 2.0, 1.5, 1.6, 1.2,
0.0
]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/1fun4t0e/
answered Nov 27 '18 at 11:07
Wojciech ChmielWojciech Chmiel
1,9661210
Unfortunately, Highcharts does not support such a chart type. However, you can create it using two bar charts aligned horizontally. Check demo I posted you below.
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="cnt">
<div id="container1"></div>
<div id="container2"></div>
</div>
CSS:
#container1,
#container2 {
width: 49%;
display: inline-block;
}
#cnt {
max-width: 800px;
margin: 0 auto;
}
JS:
var categories = [
'0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '
];
Highcharts.chart('container1', {
chart: {
type: 'bar',
marginRight: 1
},
yAxis: {
min: 0,
reversed: true,
title: {
enabled: false
}
},
xAxis: {
visible: false,
reversed: false,
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 30,
y: 10,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
pointPadding: 0,
groupPadding: 0,
name: 2011,
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
}, {
type: 'line',
color: '#000',
name: 2001,
marker: {
enabled: false
},
data: [
1.1, 1.0, 1.1, 2.1, 2.2,
2.4, 2.2, 3.1, 1.9, 2.4,
4.3, 4.7, 2.5, 2.2, 2.0,
2.1, 2.0, 1.5, 1.6, 1.2,
0.0
]
}]
});
Highcharts.chart('container2', {
chart: {
type: 'bar'
},
yAxis: {
min: 0,
enabled: false,
title: {
enabled: false
}
},
xAxis: {
reversed: false,
categories: categories,
tickLength: 0
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -20,
y: 10,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
color: '#ccaadd',
pointPadding: 0,
groupPadding: 0,
name: 2011,
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
}, {
type: 'line',
color: '#000',
name: 2001,
marker: {
enabled: false
},
data: [
1.1, 1.0, 1.1, 2.1, 2.2,
2.4, 2.2, 3.1, 1.9, 2.4,
4.3, 4.7, 2.5, 2.2, 2.0,
2.1, 2.0, 1.5, 1.6, 1.2,
0.0
]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/1fun4t0e/
answered Nov 27 '18 at 11:07
Wojciech ChmielWojciech Chmiel
1,9661210
answered Nov 27 '18 at 11:07
Wojciech ChmielWojciech Chmiel
1,9661210
answered Nov 27 '18 at 11:07
Wojciech ChmielWojciech Chmiel
1,9661210
answered Nov 27 '18 at 11:07
Wojciech ChmielWojciech Chmiel
1,9661210
1,9661210
thanks! But there are still three things I want to settle. Demo: https://jsfiddle.net/matamatak/w67ame3c 1.Add percentage on tooltip 2.Set Legend(man,woman,age) at the top. 3.Same value, same length. Woman data is equal to man data. But bars are slightly different lengths. Like this
– tokoroten
Nov 28 '18 at 3:16
1. Percentage of man and women separately or both? You can calculate it looping through your data and then usetooltip.formatter(api.highcharts.com/highcharts/tooltip.formatter) to calculate the percentage you need for each bar. 2. One legend with both man, woman and age? It will require to create a custom legend and usechart.series.hide()' andchart.series.show()` (api.highcharts.com/class-reference/Highcharts.Series#hide). 3. Yes, because both charts have the same percentage width set in css. The right one has axis labels and the same width, you have to adjust it.
– Wojciech Chmiel
Nov 28 '18 at 8:44
add a comment |
thanks! But there are still three things I want to settle. Demo: https://jsfiddle.net/matamatak/w67ame3c 1.Add percentage on tooltip 2.Set Legend(man,woman,age) at the top. 3.Same value, same length. Woman data is equal to man data. But bars are slightly different lengths. Like this
– tokoroten
Nov 28 '18 at 3:16
1. Percentage of man and women separately or both? You can calculate it looping through your data and then usetooltip.formatter(api.highcharts.com/highcharts/tooltip.formatter) to calculate the percentage you need for each bar. 2. One legend with both man, woman and age? It will require to create a custom legend and usechart.series.hide()' andchart.series.show()` (api.highcharts.com/class-reference/Highcharts.Series#hide). 3. Yes, because both charts have the same percentage width set in css. The right one has axis labels and the same width, you have to adjust it.
– Wojciech Chmiel
Nov 28 '18 at 8:44
thanks! But there are still three things I want to settle. Demo: https://jsfiddle.net/matamatak/w67ame3c 1.Add percentage on tooltip 2.Set Legend(man,woman,age) at the top. 3.Same value, same length. Woman data is equal to man data. But bars are slightly different lengths. Like this
– tokoroten
Nov 28 '18 at 3:16
thanks! But there are still three things I want to settle. Demo: https://jsfiddle.net/matamatak/w67ame3c 1.Add percentage on tooltip 2.Set Legend(man,woman,age) at the top. 3.Same value, same length. Woman data is equal to man data. But bars are slightly different lengths. Like this
– tokoroten
Nov 28 '18 at 3:16
1. Percentage of man and women separately or both? You can calculate it looping through your data and then use
tooltip.formatter (api.highcharts.com/highcharts/tooltip.formatter) to calculate the percentage you need for each bar. 2. One legend with both man, woman and age? It will require to create a custom legend and use chart.series.hide()' and chart.series.show()` (api.highcharts.com/class-reference/Highcharts.Series#hide). 3. Yes, because both charts have the same percentage width set in css. The right one has axis labels and the same width, you have to adjust it.– Wojciech Chmiel
Nov 28 '18 at 8:44
1. Percentage of man and women separately or both? You can calculate it looping through your data and then use
tooltip.formatter (api.highcharts.com/highcharts/tooltip.formatter) to calculate the percentage you need for each bar. 2. One legend with both man, woman and age? It will require to create a custom legend and use chart.series.hide()' and chart.series.show()` (api.highcharts.com/class-reference/Highcharts.Series#hide). 3. Yes, because both charts have the same percentage width set in css. The right one has axis labels and the same width, you have to adjust it.– Wojciech Chmiel
Nov 28 '18 at 8:44
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53492364%2fhighcharts-how-to-shift-yaxis-to-center-e-g-population-by-sex-and-age-group%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
