JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="ChartContainer" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'ChartContainer',
type: "pie",
title: {
margin: 0,
text: "",
y:0,
x:0,
align: 'center',
verticalAlign: 'middle',
}
},
plotOptions: {
pie: {
animation: false,
borderWidth: 0,
innerSize: '90%',
dataLabels: {
enabled: false
}
},
},
title: {
text: "",
margin: 0,
y:0,
x:0,
align: 'center',
verticalAlign: 'middle',
},
yAxis: {
title: {
text: null
},
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}],
});
chart.setTitle({
useHTML: true,
text: "Testing" + " " + "<img src='../images/appendImage.png' alt='' />"
},
{
text: "This is a test"
});
chart.options.title.text = "Testing";
chart.options.subtitle.text = "This is a test";
});
});