React

by Kishoreajey

HTML

<div id="content" style="width: 45%; height: 300px;"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

import { ResponsiveBarCanvas } from '@nivo/bar'
// make sure parent container have a defined height when using
// responsive component, otherwise height will be 0 and
// no chart will be rendered.
// website examples showcase many properties,
// you'll often use just a few of them.
class MyComponent extends React.Component {
  render() {
   return (
   
   			<div  style="width: 45%; height: 300px;">
        
 <ResponsiveBar
data = ({ [
  {
    "country": "AD",
    "hot dog": 197,
    "hot dogColor": "hsl(120, 70%, 50%)",
    "burger": 131,
    "burgerColor": "hsl(211, 70%, 50%)",
    "sandwich": 69,
    "sandwichColor": "hsl(158, 70%, 50%)",
    "kebab": 124,
    "kebabColor": "hsl(238, 70%, 50%)",
    "fries": 121,
    "friesColor": "hsl(204, 70%, 50%)",
    "donut": 34,
    "donutColor": "hsl(287, 70%, 50%)",
    "junk": 173,
    "junkColor": "hsl(336, 70%, 50%)",
    "sushi": 187,
    "sushiColor": "hsl(321, 70%, 50%)",
    "ramen": 193,
    "ramenColor": "hsl(14, 70%, 50%)",
    "curry": 34,
    "curryColor": "hsl(213, 70%, 50%)",
    "udon": 17,
    "udonColor": "hsl(251, 70%, 50%)",
    "bagel": 156,
    "bagelColor": "hsl(22, 70%, 50%)",
    "yakitori": 90,
    "yakitoriColor": "hsl(248, 70%, 50%)",
    "takoyaki": 63,
    "takoyakiColor": "hsl(3, 70%, 50%)",
    "tacos": 67,
    "tacosColor": "hsl(301, 70%, 50%)",
    "miso soup": 85,
    "miso soupColor": "hsl(80, 70%, 50%)",
    "tortilla": 60,
    "tortillaColor": "hsl(203, 70%, 50%)",
    "tapas": 98,
    "tapasColor": "hsl(359, 70%, 50%)",
    "chipirones": 36,
    "chipironesColor": "hsl(35, 70%, 50%)",
    "gazpacho": 109,
    "gazpachoColor": "hsl(40, 70%, 50%)",
    "soba": 134,
    "sobaColor": "hsl(170, 70%, 50%)",
    "bavette": 90,
    "bavetteColor": "hsl(47, 70%, 50%)",
    "steak": 111,
    "steakColor": "hsl(274, 70%, 50%)",
    "pizza": 130,
    "pizzaColor": "hsl(333, 70%, 50%)",
    "spaghetti": 173,
    "spaghettiColor": "hsl(291, 70%, 50%)",
    "ravioli": 152,
    "ravioliColor":...