JSFiddle - React, Tailwind, and code Playground
by franzo
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
function percentifyAxis(v) {
return (100.0 * v).toFixed(0) + '%'
}
function percentifyDataLabel(v) {
if (v)
if (v == 0.9123)
return "whoa!~";
else
return (100.0 * v).toFixed(0) + ' %'
else
return '';
}
//Highcharts.seriesTypes.column.prototype.pointAttrToOptions.dashstyle = 'dashStyle';
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
style: {
fontFamily: "'Raleway', 'Open Sans', Calibri, Tahoma, monospace"
}
},
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
lineColor: '#8a8a8a',
tickColor: '#8a8a8a',
labels: {
style: {
color: '#535353',
fontSize: '16px',
fontFamily: "'Open Sans', Calibri, Tahoma, Helvetica, sans-serif",
fontWeight: 'bold'
},
y: 25
},
tickLength: 5,
tickWidth: 1,
categories: ['Test 1', 'Test 2', 'Test 3']
},
yAxis: {
min: 0,
max: 1,
lineWidth: 1,
lineColor: '#8a8a8a',
tickColor: '#8a8a8a',
tickLength: 5,
tickWidth: 1,
tickInterval: 0.2,
gridLineWidth: 0,
labels: {
style: {
color: '#535353',
fontSize: '14px',
fontFamily: "'Raleway', 'Open Sans', Calibri, Tahoma, monospace",
fontWeight: 'bold'
},
x: -15,
formatter: function() {
...