JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 700px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
window.chart = new Highcharts.Chart(
{
chart: {
renderTo: "container",
marginLeft: 80,
marginRight: 165,
marginTop: 61,
defaultSeriesType: "line",
polar: true
},
title: {
text: "Age Categorization Variable",
style: {
width: 788
}
},
plotOptions: {
series: {
shadow: false,
dataLabels: {
enabled: true
}
},
line: {}
},
tooltip: {},
xAxis: {
text: null,
categories: [
"18-25",
"25-35",
"36-45",
"46-55",
"Over 55"
],
tickmarkPlacement: "on",
lineWidth: 0
},
yAxis: {
min: null,
max: null,
labels: {},
title: {
text: null
},
gridLineInterpolation: "polygon",
lineWidth: 0
},
legend: {
layout: "vertical",
borderWidth: 1,
align: "right",
x: -10,
verticalAlign: "middle",
backgroundColor: "#FFFFFF",
reversed: false
},
series: [
{
name: "Total",
data: [
{
y: 0.19,
decimalType: "percent",
statLetters: ""
},
{
y: 0.19,
decimalType: "percent",
statLetters: ""
},
{
y: 0.15,
decimalType: "percent",
statLetters: ""
},
{
y: 0.27,
decimalType: "percent",
statLetters: ""
},
{
y: 0.2,
decimalType: "percent",
statLetters: ""
}
]
}
...