JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.highcharts.com/highcharts.js"></script>
<div id="container" />
CSS
#container {
padding: 20px;
background-color: white;
}
.highcharts-axis-labels.highcharts-yaxis-labels > text:first-of-type {
display: none;
}
JavaScript
var themeColors = {
primaryColor: '#067bc2', //dark blue
secondaryColor: '#6a61a7', //dark purple
tertiaryColor: '#5ccadc', //turquoise
darkGray: '#37383e', //dark gray
mediumGray: '#919aa2', //medium gray
mediumLightGray: '#c9d3dc', //medium blue gray
lightGray: '#eaf1f8', //light blue gray (hover color)
primaryRed: '#e54443',
secondaryRed: '#e54443',
primaryGreen: '#2bbb2d',
secondaryGreen: '#2bbb2d',
primaryOrange: '#ffa883', //peach
primaryBackground: '#fafcfe',//light blue
secondaryBackground: '#ffffff',
primaryText: '#37383e', //dark gray
secondaryText: '#919aa2', //medium gray
selectedColor: '#f5fafd' //light blue, slightly darker than background
};
var colors = [
themeColors.secondaryColor,
themeColors.tertiaryColor,
themeColors.primaryOrange
];
(function renderChart(series) {
var options = {
chart: {
height: 400,
spacing: [0,0,0,0],
type: 'areaspline',
},
colors: colors,
credits: { enabled: false },
legend: {
align: 'left',
itemStyle: {
color: themeColors.secondaryText,
fontSize: '12px',
fontWeight: 'normal',
},
margin: 30,
symbolHeight: 14,
symbolRadius: 0,
symbolWidth: 14,
},
plotOptions: {
areaspline: {
marker: {
fillColor: themeColors.secondaryBackground,
lineColor: null,
lineWidth: 2,
radius: 3,
symbol: 'circle',
}
}
},
title: { text: null },
xAxis: {
categories: ['first', 'second', 'third'],
crosshair: {
color: Highcharts.color(themeColors.lightGray).setOpacity(.5).get('rgba'),
width: 12
},
labels: {
style: {
color: themeColors.secondaryText,
fontSize: '12px'
}
},
lineColor: themeColors.lightGray,
tickColor: themeColors.lightGray,
tickWidth:...