JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.highcharts.com/js/highcharts.js"></script>
<table>
<tr><td>John</td><td class="wideTab">
<div class="areaChart" style="width: 100%; height: 300px">If you're reading this, it's not working.</div>
</td></tr><tr><td>Sally</td><td>
<div class="columnChart" style="width: 100%; height: 300px">If you're reading this, it's not working.</div>
</td></tr><tr><td>Holly</td><td>
<div class="columnChart" style="width: 100%; height: 300px">If you're reading this, it's not working.</div>
</td></tr>
</table>
CSS
td {
border: 1px solid black;
}
td.wideTab {
width: 400px;
}
JavaScript
(function($){
var chartType = {
myArea : {
chart: { type: 'area' },
title: { text: 'Example Line Chart' },
xAxis: {
title: { text: 'Quantity Sold' },
categories: [ 'Jan', 'Feb', 'Mar' ]
},
yAxis: {
title: { text: 'Quantity Sold' }
},
series: []
},
myColumn : {
chart: { type: 'column' },
title: { text: 'Example Column Chart' },
xAxis: {
title: { text: 'Quantity Sold' },
categories: [ 'Jan', 'Feb', 'Mar' ]
},
yAxis: {
title: { text: 'Quantity Sold' }
},
series: []
}
};
var methods = {
init:
function (chartName, options) {
return this.each(function(i) {
optsThis = options[i];
chartType[chartName].chart.renderTo = this;
optsHighchart = $.extend (true, {}, chartType[chartName], optsThis);
new Highcharts.Chart (optsHighchart);
});
}
};
$.fn.cbhChart = function (action,objSettings) {
if ( chartType[action] ) {
return methods.init.apply( this, arguments );
} else if ( methods[action] ) {
return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
} else if ( typeof action === 'object' || !action ) {
$.error( 'Invalid arguments to plugin: jQuery.cbhChart' );
} else {
$.error( 'Action "' + action + '" does not exist on jQuery.cbhChart' );
}
};
})(jQuery);
$(function(){
chart1Opts = {
title: { text: 'Graph One' },
series: [{ data: [ 5, 6, 7 ] }]
};
chart2Opts = {
title: { text: 'Graph Two' },
series: [{ data: [ 20, {y:25,color:'green'}, 6 ], color:'red' }]
};
chart3Opts = {
title: { text: 'Graph Two' },
series: [{ data: [ 16, 5, 19 ] }]
};
optsArr1 = [ chart1Opts ];
optsArr2 = [...