JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>

JavaScript

let metrics = [{"metric":{"id":129,"name":"Pre Pay Subscribers","description":null,"type":"number","values_revision_id":1,"is_additive":0,"is_positive":1,"is_complex":0,"decimals":null,"formula":null},"interval":86400,"values":[{"x":1451433600,"value":null},{"x":1451520000,"value":null},{"x":1451606400,"value":null},{"x":1451692800,"value":null},{"x":1451779200,"value":null},{"x":1451865600,"value":null},{"x":1451952000,"value":null},{"x":1452038400,"value":null},{"x":1452124800,"value":null},{"x":1452211200,"value":null},{"x":1452297600,"value":null},{"x":1452384000,"value":null},{"x":1452470400,"value":null}],"comparisons":{"mom":{"absolute":null,"relative":null},"qoq":{"absolute":null,"relative":null},"yoy":{"absolute":null,"relative":null},"budget":[],"forecast":[]},"$$hashKey":"object:58"},{"metric":{"id":130,"name":"Post Pay Subscribers","description":null,"type":"number","values_revision_id":1,"is_additive":0,"is_positive":1,"is_complex":0,"decimals":null,"formula":null},"interval":86400,"values":[{"x":1451433600,"value":null},{"x":1451520000,"value":null},{"x":1451606400,"value":null},{"x":1451692800,"value":null},{"x":1451779200,"value":null},{"x":1451865600,"value":null},{"x":1451952000,"value":null},{"x":1452038400,"value":null},{"x":1452124800,"value":null},{"x":1452211200,"value":null},{"x":1452297600,"value":null},{"x":1452384000,"value":null},{"x":1452470400,"value":null}],"comparisons":{"mom":{"absolute":null,"relative":null},"qoq":{"absolute":null,"relative":null},"yoy":{"absolute":null,"relative":null},"budget":[],"forecast":[]},"$$hashKey":"object:59"},{"metric":{"id":131,"name":"New...