How to resize bar chart based on no of x axis categories in HighChartsResizing an iframe based on contentHow to get highcharts dates in the x axis?Jinja2: TemplateSyntaxError: Encountered unknown tagHighCharts - Y-Axis padding in a bar chartHighcharts context menu button appearing thrice for the same chartControl spacing between bars in Highcharts grouped bar chartControlling Highcharts bar chart look and layoutHighcharts bar chart on wrong axisHighcharts Stacked Bar: How to remove spacing between barshow to destroy highcharts object
How to apply dcolumn in my longtable case? Need help
Is an easily guessed plot twist a good plot twist?
How can I calculate the cost of Skyss bus tickets
Does downing a character at the start of its turn require an immediate Death Saving Throw?
Why can't a country print its own money to spend it only abroad?
Bounded Torsion, without Mazur’s Theorem
Can GPL and BSD licensed applications be used for government work?
Book in which the "mountain" in the distance was a hole in the flat world
Does quantity of data extensions impact performance?
Dedicated to our #1 Fan
Why does the salt in the oceans not sink to the bottom?
Short story where a flexible reality hardens to an unchanging one
Can we have too many dialogue tags and follow up actions?
Would using carbon dioxide as fuel work to reduce the greenhouse effect?
Import data from a current web session?
How to work a regular job as a former celebrity
Is it ethical to tell my teaching assistant that I like him?
Host telling me to cancel my booking in exchange for a discount?
5V/12V load balance of 3.5'' HDD?
Is the apartment I want to rent a scam?
How can I deal with someone that wants to kill something that isn't supposed to be killed?
Does starting a profile in Mon Projet mean I applied to enter or remain in Canada?
What is "ass door"?
Are rockets faster than airplanes?
How to resize bar chart based on no of x axis categories in HighCharts
Resizing an iframe based on contentHow to get highcharts dates in the x axis?Jinja2: TemplateSyntaxError: Encountered unknown tagHighCharts - Y-Axis padding in a bar chartHighcharts context menu button appearing thrice for the same chartControl spacing between bars in Highcharts grouped bar chartControlling Highcharts bar chart look and layoutHighcharts bar chart on wrong axisHighcharts Stacked Bar: How to remove spacing between barshow to destroy highcharts object
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
1
I am working on adding some bar charts using the Highcharts . My chart looks kind of sparse when there are too few values in x-axis and too crowded if there are too many values.
I have fiddled with plotOptions options like (pointPadding,groupPadding,borderWidth,pointWidt). This seems to prevent dynamic resizing of the bar to make it consistent but does not help with resizing the overall chart.
- Chart with Asia,America,Europe,Ocenaia,Africa looks like this
Highcharts.chart('container',
chart:
type: 'bar'
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title:
text: null
,
yAxis:
visible:false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled:false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>- Chart with just Asia looks like this
Highcharts.chart('container',
chart:
type: 'bar'
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Asia'],
title:
text: null
,
yAxis:
visible:false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled:false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [635]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>As one can see the chart with asia has a lot of unsued space and makes it look overall weird.
I want to see if anyone knows how can I change the overall height of the chart dynamically based on no of values in X-Axis categories
javascript highcharts
asked Mar 26 at 14:29
Praveen BanthiaPraveen Banthia
387 bronze badges
add a comment |
1
I am working on adding some bar charts using the Highcharts . My chart looks kind of sparse when there are too few values in x-axis and too crowded if there are too many values.
I have fiddled with plotOptions options like (pointPadding,groupPadding,borderWidth,pointWidt). This seems to prevent dynamic resizing of the bar to make it consistent but does not help with resizing the overall chart.
- Chart with Asia,America,Europe,Ocenaia,Africa looks like this
Highcharts.chart('container',
chart:
type: 'bar'
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title:
text: null
,
yAxis:
visible:false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled:false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>- Chart with just Asia looks like this
Highcharts.chart('container',
chart:
type: 'bar'
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Asia'],
title:
text: null
,
yAxis:
visible:false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled:false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [635]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>As one can see the chart with asia has a lot of unsued space and makes it look overall weird.
I want to see if anyone knows how can I change the overall height of the chart dynamically based on no of values in X-Axis categories
javascript highcharts
asked Mar 26 at 14:29
Praveen BanthiaPraveen Banthia
387 bronze badges
add a comment |
1
1
1
I am working on adding some bar charts using the Highcharts . My chart looks kind of sparse when there are too few values in x-axis and too crowded if there are too many values.
I have fiddled with plotOptions options like (pointPadding,groupPadding,borderWidth,pointWidt). This seems to prevent dynamic resizing of the bar to make it consistent but does not help with resizing the overall chart.
- Chart with Asia,America,Europe,Ocenaia,Africa looks like this
Highcharts.chart('container',
chart:
type: 'bar'
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title:
text: null
,
yAxis:
visible:false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled:false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>- Chart with just Asia looks like this
Highcharts.chart('container',
chart:
type: 'bar'
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Asia'],
title:
text: null
,
yAxis:
visible:false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled:false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [635]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>As one can see the chart with asia has a lot of unsued space and makes it look overall weird.
I want to see if anyone knows how can I change the overall height of the chart dynamically based on no of values in X-Axis categories
javascript highcharts
asked Mar 26 at 14:29
Praveen BanthiaPraveen Banthia
387 bronze badges
I am working on adding some bar charts using the Highcharts . My chart looks kind of sparse when there are too few values in x-axis and too crowded if there are too many values.
I have fiddled with plotOptions options like (pointPadding,groupPadding,borderWidth,pointWidt). This seems to prevent dynamic resizing of the bar to make it consistent but does not help with resizing the overall chart.
- Chart with Asia,America,Europe,Ocenaia,Africa looks like this
Highcharts.chart('container',
chart:
type: 'bar'
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title:
text: null
,
yAxis:
visible:false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled:false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>- Chart with just Asia looks like this
Highcharts.chart('container',
chart:
type: 'bar'
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Asia'],
title:
text: null
,
yAxis:
visible:false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled:false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [635]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>As one can see the chart with asia has a lot of unsued space and makes it look overall weird.
I want to see if anyone knows how can I change the overall height of the chart dynamically based on no of values in X-Axis categories
Highcharts.chart('container',
chart:
type: 'bar'
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title:
text: null
,
yAxis:
visible:false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled:false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>Highcharts.chart('container',
chart:
type: 'bar'
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title:
text: null
,
yAxis:
visible:false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled:false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>Highcharts.chart('container',
chart:
type: 'bar'
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Asia'],
title:
text: null
,
yAxis:
visible:false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled:false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [635]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>Highcharts.chart('container',
chart:
type: 'bar'
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Asia'],
title:
text: null
,
yAxis:
visible:false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled:false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [635]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>javascript highcharts
javascript highcharts
asked Mar 26 at 14:29
Praveen BanthiaPraveen Banthia
387 bronze badges
asked Mar 26 at 14:29
Praveen BanthiaPraveen Banthia
387 bronze badges
asked Mar 26 at 14:29
Praveen BanthiaPraveen Banthia
387 bronze badges
asked Mar 26 at 14:29
Praveen BanthiaPraveen Banthia
387 bronze badges
asked Mar 26 at 14:29
Praveen BanthiaPraveen Banthia
387 bronze badges
387 bronze badges
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
You can use chart.update() method to add a new height based on bars amount. Check code and demo posted below.
Code:
Highcharts.chart('container',
chart:
type: 'bar',
events:
load: function()
var chart = this,
barsLength = chart.series[0].data.length;
chart.update(
chart:
height: 100 + 50 * barsLength
, true, false, false);
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Asia'],
title:
text: null
,
yAxis:
visible: false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled: false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [107]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>Demo:
- https://jsfiddle.net/BlackLabel/x3e8brgq/1/
API reference:
- https://api.highcharts.com/class-reference/Highcharts.Chart#update
answered Mar 26 at 15:34
Wojciech ChmielWojciech Chmiel
4,1161 gold badge3 silver badges13 bronze badges
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%2f55359619%2fhow-to-resize-bar-chart-based-on-no-of-x-axis-categories-in-highcharts%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
2
You can use chart.update() method to add a new height based on bars amount. Check code and demo posted below.
Code:
Highcharts.chart('container',
chart:
type: 'bar',
events:
load: function()
var chart = this,
barsLength = chart.series[0].data.length;
chart.update(
chart:
height: 100 + 50 * barsLength
, true, false, false);
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Asia'],
title:
text: null
,
yAxis:
visible: false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled: false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [107]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>Demo:
- https://jsfiddle.net/BlackLabel/x3e8brgq/1/
API reference:
- https://api.highcharts.com/class-reference/Highcharts.Chart#update
answered Mar 26 at 15:34
Wojciech ChmielWojciech Chmiel
4,1161 gold badge3 silver badges13 bronze badges
add a comment |
2
You can use chart.update() method to add a new height based on bars amount. Check code and demo posted below.
Code:
Highcharts.chart('container',
chart:
type: 'bar',
events:
load: function()
var chart = this,
barsLength = chart.series[0].data.length;
chart.update(
chart:
height: 100 + 50 * barsLength
, true, false, false);
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Asia'],
title:
text: null
,
yAxis:
visible: false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled: false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [107]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>Demo:
- https://jsfiddle.net/BlackLabel/x3e8brgq/1/
API reference:
- https://api.highcharts.com/class-reference/Highcharts.Chart#update
answered Mar 26 at 15:34
Wojciech ChmielWojciech Chmiel
4,1161 gold badge3 silver badges13 bronze badges
add a comment |
2
2
2
You can use chart.update() method to add a new height based on bars amount. Check code and demo posted below.
Code:
Highcharts.chart('container',
chart:
type: 'bar',
events:
load: function()
var chart = this,
barsLength = chart.series[0].data.length;
chart.update(
chart:
height: 100 + 50 * barsLength
, true, false, false);
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Asia'],
title:
text: null
,
yAxis:
visible: false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled: false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [107]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>Demo:
- https://jsfiddle.net/BlackLabel/x3e8brgq/1/
API reference:
- https://api.highcharts.com/class-reference/Highcharts.Chart#update
answered Mar 26 at 15:34
Wojciech ChmielWojciech Chmiel
4,1161 gold badge3 silver badges13 bronze badges
You can use chart.update() method to add a new height based on bars amount. Check code and demo posted below.
Code:
Highcharts.chart('container',
chart:
type: 'bar',
events:
load: function()
var chart = this,
barsLength = chart.series[0].data.length;
chart.update(
chart:
height: 100 + 50 * barsLength
, true, false, false);
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Asia'],
title:
text: null
,
yAxis:
visible: false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled: false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [107]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>Demo:
- https://jsfiddle.net/BlackLabel/x3e8brgq/1/
API reference:
- https://api.highcharts.com/class-reference/Highcharts.Chart#update
Highcharts.chart('container',
chart:
type: 'bar',
events:
load: function()
var chart = this,
barsLength = chart.series[0].data.length;
chart.update(
chart:
height: 100 + 50 * barsLength
, true, false, false);
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Asia'],
title:
text: null
,
yAxis:
visible: false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled: false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [107]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>Highcharts.chart('container',
chart:
type: 'bar',
events:
load: function()
var chart = this,
barsLength = chart.series[0].data.length;
chart.update(
chart:
height: 100 + 50 * barsLength
, true, false, false);
,
title:
text: 'Historic World Population by Region'
,
subtitle:
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
,
xAxis:
categories: ['Asia'],
title:
text: null
,
yAxis:
visible: false
,
tooltip:
valueSuffix: ' millions'
,
plotOptions:
bar:
dataLabels:
enabled: true
,
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
pointWidth: 20
,
legend:
enabled: false
,
credits:
enabled: false
,
series: [
name: 'Year 1800',
data: [107]
]
);<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>answered Mar 26 at 15:34
Wojciech ChmielWojciech Chmiel
4,1161 gold badge3 silver badges13 bronze badges
answered Mar 26 at 15:34
Wojciech ChmielWojciech Chmiel
4,1161 gold badge3 silver badges13 bronze badges
answered Mar 26 at 15:34
Wojciech ChmielWojciech Chmiel
4,1161 gold badge3 silver badges13 bronze badges
answered Mar 26 at 15:34
Wojciech ChmielWojciech Chmiel
4,1161 gold badge3 silver badges13 bronze badges
4,1161 gold badge3 silver badges13 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
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%2f55359619%2fhow-to-resize-bar-chart-based-on-no-of-x-axis-categories-in-highcharts%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
