JSFiddle - React, Tailwind, and code Playground

by Eric Wu

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div class="grafico" id="graficoHP"></div>
<div class="grafico" id="graficoAtaque"></div>
<div class="grafico" id="graficoDefesa"></div>
<div class="grafico" id="graficoSpAtaque"></div>
<div class="grafico" id="graficoSpDefesa"></div>
<div class="grafico" id="graficoVelocidade"></div>

CSS

.grafico{
    width:500px; 
    height:400px;
    border:1px solid black;
}

JavaScript

function seriesAtaques(){
    var dataAtaque = {
    "Charmeleon-Charizard":  [50,52,54,57,69,72 ],
    "Gengar":[55,56,58,59,61,63],
    "Golem":[86,89,92,94,97,100],
    "Pidgeotto-Pidgeot":[54,56,57,59,75,77],
    "Victreebel":[82,84,86,89,92,94,97],
    "Raichu":[67,67,68,70,72,74]
}
    var objRes = [];
    $.each(dataAtaque,function(i,v){
        objRes.push({
            name:i,
            data:v
        })
    });    
    return objRes;
}
$("#graficoAtaque").highcharts({
    crosshairs:{enabled:true},
    tooltip: {
        shared:true
            },
    xAxis:{
        categories:["32","33","34","35","36","37","38"]
    },
    series:seriesAtaques()
})