Highcharts having trouble setting a responsive pointwidth
up vote
0
down vote
favorite
Team!
I've created a highcharts with drilldown features and scrolling -- it's pretty slick if I do say so myself :). I'm having one final issue making it a perfect chart, and that's when I look at it on a mobile phone/xs screen size, the column bars are "scrunching in" as close as they possibly can, to the point that it's almost unreadable.
I've been playing around with the responsive feature on highcharts and I've set the pointpadding and grouppadding to widen the bars as far as they can. I also tried using pointWidth, but that just allowed the bars to overlay on top of each other.
The only other solution I can think of is to try to widen the plot area but I can't find a way to do that -- chart.wide widens the entire chart, but I want it to stay smaller than the width of the device.
Does anybody have any ideas what I can try get the columns to widen? Here's a link to the graph. To see what I'm talking about, just shrink the width down of your browser as small as it will go, and click on any of the columns in the first graph.
Any ideas would be greatly appreciated!!
//Build The Chart
var refChart = new Highcharts.chart('ctReferralsDetail', {
chart: {
backgroundColor: 'whiteSmoke',
type: 'column',
width: chartWidth,
events: {
drilldown: function (e) {
var dt = $('#tblReferrals').DataTable();
dt.destroy();
$('#tblReferrals thead').empty();
$('#tblReferrals tbody').empty();
loadTableDetail(e.point.name);
if (!e.seriesOptions) {
for (var i = 0; i < drilldown.length; i++) {
if (e.point.name == drilldown[i]) {
this.addSingleSeriesAsDrilldown(e.point, pyDet[i]);
this.addSingleSeriesAsDrilldown(e.point, cyDet[i]);
this.applyDrilldown();
var maxVal = (pyDet[i].categories.length - 1) < chartMax ? pyDet[i].categories.length - 1 : chartMax;
this.update({
xAxis: {
categories: pyDet[i].categories,
max: maxVal,
},
exporting: {
sourceHeight: 475,
sourceWidth: pyDet[i].categories * 4.5,
chartOptions: {
xAxis: [{
categories: pyDet[i].categories,
labels: {
rotation: 90
},
max: pyDet[i].categories.length - 1,
}]
},
}
})
}
}
}
},
drillupall: function () {
var dt = $('#tblReferrals').DataTable();
dt.destroy();
$('#tblReferrals thead').empty();
$('#tblReferrals tbody').empty();
loadTableSummary();
this.update({
xAxis: {
categories: categoriesAA,
max: (categoriesAA.length - 1) < chartMax ? categoriesAA.length - 1 : chartMax
},
exporting: {
sourceHeight: 350,
sourceWidth: 500,
chartOptions: {
xAxis: [{
categories: categoriesAA,
labels: {
rotation: 0
},
max: categoriesAA.length - 1,
}]
},
}
})
},
},
},
title: {
text: title
},
subtitle: {
text: subTitle
},
xAxis: {
categories: categoriesAA,
min: 0,
max: (categoriesAA.length - 1) < chartMax ? categoriesAA.length - 1 : chartMax,
scrollbar: {
enabled: true
},
},
yAxis: [{
title: {
useHtml: true,
text: '<strong># Referrals</strong>'
}
}],
tooltip: {
shared: true,
},
plotOptions: {
column: {
borderRadius: 5,
dataLabels: {
enabled: true,
allowOverlap: true,
},
groupPadding: 0.15,
pointPadding: 0.05
},
},
series: [{
name: dataLabels[0],
data: pyAA
}, {
name: dataLabels[1],
data: cyAA
}],
drilldown: {
allowPointDrilldown: false,
},
exporting: {
scale: 1,
sourceHeight: 350,
sourceWidth: 500,
chartOptions: {
xAxis: [{
categories: categoriesAA,
labels: {
rotation: 0
},
max: categoriesAA.length - 1,
}]
},
},
credits: {
enabled: false
},
responsive: {
rules: [{
condition: {
maxWidth: 575
},
chartOptions: {
chart: {
width: chartWidth + 75,
},
plotOptions: {
column: {
groupPadding: 0,
pointPadding: 0,
}
}
}
}]
}
})
highcharts
asked Nov 21 at 17:17
Jimmy Genslinger
16911
add a comment |
up vote
0
down vote
favorite
Team!
I've created a highcharts with drilldown features and scrolling -- it's pretty slick if I do say so myself :). I'm having one final issue making it a perfect chart, and that's when I look at it on a mobile phone/xs screen size, the column bars are "scrunching in" as close as they possibly can, to the point that it's almost unreadable.
I've been playing around with the responsive feature on highcharts and I've set the pointpadding and grouppadding to widen the bars as far as they can. I also tried using pointWidth, but that just allowed the bars to overlay on top of each other.
The only other solution I can think of is to try to widen the plot area but I can't find a way to do that -- chart.wide widens the entire chart, but I want it to stay smaller than the width of the device.
Does anybody have any ideas what I can try get the columns to widen? Here's a link to the graph. To see what I'm talking about, just shrink the width down of your browser as small as it will go, and click on any of the columns in the first graph.
Any ideas would be greatly appreciated!!
//Build The Chart
var refChart = new Highcharts.chart('ctReferralsDetail', {
chart: {
backgroundColor: 'whiteSmoke',
type: 'column',
width: chartWidth,
events: {
drilldown: function (e) {
var dt = $('#tblReferrals').DataTable();
dt.destroy();
$('#tblReferrals thead').empty();
$('#tblReferrals tbody').empty();
loadTableDetail(e.point.name);
if (!e.seriesOptions) {
for (var i = 0; i < drilldown.length; i++) {
if (e.point.name == drilldown[i]) {
this.addSingleSeriesAsDrilldown(e.point, pyDet[i]);
this.addSingleSeriesAsDrilldown(e.point, cyDet[i]);
this.applyDrilldown();
var maxVal = (pyDet[i].categories.length - 1) < chartMax ? pyDet[i].categories.length - 1 : chartMax;
this.update({
xAxis: {
categories: pyDet[i].categories,
max: maxVal,
},
exporting: {
sourceHeight: 475,
sourceWidth: pyDet[i].categories * 4.5,
chartOptions: {
xAxis: [{
categories: pyDet[i].categories,
labels: {
rotation: 90
},
max: pyDet[i].categories.length - 1,
}]
},
}
})
}
}
}
},
drillupall: function () {
var dt = $('#tblReferrals').DataTable();
dt.destroy();
$('#tblReferrals thead').empty();
$('#tblReferrals tbody').empty();
loadTableSummary();
this.update({
xAxis: {
categories: categoriesAA,
max: (categoriesAA.length - 1) < chartMax ? categoriesAA.length - 1 : chartMax
},
exporting: {
sourceHeight: 350,
sourceWidth: 500,
chartOptions: {
xAxis: [{
categories: categoriesAA,
labels: {
rotation: 0
},
max: categoriesAA.length - 1,
}]
},
}
})
},
},
},
title: {
text: title
},
subtitle: {
text: subTitle
},
xAxis: {
categories: categoriesAA,
min: 0,
max: (categoriesAA.length - 1) < chartMax ? categoriesAA.length - 1 : chartMax,
scrollbar: {
enabled: true
},
},
yAxis: [{
title: {
useHtml: true,
text: '<strong># Referrals</strong>'
}
}],
tooltip: {
shared: true,
},
plotOptions: {
column: {
borderRadius: 5,
dataLabels: {
enabled: true,
allowOverlap: true,
},
groupPadding: 0.15,
pointPadding: 0.05
},
},
series: [{
name: dataLabels[0],
data: pyAA
}, {
name: dataLabels[1],
data: cyAA
}],
drilldown: {
allowPointDrilldown: false,
},
exporting: {
scale: 1,
sourceHeight: 350,
sourceWidth: 500,
chartOptions: {
xAxis: [{
categories: categoriesAA,
labels: {
rotation: 0
},
max: categoriesAA.length - 1,
}]
},
},
credits: {
enabled: false
},
responsive: {
rules: [{
condition: {
maxWidth: 575
},
chartOptions: {
chart: {
width: chartWidth + 75,
},
plotOptions: {
column: {
groupPadding: 0,
pointPadding: 0,
}
}
}
}]
}
})
highcharts
asked Nov 21 at 17:17
Jimmy Genslinger
16911
2
Could you prepare a simplified online demo (for example jsfiddle) of your chart with sample data?
– Wojciech Chmiel
Nov 22 at 7:42
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Team!
I've created a highcharts with drilldown features and scrolling -- it's pretty slick if I do say so myself :). I'm having one final issue making it a perfect chart, and that's when I look at it on a mobile phone/xs screen size, the column bars are "scrunching in" as close as they possibly can, to the point that it's almost unreadable.
I've been playing around with the responsive feature on highcharts and I've set the pointpadding and grouppadding to widen the bars as far as they can. I also tried using pointWidth, but that just allowed the bars to overlay on top of each other.
The only other solution I can think of is to try to widen the plot area but I can't find a way to do that -- chart.wide widens the entire chart, but I want it to stay smaller than the width of the device.
Does anybody have any ideas what I can try get the columns to widen? Here's a link to the graph. To see what I'm talking about, just shrink the width down of your browser as small as it will go, and click on any of the columns in the first graph.
Any ideas would be greatly appreciated!!
//Build The Chart
var refChart = new Highcharts.chart('ctReferralsDetail', {
chart: {
backgroundColor: 'whiteSmoke',
type: 'column',
width: chartWidth,
events: {
drilldown: function (e) {
var dt = $('#tblReferrals').DataTable();
dt.destroy();
$('#tblReferrals thead').empty();
$('#tblReferrals tbody').empty();
loadTableDetail(e.point.name);
if (!e.seriesOptions) {
for (var i = 0; i < drilldown.length; i++) {
if (e.point.name == drilldown[i]) {
this.addSingleSeriesAsDrilldown(e.point, pyDet[i]);
this.addSingleSeriesAsDrilldown(e.point, cyDet[i]);
this.applyDrilldown();
var maxVal = (pyDet[i].categories.length - 1) < chartMax ? pyDet[i].categories.length - 1 : chartMax;
this.update({
xAxis: {
categories: pyDet[i].categories,
max: maxVal,
},
exporting: {
sourceHeight: 475,
sourceWidth: pyDet[i].categories * 4.5,
chartOptions: {
xAxis: [{
categories: pyDet[i].categories,
labels: {
rotation: 90
},
max: pyDet[i].categories.length - 1,
}]
},
}
})
}
}
}
},
drillupall: function () {
var dt = $('#tblReferrals').DataTable();
dt.destroy();
$('#tblReferrals thead').empty();
$('#tblReferrals tbody').empty();
loadTableSummary();
this.update({
xAxis: {
categories: categoriesAA,
max: (categoriesAA.length - 1) < chartMax ? categoriesAA.length - 1 : chartMax
},
exporting: {
sourceHeight: 350,
sourceWidth: 500,
chartOptions: {
xAxis: [{
categories: categoriesAA,
labels: {
rotation: 0
},
max: categoriesAA.length - 1,
}]
},
}
})
},
},
},
title: {
text: title
},
subtitle: {
text: subTitle
},
xAxis: {
categories: categoriesAA,
min: 0,
max: (categoriesAA.length - 1) < chartMax ? categoriesAA.length - 1 : chartMax,
scrollbar: {
enabled: true
},
},
yAxis: [{
title: {
useHtml: true,
text: '<strong># Referrals</strong>'
}
}],
tooltip: {
shared: true,
},
plotOptions: {
column: {
borderRadius: 5,
dataLabels: {
enabled: true,
allowOverlap: true,
},
groupPadding: 0.15,
pointPadding: 0.05
},
},
series: [{
name: dataLabels[0],
data: pyAA
}, {
name: dataLabels[1],
data: cyAA
}],
drilldown: {
allowPointDrilldown: false,
},
exporting: {
scale: 1,
sourceHeight: 350,
sourceWidth: 500,
chartOptions: {
xAxis: [{
categories: categoriesAA,
labels: {
rotation: 0
},
max: categoriesAA.length - 1,
}]
},
},
credits: {
enabled: false
},
responsive: {
rules: [{
condition: {
maxWidth: 575
},
chartOptions: {
chart: {
width: chartWidth + 75,
},
plotOptions: {
column: {
groupPadding: 0,
pointPadding: 0,
}
}
}
}]
}
})
highcharts
asked Nov 21 at 17:17
Jimmy Genslinger
16911
Team!
I've created a highcharts with drilldown features and scrolling -- it's pretty slick if I do say so myself :). I'm having one final issue making it a perfect chart, and that's when I look at it on a mobile phone/xs screen size, the column bars are "scrunching in" as close as they possibly can, to the point that it's almost unreadable.
I've been playing around with the responsive feature on highcharts and I've set the pointpadding and grouppadding to widen the bars as far as they can. I also tried using pointWidth, but that just allowed the bars to overlay on top of each other.
The only other solution I can think of is to try to widen the plot area but I can't find a way to do that -- chart.wide widens the entire chart, but I want it to stay smaller than the width of the device.
Does anybody have any ideas what I can try get the columns to widen? Here's a link to the graph. To see what I'm talking about, just shrink the width down of your browser as small as it will go, and click on any of the columns in the first graph.
Any ideas would be greatly appreciated!!
//Build The Chart
var refChart = new Highcharts.chart('ctReferralsDetail', {
chart: {
backgroundColor: 'whiteSmoke',
type: 'column',
width: chartWidth,
events: {
drilldown: function (e) {
var dt = $('#tblReferrals').DataTable();
dt.destroy();
$('#tblReferrals thead').empty();
$('#tblReferrals tbody').empty();
loadTableDetail(e.point.name);
if (!e.seriesOptions) {
for (var i = 0; i < drilldown.length; i++) {
if (e.point.name == drilldown[i]) {
this.addSingleSeriesAsDrilldown(e.point, pyDet[i]);
this.addSingleSeriesAsDrilldown(e.point, cyDet[i]);
this.applyDrilldown();
var maxVal = (pyDet[i].categories.length - 1) < chartMax ? pyDet[i].categories.length - 1 : chartMax;
this.update({
xAxis: {
categories: pyDet[i].categories,
max: maxVal,
},
exporting: {
sourceHeight: 475,
sourceWidth: pyDet[i].categories * 4.5,
chartOptions: {
xAxis: [{
categories: pyDet[i].categories,
labels: {
rotation: 90
},
max: pyDet[i].categories.length - 1,
}]
},
}
})
}
}
}
},
drillupall: function () {
var dt = $('#tblReferrals').DataTable();
dt.destroy();
$('#tblReferrals thead').empty();
$('#tblReferrals tbody').empty();
loadTableSummary();
this.update({
xAxis: {
categories: categoriesAA,
max: (categoriesAA.length - 1) < chartMax ? categoriesAA.length - 1 : chartMax
},
exporting: {
sourceHeight: 350,
sourceWidth: 500,
chartOptions: {
xAxis: [{
categories: categoriesAA,
labels: {
rotation: 0
},
max: categoriesAA.length - 1,
}]
},
}
})
},
},
},
title: {
text: title
},
subtitle: {
text: subTitle
},
xAxis: {
categories: categoriesAA,
min: 0,
max: (categoriesAA.length - 1) < chartMax ? categoriesAA.length - 1 : chartMax,
scrollbar: {
enabled: true
},
},
yAxis: [{
title: {
useHtml: true,
text: '<strong># Referrals</strong>'
}
}],
tooltip: {
shared: true,
},
plotOptions: {
column: {
borderRadius: 5,
dataLabels: {
enabled: true,
allowOverlap: true,
},
groupPadding: 0.15,
pointPadding: 0.05
},
},
series: [{
name: dataLabels[0],
data: pyAA
}, {
name: dataLabels[1],
data: cyAA
}],
drilldown: {
allowPointDrilldown: false,
},
exporting: {
scale: 1,
sourceHeight: 350,
sourceWidth: 500,
chartOptions: {
xAxis: [{
categories: categoriesAA,
labels: {
rotation: 0
},
max: categoriesAA.length - 1,
}]
},
},
credits: {
enabled: false
},
responsive: {
rules: [{
condition: {
maxWidth: 575
},
chartOptions: {
chart: {
width: chartWidth + 75,
},
plotOptions: {
column: {
groupPadding: 0,
pointPadding: 0,
}
}
}
}]
}
})
highcharts
highcharts
asked Nov 21 at 17:17
Jimmy Genslinger
16911
asked Nov 21 at 17:17
Jimmy Genslinger
16911
asked Nov 21 at 17:17
Jimmy Genslinger
16911
asked Nov 21 at 17:17
Jimmy Genslinger
16911
asked Nov 21 at 17:17
Jimmy Genslinger
16911
16911
2
Could you prepare a simplified online demo (for example jsfiddle) of your chart with sample data?
– Wojciech Chmiel
Nov 22 at 7:42
add a comment |
2
Could you prepare a simplified online demo (for example jsfiddle) of your chart with sample data?
– Wojciech Chmiel
Nov 22 at 7:42
2
2
Could you prepare a simplified online demo (for example jsfiddle) of your chart with sample data?
– Wojciech Chmiel
Nov 22 at 7:42
Could you prepare a simplified online demo (for example jsfiddle) of your chart with sample data?
– Wojciech Chmiel
Nov 22 at 7:42
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f53417432%2fhighcharts-having-trouble-setting-a-responsive-pointwidth%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
2
Could you prepare a simplified online demo (for example jsfiddle) of your chart with sample data?
– Wojciech Chmiel
Nov 22 at 7:42