user1050619 user1050619 - 2 months ago 18
CSS Question

Callouts CSS implementation for highcharts not working

Im trying to build a callout and have the callouts formatted through CSS. For somereason, the css implementation is not working.

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


CSS:

div.callout {
height: 20px;
width: 100px;
/*float: left;*/
z-index: 1;
}

div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}

.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}

.callout.top::before {
left: 45%;
bottom: -20px;
border-top: 11px solid #444;
}

.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}

.callout.left::before {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}

.callout.right::before {
left: -20px;
top: 40%;
border-right: 10px solid #444;
}

.callout.top-left::before {
left: 7px;
bottom: -20px;
border-top: 10px solid #444;
}

.callout.top-right::before {
right: 7px;
bottom: -20px;
border-top: 10px solid #444;
}


JS:

$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
dataLabels: {
enabled: true,
align: 'left',
crop: false,
style: {
fontWeight: 'bold'
},
x: 3,
verticalAlign: 'middle',
formatter: function() {
return '<div class="callout" data-name="Jane">This is a test message</div>';
}
},
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});


http://jsfiddle.net/n0axohL6/1/

Answer

The documentation for Highcharts says that only a subset of HTML is available for text and labels:

Texts and labels in Highcharts are given in HTML, but as the HTML is parsed and rendered in SVG, only a subset is supported. The following tags are supported: <b>, <strong>, <i>, <em>, <br/>, <span>. Spans can be styled with a style attribute, but only text-related CSS that is shared with SVG is handled.

And even then, your HTML is converted into SVG nodes, so you won't be able to use divs and CSS classes to style the text in the chart.

It looks like there's an option in Highcharts 5 to do styling through CSS classes: http://www.highcharts.com/docs/chart-design-and-style/style-by-css