Bar Chart

by Muthuraman B

JavaScript

import React from "react";
import ReactDOM from "react-dom";

import "@progress/kendo-react-charts";
import "@progress/kendo-react-popup";
import { ComboBox, DropDownList } from "@progress/kendo-react-dropdowns";
import "@progress/kendo-react-inputs";
import "@progress/kendo-react-intl";
import "@progress/kendo-data-query";
import "@progress/kendo-drawing";
import "@progress/kendo-file-saver";

import {
  Chart,
  ChartTitle,
  ChartSeries,
  ChartSeriesItem,
  ChartCategoryAxis,
  ChartCategoryAxisTitle,
  ChartCategoryAxisItem
} from "@progress/kendo-react-charts";

const series = [
  {
    data: [11, 11, 11, 11],
    color: "#d54929"
  },
  {
    data: [22, 22, 22, 22],
    color: "#fec465"
  },
  {
    data: [33, 33, 33, 33],
    color: "#54c2c8"
  }
];

const ChartContainer = () => (
  <Chart>
    <ChartSeries>
      {series.map((item, idx) => (
        <ChartSeriesItem
          color={item.color}
          key={idx}
          type="bar"
          data={item.data}
        />
      ))}
    </ChartSeries>
  </Chart>
);

ReactDOM.render(<ChartContainer />, document.querySelector("my-app"));