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="chart0" style="width: 565px; height: 450px; margin: 5px; padding: 0px; border: 0px">
</div>
JavaScript
//////////// SELECT ALL BUTTON //////////////
$(document).ready(function(){
$('#toggle_btn').toggle
(function(){
var i;
for(i=0; i<chart.length; i++)
{
$.each(chart[i].series, function(j, serie)
{
serie.show();
}
)
}
},
function(){
var i;
for(i=0; i<chart.length; i++) {
$.each(chart[i].series, function(j, serie) {
serie.hide();
})
}
}
)
///////////////////////////MAKE CHART fucntion/////////////////////////////////////////////
var chart = [], i;
for(i=0; i<1; i++) {
chart.push( new Highcharts.Chart({
chart: {
renderTo: 'chart'+i,
///////////////////////////CHART TYPE PREFERENCES/////////////////////////////////////////////
borderColor:'white',
margin: [55,195,70,50], //adjust margin to fit chart objects (top, right, bottom, left)
defaultSeriesType: 'bar' //this is where you would change to line, column etc..
},
///////////////////////////MAIN TITLE PREFERENCES/////////////////////////////////////////////
title: {
text: 'Percentage of the population who worked during the year, <br/>by sex, race, and Hispanic or Latino ethnicity, 2009 and 2010', //Title text goes here. Keep to 2 lines
style: { color: '#000000', fontFamily: 'Calibri, Verdana, Arial, Helvetica, sans-serif', fontWeight: 'bold', fontSize: '12pt', width: '560px'}, //css styling options for main title
y: 15
},
/* <---erase note outs above and below to use subtititle
...