JSFiddle - React, Tailwind, and code Playground
by alr3
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="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy'
},
title: {
text: 'Highcharts Bubbles'
},
yAxis: {
title: {
text: 'Interest/Focus on topic'
}
},
xAxis: {
title: {
text: null
}
},
series: [{
name: 'Experience in Writing Software',
data: [
[2005, 100, 100],
[2006, 100, 100],
[2007, 100, 100],
[2008, 100, 100],
[2009, 90, 80],
[2010, 90, 80],
[2011, 80, 80],
[2012, 80, 80],
[2013, 70, 80],
[2014, 70, 70],
[2015, 70, 60]
]
}, {
name: 'Experience in Architecting Software Systems',
data: [
[2005, 100, 10],
[2006, 100, 20],
[2007, 100, 30],
[2008, 100, 40],
[2009, 90, 80],
[2010, 90, 100],
[2011, 90, 70],
[2012, 90, 60],
[2013, 80, 90],
[2014, 80, 100],
[2015, 70, 60]
]
}, {
name: 'Experience in Team Leadership',
data: [
[2005, 10, 0],
[2006, 15, 0],
[2007, 20, 10],
[2008, 60, 30],
[2009, 80, 50],
[2010, 100, 80],
[2011, 100, 30],
[2012, 100, 90],
[2013, 100, 60],
[2014, 100, 100],
[2015, 100, 100]
]
}, {
name: 'Experience in Agile Processes/Project Management',
data: [
[2005, 5, 2],
[2006, 20, 8],
[2007, 30, 15],
[2008, 70, 35],
[2009, 75, 45],
[2010,...