Kamel Labiad
Reputation: 547
Stacked bars chart not rendering on mobile
I have this stacked bars chart which works fine on desktop but it suddenly stopped rendering on mobile, you can see it on this link here
here is a working example on jsfiddle
I post the code here again since Stackoverflow is asking me to do so, it also asked me to add more text since it thinks my question is mostly code so I have to add more words you might not necessarily need or find it useful to answer this question, you could go to the website and see the code live there or click on the link on JSfiddle they are both reproduction of a working example with the issue I mentioned earlier, I think I have to stop adding more words now.
var seriesColors = [
'#fb6e4c',
'#5f7aec',
'#fde46f',
'#6cb8f4',
'#8ee4a0',
'#e373f7'
];
var chart = new Highcharts.chart('mychart', {
chart: {
type: 'column',
spacingLeft: 35,
// plotBackgroundColor: '#bcbcbc',
marginBottom: 60,
},
title: false,
xAxis: {
categories: [" 1 مارس 2020"," 2 مارس 2020"," 3 مارس 2020"," 4 مارس 2020"," 5 مارس 2020"," 6 مارس 2020"," 7 مارس 2020"," 8 مارس 2020"," 9 مارس 2020"," 10 مارس 2020"," 11 مارس 2020"," 12 مارس 2020"," 13 مارس 2020"," 14 مارس 2020"," 15 مارس 2020"," 16 مارس 2020"," 17 مارس 2020"," 18 مارس 2020"," 19 مارس 2020"," 20 مارس 2020"," 21 مارس 2020"," 22 مارس 2020"," 23 مارس 2020"," 24 مارس 2020"," 25 مارس 2020"," 26 مارس 2020"," 27 مارس 2020"," 28 مارس 2020"," 29 مارس 2020"," 30 مارس 2020"," 31 مارس 2020"," 1 أبريل 2020"," 2 أبريل 2020"," 3 أبريل 2020"," 4 أبريل 2020"," 5 أبريل 2020"," 6 أبريل 2020"," 7 أبريل 2020"," 8 أبريل 2020"," 9 أبريل 2020"," 10 أبريل 2020"," 11 أبريل 2020"," 12 أبريل 2020"," 13 أبريل 2020"," 14 أبريل 2020"," 15 أبريل 2020"," 16 أبريل 2020"," 17 أبريل 2020"," 18 أبريل 2020"," 19 أبريل 2020"," 20 أبريل 2020"," 21 أبريل 2020"," 22 أبريل 2020"," 23 أبريل 2020"," 24 أبريل 2020"," 25 أبريل 2020"," 26 أبريل 2020"," 27 أبريل 2020"," 28 أبريل 2020"," 29 أبريل 2020"," 30 أبريل 2020"," 1 مايو 2020"," 2 مايو 2020"," 3 مايو 2020"," 4 مايو 2020"," 5 مايو 2020"," 6 مايو 2020"," 7 مايو 2020"," 8 مايو 2020"," 9 مايو 2020"," 10 مايو 2020"," 11 مايو 2020"," 12 مايو 2020"," 13 مايو 2020"," 14 مايو 2020"," 15 مايو 2020"," 16 مايو 2020"," 17 مايو 2020"," 18 مايو 2020"," 19 مايو 2020"," 20 مايو 2020"," 21 مايو 2020"," 22 مايو 2020"," 23 مايو 2020"," 24 مايو 2020"," 25 مايو 2020"," 26 مايو 2020"," 27 مايو 2020"," 28 مايو 2020"," 29 مايو 2020"," 30 مايو 2020"," 31 مايو 2020"," 1 يونيو 2020"," 2 يونيو 2020"," 3 يونيو 2020"," 4 يونيو 2020"," 5 يونيو 2020"," 6 يونيو 2020"," 7 يونيو 2020"," 8 يونيو 2020"," 9 يونيو 2020"," 10 يونيو 2020"," 11 يونيو 2020"," 12 يونيو 2020"," 13 يونيو 2020"," 14 يونيو 2020"," 15 يونيو 2020"," 16 يونيو 2020"," 17 يونيو 2020",],
labels:{
useHTML:true,
formatter:function(){return '<span class="xlabel">' + this.value + '</span>';},
enabled:true,//default is true,
step: 15,
// rotation: -90,
// style: {
// color: '#eb583b',
// font: "'DroidArabicNaskhRegular','Lato','Helvetica Neue'",
// fontSize: '20px',
// rtl: true,
// },
},
// itemStyle: {
// color: '#6c757d',
// fontSize: '15px',
// fontFamily: "'DroidArabicNaskhRegular','Lato','Helvetica Neue'",
// // direction: 'rtl'
// },
},
yAxis: {
labels:{
format:"{value:,.0f}"
},
opposite: true,
min: 0,
title: false,
stackLabels: {
enabled: false,
style: {
fontFamily: "'DroidArabicNaskhRegular','Lato','Helvetica Neue'",
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
legend: {
align: 'center',
x: 0,
verticalAlign: 'top',
y: -10,
floating: false,
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
rtl: true,
borderColor: '#CCC',
borderWidth: 0,
shadow: false,
itemStyle: {
color: '#6c757d',
fontSize: '15px',
fontFamily: "'DroidArabicNaskhRegular','Lato','Helvetica Neue'",
// direction: 'rtl'
},
},
tooltip: {
borderColor:'grey',
shared: true,
useHTML: true,
style: {fontFamily: "'DroidArabicNaskhRegular','Lato','Helvetica Neue'"},
// headerFormat: '<b><span class="tooltiphead">{point.x}</span></b>',
// pointFormat: '<br/>{point.y:,.0f} :{series.name}',
// footerFormat: '</br><span>{point.stackTotal:,.0f} :الإجمالي</span>'
formatter: function() {
var s = '<b><span class="tooltiphead">'+ this.x +'</span></b>';
sum = 0;
$.each(this.points, function(i, point) {
s += '<br/>'+ point.series.name + ': '+ numberWithCommas(point.y) +' <i class="fa fa-circle" aria-hidden="true" style="color:'+ point.color +';"></i>';
sum += point.y;
});
s += '<br/><b>الإجمالي: '+ numberWithCommas(sum)+'</b>'
return s;
},
},
plotOptions: {
column: {
// pointPadding: 0,
// borderWidth: 0,
// groupPadding: 0,
// shadow: false,
maxPointWidth: 50,
stacking: 'normal',
dataLabels: {
enabled: false
},
},
series: {// this i snot working you can delete it is you come back later
pointPlacement:'between',
grouping: false,
// pointWidth:9.5,
groupPadding: 0,
pointPadding: 0.12,
borderWidth: 0,
animation: false,
states: {
hover:{
// color: '#bcbcbc',
},
inactive: {
enabled: true,
opacity: 0.5
}
},
},
},
series: [
{
name: 'أمريكا الشمالية',
data: [1600,1376,1866,1234,1281,2043,1747,1221,875,1195,1760,1567,1581,1916,1940,1630,2020,1999,2368,2364,2731,3186,3098,3722,5381,5490,7058,7352,7346,7001,8789,8545,9287,8646,8945,9324,10646,9481,9573,10316,11347,11893,11671,11828,11131,11452,12746,12805,11946,13001,12500,14228,11946,13577,13141,12266,11585,11505,11437,12531,13080,13454,12037,12910,14026,14353,16734,14588,16332,16083,17859,16089,18346,17721,18079,20507,18580,20217,20941,21890,22289,23821,25110,23981,24292,22219,20086,23277,25056,29193,27037,29279,26993,30444,32656,33103,32132,34318,34793,35873,31253,33154,37926,37140,39329,38987,39512,37157,37330,],
color: seriesColors[0]
}, {
name: 'أوروبا',
data: [737,527,629,979,1401,1775,2137,2544,2782,3405,5059,7410,7433,8189,8383,10754,11123,13635,18360,20475,21446,19083,25434,23619,29674,34985,35590,36517,29442,30888,35147,36524,35560,37105,33515,29825,27118,29006,34532,33346,38600,30544,52732,25738,26085,31304,43302,32784,23983,35559,24326,26815,26674,29006,25403,26027,23139,23518,23099,21547,23762,23687,24624,22495,21623,23081,28696,26725,25694,22499,21522,24137,21931,19808,21099,21380,18715,18252,16699,18441,15417,17602,19788,17827,15741,14566,18225,15184,20382,17077,17337,15604,14113,14735,20582,15995,16873,16805,15669,14885,14468,14928,14351,15486,16241,15477,15050,13612,15122,],
color: seriesColors[1]
},{
name: 'آسيا',
data: [1,4,3,10,3,19,0,40,8,13,15,28,35,78,61,89,84,122,182,205,221,288,401,467,540,577,583,391,561,470,620,633,701,906,698,733,706,666,804,830,691,725,867,797,973,954,1187,1427,1320,1227,1173,1097,1417,1452,1735,1262,1555,1335,1686,2017,2092,1752,2203,1646,2695,2091,2547,2607,3805,2861,2767,3033,3207,2988,3029,2929,3432,3018,3699,3358,3761,4798,4161,3875,4131,4106,3590,5291,4749,5957,6225,5195,5943,4931,5147,7198,7154,6659,6122,6882,6882,6530,6489,7255,8255,8105,8838,9636,7367,],
color: seriesColors[2]
},{
name: 'أمريكا الجنوبية',
data: [12,27,23,37,74,63,143,134,88,377,368,517,525,598,887,1356,1902,1594,6248,5839,6902,8214,11394,10922,12725,19211,19209,21287,20332,22705,27783,26943,32659,33490,34314,31284,31028,32825,33632,37139,35997,32044,30553,27526,29065,31232,34804,35423,35247,28798,29093,29993,32364,32318,39665,35776,30714,25379,27386,30855,33181,38110,33058,29999,25865,27126,28912,32001,31014,29716,23475,21875,25245,24903,31687,29668,29276,22776,26042,25427,27287,30510,29148,27443,26055,23857,24691,24056,28123,29953,29593,25651,25744,26684,25838,27771,31203,28815,29453,22709,24039,24075,26152,30719,33289,33031,24878,27213,31420,],
color: seriesColors[3]
},{
name: 'إفريقيا',
data: [6,0,3,5,6,12,11,22,7,22,33,84,89,63,67,237,283,243,474,621,717,1136,814,854,828,1113,1183,1281,1029,1003,2196,2385,2300,2027,2333,1913,2021,2866,5084,4112,5372,2828,2900,4074,3066,5195,4351,5302,5109,4515,4206,4777,5353,7427,17398,10052,6881,6942,10395,10612,12491,11626,10248,12072,12093,12953,16469,15294,16975,14763,12064,10704,15526,20069,21222,25685,21820,15279,20928,26634,30742,29310,30521,26723,26479,23060,28239,34345,38883,39636,48036,32190,26093,36557,46168,43126,44566,39691,33093,27771,29710,42593,48087,45761,42397,32323,33546,36850,51142,],
color: seriesColors[4]
}, {
name: 'أوقيانوسيا',
data: [2,3,9,15,3,7,4,13,15,16,21,34,41,51,49,80,79,124,127,127,299,532,138,425,375,529,419,580,407,458,257,365,347,287,308,228,181,158,169,127,152,117,32,58,81,45,43,68,59,51,24,27,15,15,20,26,20,10,26,11,17,19,23,25,25,32,20,20,7,23,12,22,10,11,31,16,10,10,14,8,9,15,4,15,5,12,16,11,16,19,8,10,20,8,11,7,5,8,6,2,5,3,9,9,5,12,18,15,14,],
color: seriesColors[5]
}]
},
function(chart){// this function is not working as intended yet
$(chart.series).each(function(i, serie){
serie.legendItem.on('mouseover', function(){
console.log('mouse in');
}).on('mouseout', function(){
console.log('mouse out');
})
});
}
);
function numberWithCommas(x) {
return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}
any idea why?
Thanks
Upvotes: 0
Views: 102
Answers (1)
madepiet
Reputation: 884
See this simplified demo:
https://jsfiddle.net/BlackLabel/10tg6r48/
Here is the problem with regexp.
Chrome is dealing with this code but in Firefox we get the error:
SyntaxError: invalid regexp group
Upvotes: 3
Related Questions
- Chartjs Stacked bar chart not displaying correctly
- Highchart stacked area series is not showing correctly
- highchart stacked bar plotting data doesn't work by javascript
- Highcharts - javascript - incorrect stacked column formatting
- Highchart 2.1.5 stacked bar chart
- Highcharts Stacking Bar misaligned and oddly sized bars
- HighCharts line series not displaying properly with stacked bar combo chart
- Highcharts Bar Chart - Labels Not Appearing in Bar
- Highcharts stacked bar chart comes empty
- Highcharts 4.0.3 stacked bar chart bug adds â-