Develop Reference

HighCharts graphics not working on Internet Explorer

I have built a website that includes a number of graphics and maps from HighCharts. All of them work great on Firefox, Safari, Chrome, Opera, Microsoft Edge and on cell phones, but for some reason none of them will render on any version of Internet Explorer. I am actually hoping to just get it to render on IE 11 and not worry about the rest as they are no longer supported by Microsoft, but so far, I am unable to find the problem. I have attached the code for one of the simpler graphics I'm using for folks to review.
I have tried some of the common recommendations I have found online; namely, I have set it up so that there are no duplicates of the required HighCharts and jQuery scripts for any given page, and I have the following meta tag in the head of each page on the site.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I would be grateful for any help figuring out how to resolve this problem. Here's a link to the site in question: http://165.22.82.145
Here are the scripts I'm using for this particular example, which are located on each page under Header Scripts (this is a WordPress site):
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
Here is the code for the graphic:
Highcharts.chart('container-2', {
chart: {
backgroundColor: '#f3f7fa',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: ['ciudadanos', 'instituciones', 'social', 'económica', ],
title: {
text: null
}
},
yAxis: {
min: 1,
title: {
text: 'Total'
},
max: 10,
endOnTick: false,
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ''
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
align: 'center',
x: 0
}
},
chartOptions: {
chart: {
events: {
load: function() {
this.renderer.image('#',
275, // x
20, // y
75, // width
40, // height
).add();
}
}
}
}
},
series: [{
name: '2019',
showInLegend: false,
color: '#6497b1',
data: [5.512, 7.592, 0.628, 0.894]
}, {
name: '2018',
showInLegend: false,
color: '#dc005a',
data: [6.553, 5.319, 0.499, 1.495]
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<h2 class="doubletab">Title here <br>2018 - 2019</h2>
<div class="ranking-graphic-wrapper">
<div id="container-2" style="width:100%; height:450px">
</div>
</div>

I tested the issue on Internet Explorer, and the console shows an error in this bit of code :
load: function() {
this.renderer.image('#',
275, // x
20, // y
75, // width
40, // height
).add();
The error can come from the last trailing comma after 40, which is a syntax that is not supported by Internet Explorer : Trailing commas

Displaying JSON data with Chartjs

First up - most of my development experience is with the back end and, while I have plenty of programming experience in that context, I'm not that familiar with Javascript.
I have managed to produce a REST service that (via GSON) generates JSON populated with data from a database. This data includes a list of two values: a date and a double indicating a temperature for that date. An example of the generated JSON can be found here.
What I'd like to try and do is to take the data and display it in a line chart. I've been trying this with Chartjs with extremely limited success.
The code I'm currently using to try and get the chart working is:
var data = [{"2019-03-30":11.0},{"2019-03-31":10.2},{"2019-04-01":10.0}];
var ctx = document.getElementById("temperatureChart").getContext('2d');
var chart = new Chart(ctx, {
type: "line",
data: {
datasets: [
{
label: "2019",
data: data,
borderColor: "rgb(192,49,62)",
fill: false
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Temperature Averages'
}
}
});
As you can see - I've, for the moment, simply hard coded a few data values in an attempt to try and get it working. All this produces is a chart with nothing on the X Axis and the values -1.0 to 1.0 in .2 increments - screenshot at the bottom of this post.
Honestly, I've no idea how to proceed from here. Is Chartjs even a good choice for this? Starting to wonder if I've bitten off more than I can chew.

Since you also asked "Is Chartjs even a good choice for this?", here is a DevExtreme Charts example:
(modified from devExtreme's sample)
I modified your data from this: (as I mentioned in your question's comments)
[ { "2019-03-30" : 11.0 }, { "2019-03-31" : 10.2 }, { "2019-04-01" : 10.0 }]
to this:
[ { x: "2019-03-30", y: 11.0 }, { x: "2019-03-31", y: 10.2 }, { x: "2019-04-01", y: 10.0 }]
HTML:
<div class="dx-viewport demo-container">
<div id="chart-demo">
<div id="chart"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Series Type</span>
<div id="types"></div>
</div>
</div>
</div>
</div>
CSS:
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.option {
margin-top: 10px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option > span {
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}
Javascript:
$(function(){
var chart = $("#chart").dxChart({
palette: "Violet",
dataSource: dataSource,
commonSeriesSettings: {
argumentField: "x",
type: types[0]
},
margin: {
bottom: 20
},
argumentAxis: {
valueMarginsEnabled: false,
discreteAxisDivisionMode: "crossLabels",
grid: {
visible: true
}
},
series: [
{ valueField: "y", name: "Temperature" }
],
legend: {
verticalAlignment: "bottom",
horizontalAlignment: "center",
itemTextPosition: "bottom"
},
title: {
text: "Daily Temperature Variations",
subtitle: {
text: "(Celsius)"
}
},
"export": {
enabled: true
},
tooltip: {
enabled: true,
customizeTooltip: function (arg) {
return {
text: arg.valueText
};
}
}
}).dxChart("instance");
$("#types").dxSelectBox({
dataSource: types,
value: types[0],
onValueChanged: function(e){
chart.option("commonSeriesSettings.type", e.value);
}
});
});
var dataSource = [ { x: "2019-03-30", y: 11.0 }, { x: "2019-03-31", y: 10.2 }, { x: "2019-04-01", y: 10.0 }];
var types = ["line", "stackedline", "fullstackedline"];

Highcharts treemap top and left borders missing

I have created a treemap using Highcharts, but the top and left borders are missing. I've been reading through the docs but can't find anything which will help.
I have created a Codepen here. You can see that against the black background the borders along the top and left sides of the series aren't visible. I think they're there, but maybe the chart is offset on the X/Y by a pixel or something.
Highcharts.setOptions({
colors: ['#263542', '#3d4d5d', '#41474d', '#515961', '#292e33', '#24445e'],
lang: {
thousandsSep: ','
}
});
Highcharts.chart('treemap', {
chart: {
backgroundColor: 'rgba(255,255,255,0)',
borderColor: 'rgb(255,255,255)'
},
credits: {
enabled: false
},
plotOptions: {
series: {
colorByPoint: true,
borderColor: 'rgb(71, 116, 135)',
borderWidth: 1,
dataLabels: {
enabled: true,
style: {
textOutline: 'none',
fontFamily: 'Roboto',
fontWeight: '300',
fontSize: '1rem'
}
}
}
},
tooltip: {
valuePrefix: '£'
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'Indices',
value: 230000,
}, {
name: 'Forex',
value: 120000,
}, {
name: 'Shares',
value: 55000,
}, {
name: 'Pension',
value: 55000,
}, {
name: 'ISA',
value: 20000,
}]
}],
title: {
text: ''
},
legend: {
enabled: false
}
});
body {
background: #000;
}
#treemap {
width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap"></div>

I cannot comment yet, so this is not really and answer. But I found that if you change your borderWidth to 2, then the border becomes visible. To me this indicates that the margin or padding of your element is covering up the border in the top left section of the element for some reason. Hope this can point you in some sort of direction.

It looks like, even though axes (xAxis/yAxis) are not visible in treemap chart, they have impact on it, by covering left and top part of the border. Setting the offset property in both axes with small value (e.g. 1) will move them away from plot area, uncovering missing border parts.
API Reference:
http://api.highcharts.com/highcharts/yAxis.offset
http://api.highcharts.com/highcharts/xAxis.opposite
Example:
http://jsfiddle.net/20oh9c3d/

Chart js Backgroundimage Scaling

Hi i'm quite new to JS and looking for an easy way to show a custom map with my own backgroundimage and several points with x-y-coordinates on it.
At first it worked quite well using the "line"-chart-type of chart.js (v2.5) with disabled showScale()-option and fixed axes-max/min-values.
My problem is that the backgroundimage is not rescaling properly when i change the window-size or show/hide the legend of the chart.
Here is my JS-code for creating the chart:
function initMap() {
scatterChart = new Chart(document.getElementById("scatterChart"), {
responsive: true,
type: 'line',
data: {
/*datasets: [
{
}
]
*/
},
showScale: false,
options: {
scales: {
yAxes: [{
display: false,
ticks: {
max: y_max,
min: 0,
stepSize: 0.1
}
}],
xAxes: [{
display: false,
type: 'linear',
position: 'bottom',
ticks: {
max: x_max,
min: 0,
stepSize: 0.1
}
}]
},
onClick: function (evt) {
var activePoint = scatterChart.getElementAtEvent(evt);
},
legend: {
position: 'right',
labels: {
fontSize: 15
}
},
}
});
}
HTML:
<canvas id="scatterChart" style="width: 1920px; height: 1080px; background-image:url('media/map_background.jpg'); background-size: 100% 100%;"></canvas>
Here are two images showing the effect:
https://1drv.ms/i/s!As59C5Mmd0nahr1zP4rjwI5KobaM3Q
https://1drv.ms/i/s!As59C5Mmd0nahr10KwUCJ4wpvfn4_g
What can i do to get a proper rescaling (points should always be shown on the same position on the map regardless of windowsize or enabled/disabled legend)?

Have you tried using the maintainAspectRatio property and setting it to true? That should hopefully fix your window resize issue.
The only way to fix the legend issue is to use a legend that is external to the canvas because the legend takes up space in the canvas so the chart is squished horizontally (there is no layering concept in a canvas). See this example for how to generate an external legend.
You must use the legendCallback property and the .generateLegend() prototype method.

Remove underline for Drilldown labels

How do you remove the underlined data labels for a drilldown pie chart in Highcharts? Adding:
textDecoration: 'none'
to the dataLabels doesn't seem to work

Style for active axis label is set through drilldown.activeAxisLabelStyle
$('#container').highcharts({
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
...
API: http://api.highcharts.com/highcharts#drilldown.activeAxisLabelStyle
Demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/labels/

text {
text-decoration: none !important;
}
will work.
here's your fiddle: http://jsfiddle.net/jkn79qut/
Edit: This answer is better by the way - if you can avoid polluting your css with !important, you should.

Actually, it's "activeDataLabelStyle" the parameter to change.
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
activeDataLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
series: [{.....
jsfiddle
Regards,

I don't know to do it the "highcharts" way, but you can do it in CSS with this:
text {
text-decoration: none !important;
}
The chart has inline code giving it text-decoration: underline;, so you need the !important hack to override it, in this case.
Updated JSFiddle
Here's an embedded example:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the slices to view versions. Source: netmarketshare.com.'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "Microsoft Internet Explorer",
y: 56.33,
drilldown: "Microsoft Internet Explorer"
}, {
name: "Chrome",
y: 24.03,
drilldown: "Chrome"
}, {
name: "Firefox",
y: 10.38,
drilldown: "Firefox"
}, {
name: "Safari",
y: 4.77,
drilldown: "Safari"
}, {
name: "Opera",
y: 0.91,
drilldown: "Opera"
}, {
name: "Proprietary or Undetectable",
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: "Microsoft Internet Explorer",
id: "Microsoft Internet Explorer",
data: [
["v11.0", 24.13],
["v8.0", 17.2],
["v9.0", 8.11],
["v10.0", 5.33],
["v6.0", 1.06],
["v7.0", 0.5]
]
}, {
name: "Chrome",
id: "Chrome",
data: [
["v40.0", 5],
["v41.0", 4.32],
["v42.0", 3.68],
["v39.0", 2.96],
["v36.0", 2.53],
["v43.0", 1.45],
["v31.0", 1.24],
["v35.0", 0.85],
["v38.0", 0.6],
["v32.0", 0.55],
["v37.0", 0.38],
["v33.0", 0.19],
["v34.0", 0.14],
["v30.0", 0.14]
]
}, {
name: "Firefox",
id: "Firefox",
data: [
["v35", 2.76],
["v36", 2.32],
["v37", 2.31],
["v34", 1.27],
["v38", 1.02],
["v31", 0.33],
["v33", 0.22],
["v32", 0.15]
]
}, {
name: "Safari",
id: "Safari",
data: [
["v8.0", 2.56],
["v7.1", 0.77],
["v5.1", 0.42],
["v5.0", 0.3],
["v6.1", 0.29],
["v7.0", 0.26],
["v6.2", 0.17]
]
}, {
name: "Opera",
id: "Opera",
data: [
["v12.x", 0.34],
["v28", 0.24],
["v27", 0.17],
["v29", 0.16]
]
}]
}
});
});
text {
text-decoration: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
<pre id="tsv" style="display:none">Browser Version Total Market Share
Microsoft Internet Explorer 8.0 26.61%
Microsoft Internet Explorer 9.0 16.96%
Chrome 18.0 8.01%
Chrome 19.0 7.73%
Firefox 12 6.72%
Microsoft Internet Explorer 6.0 6.40%
Firefox 11 4.72%
Microsoft Internet Explorer 7.0 3.55%
Safari 5.1 3.53%
Firefox 13 2.16%
Firefox 3.6 1.87%
Opera 11.x 1.30%
Chrome 17.0 1.13%
Firefox 10 0.90%
Safari 5.0 0.85%
Firefox 9.0 0.65%
Firefox 8.0 0.55%
Firefox 4.0 0.50%
Chrome 16.0 0.45%
Firefox 3.0 0.36%
Firefox 3.5 0.36%
Firefox 6.0 0.32%
Firefox 5.0 0.31%
Firefox 7.0 0.29%
Proprietary or Undetectable 0.29%
Chrome 18.0 - Maxthon Edition 0.26%
Chrome 14.0 0.25%
Chrome 20.0 0.24%
Chrome 15.0 0.18%
Chrome 12.0 0.16%
Opera 12.x 0.15%
Safari 4.0 0.14%
Chrome 13.0 0.13%
Safari 4.1 0.12%
Chrome 11.0 0.10%
Firefox 14 0.10%
Firefox 2.0 0.09%
Chrome 10.0 0.09%
Opera 10.x 0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition 0.09%</pre>