Mixing
Highcharts having trouble setting a responsive pointwidth
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 '18 at 17:17
Jimmy GenslingerJimmy Genslinger
18311
add a comment |
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 '18 at 17:17
Jimmy GenslingerJimmy Genslinger
18311
2
Could you prepare a simplified online demo (for example jsfiddle) of your chart with sample data?
– Wojciech Chmiel
Nov 22 '18 at 7:42
Sorry it took so long to respond...trying to juggle a lot of balls at the moment. Here's a fiddle jsfiddle.net/BigSexy/aq9Laaew/289601 that shows what I'm talking about: instead of the columns scrunching together, i'd rather them keep their default width and spacing and just be scrollable...
– Jimmy Genslinger
Dec 10 '18 at 15:30
For me, the chart on mobile looks pretty good. I removed your responsive roles: jsfiddle.net/BlackLabel/2me4aspo/1 , check on mobile: jsfiddle.net/BlackLabel/2me4aspo/1/show
– Wojciech Chmiel
Dec 11 '18 at 7:20
add a comment |
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 '18 at 17:17
Jimmy GenslingerJimmy Genslinger
18311
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 '18 at 17:17
Jimmy GenslingerJimmy Genslinger
18311
asked Nov 21 '18 at 17:17
Jimmy GenslingerJimmy Genslinger
18311
asked Nov 21 '18 at 17:17
Jimmy GenslingerJimmy Genslinger
18311
asked Nov 21 '18 at 17:17
Jimmy GenslingerJimmy Genslinger
18311
asked Nov 21 '18 at 17:17
Jimmy GenslingerJimmy Genslinger
18311
18311
2
Could you prepare a simplified online demo (for example jsfiddle) of your chart with sample data?
– Wojciech Chmiel
Nov 22 '18 at 7:42
Sorry it took so long to respond...trying to juggle a lot of balls at the moment. Here's a fiddle jsfiddle.net/BigSexy/aq9Laaew/289601 that shows what I'm talking about: instead of the columns scrunching together, i'd rather them keep their default width and spacing and just be scrollable...
– Jimmy Genslinger
Dec 10 '18 at 15:30
For me, the chart on mobile looks pretty good. I removed your responsive roles: jsfiddle.net/BlackLabel/2me4aspo/1 , check on mobile: jsfiddle.net/BlackLabel/2me4aspo/1/show
– Wojciech Chmiel
Dec 11 '18 at 7:20
add a comment |
2
Could you prepare a simplified online demo (for example jsfiddle) of your chart with sample data?
– Wojciech Chmiel
Nov 22 '18 at 7:42
Sorry it took so long to respond...trying to juggle a lot of balls at the moment. Here's a fiddle jsfiddle.net/BigSexy/aq9Laaew/289601 that shows what I'm talking about: instead of the columns scrunching together, i'd rather them keep their default width and spacing and just be scrollable...
– Jimmy Genslinger
Dec 10 '18 at 15:30
For me, the chart on mobile looks pretty good. I removed your responsive roles: jsfiddle.net/BlackLabel/2me4aspo/1 , check on mobile: jsfiddle.net/BlackLabel/2me4aspo/1/show
– Wojciech Chmiel
Dec 11 '18 at 7:20
2
2
Could you prepare a simplified online demo (for example jsfiddle) of your chart with sample data?
– Wojciech Chmiel
Nov 22 '18 at 7:42
Could you prepare a simplified online demo (for example jsfiddle) of your chart with sample data?
– Wojciech Chmiel
Nov 22 '18 at 7:42
Sorry it took so long to respond...trying to juggle a lot of balls at the moment. Here's a fiddle jsfiddle.net/BigSexy/aq9Laaew/289601 that shows what I'm talking about: instead of the columns scrunching together, i'd rather them keep their default width and spacing and just be scrollable...
– Jimmy Genslinger
Dec 10 '18 at 15:30
Sorry it took so long to respond...trying to juggle a lot of balls at the moment. Here's a fiddle jsfiddle.net/BigSexy/aq9Laaew/289601 that shows what I'm talking about: instead of the columns scrunching together, i'd rather them keep their default width and spacing and just be scrollable...
– Jimmy Genslinger
Dec 10 '18 at 15:30
For me, the chart on mobile looks pretty good. I removed your responsive roles: jsfiddle.net/BlackLabel/2me4aspo/1 , check on mobile: jsfiddle.net/BlackLabel/2me4aspo/1/show
– Wojciech Chmiel
Dec 11 '18 at 7:20
For me, the chart on mobile looks pretty good. I removed your responsive roles: jsfiddle.net/BlackLabel/2me4aspo/1 , check on mobile: jsfiddle.net/BlackLabel/2me4aspo/1/show
– Wojciech Chmiel
Dec 11 '18 at 7:20
add a comment |
0
active
oldest
votes
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
});
}
});
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
0
active
oldest
votes
0
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.
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 '18 at 7:42
Sorry it took so long to respond...trying to juggle a lot of balls at the moment. Here's a fiddle jsfiddle.net/BigSexy/aq9Laaew/289601 that shows what I'm talking about: instead of the columns scrunching together, i'd rather them keep their default width and spacing and just be scrollable...
– Jimmy Genslinger
Dec 10 '18 at 15:30
For me, the chart on mobile looks pretty good. I removed your responsive roles: jsfiddle.net/BlackLabel/2me4aspo/1 , check on mobile: jsfiddle.net/BlackLabel/2me4aspo/1/show
– Wojciech Chmiel
Dec 11 '18 at 7:20