JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="graphs"></div>
JavaScript
String.prototype.unescapeHtml = function () {
var temp = document.createElement("div");
temp.innerHTML = this;
var result = temp.childNodes[0].nodeValue;
temp.removeChild(temp.firstChild);
return result;
};
$(function () {
var titleEncodeText1 = "datalabels name";
var otazka11 = "Text of name 1";
var ot1nazov = "Name 1";
var poc = "No. : ";
var pod = "Share: ";
Highcharts.setOptions({
colors: ['#2A4E82', '#990D59', '#E0942F'],
lang: {
thousandsSep: ' ',
decimalPoint: ','
}
});
var chart = new Highcharts.Chart({
xpie1: '15%',
xpie2: '50%',
xpie3: '85%',
chart: {
renderTo: 'graphs',
plotBackgroundColor: null,
plotBorderWidth: null,
height: 210,
},
title: {
text: titleEncodeText1.unescapeHtml(),
style: {
color: '#910c4e',
fontSize: '16px',
fontFamily: 'Arial'
}
},
tooltip: {
formatter: function () {
if ((this.series.name == "in1")) {
return otazka11.unescapeHtml();
} else return poc.unescapeHtml() + Highcharts.numberFormat(this.point.c1, 0) + "<br/>" + pod.unescapeHtml() + "</b>" + Highcharts.numberFormat(this.y, 2) + " %</b>";
}
},
plotOptions: {
pie: {
showInLegend: true,
size: 180,
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: -25,
color: "#FFF",
style: {
/////textShadow: '0 0 1px #2A4E82, 0 0 1px #2A4E82'
},
format: '{point.y:.2f} %',
},
point: {
...