Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

FusionCharts JavaScript Charting library. Over 95+ charts and 1,400+ maps to choose from, with integrations available for all popular JavaScript frameworks & back-end programming languages.

Stars: ✭ 65 (-93.11%)

Mutual labels: charts, gantt-chart

ganttlab

A live Gantt chart for GitLab and GitHub

Stars: ✭ 30 (-96.82%)

Mutual labels: gantt-chart, gantt

smart-gantt-chart

Gantt Web Component

Stars: ✭ 15 (-98.41%)

Mutual labels: gantt-chart, gantt

Openproject

OpenProject is the leading open source project management software.

Stars: ✭ 5,337 (+465.36%)

Mutual labels: gantt, gantt-chart

Blazor Samples

Explore and learn Syncfusion Blazor components using large collection of demos, example applications and tutorial samples

Stars: ✭ 156 (-83.47%)

Mutual labels: charts, gantt-chart

jz-gantt

An easy-to-use Gantt component. 持续更新，中文文档

Stars: ✭ 87 (-90.78%)

Mutual labels: gantt-chart, gantt

Devextreme

HTML5 JavaScript Component Suite for Responsive Web Development

Stars: ✭ 1,385 (+46.72%)

Mutual labels: charts, gantt

vue-frappe-gantt-demo

No description or website provided.

Stars: ✭ 24 (-97.46%)

Mutual labels: gantt-chart, gantt

Wl Gantt

wl-gantt：一个简单易用且高度可配置的甘特图进度计划项目管理插件。An easy-to-use gantt plug-in for the vue framework.

Stars: ✭ 231 (-75.53%)

Mutual labels: gantt, gantt-chart

Gantt For React

🌿 Frappe Gantt components for React wrapper. 一个简单的甘特图 React 组件封装。

Stars: ✭ 250 (-73.52%)

Mutual labels: gantt, gantt-chart

stacked-gantt

JQuery Gantt-like chart with stacked activities/tasks, providing conciser information.

Stars: ✭ 19 (-97.99%)

Mutual labels: gantt-chart, gantt

Zmjganttchart

Full configurable spreadsheet view user interfaces for iOS applications. With this framework, you can easily create complex layouts like schedule, gantt chart or timetable as if you are using Excel.

Stars: ✭ 301 (-68.11%)

Mutual labels: gantt, gantt-chart

View All Similar Projects ➔

React Google Charts

A thin, typed, React wrapper for Google Charts.

Docs and examples.

React Google Charts

Installation

With your favorite package manager (yarn, pnpm or npm) :

yarn add react-google-charts
# or
npm i -s react-google-charts

Note : If you're using react < 16.3 then use 2.x version:

yarn add [email protected]

Quick Start

import * as React from "react";
import { render } from "react-dom";
import { Chart } from "react-google-charts";

export default class App extends React.Component {
  render() {
    return (
      <div className={"my-pretty-chart-container"}>
        <Chart
          chartType="ScatterChart"
          data={[["Age", "Weight"], [4, 5.5], [8, 12]]}
          width="100%"
          height="400px"
          legendToggle
        />
      </div>
    );
  }
}
render(<App />, document.querySelector("#app"));

Quick Walkthrough

Initialize from data array

import { Chart } from "react-google-charts";
import * as React from "react";
import { render } from "react-dom";

const options = {
  title: "Age vs. Weight comparison",
  hAxis: { title: "Age", viewWindow: { min: 0, max: 15 } },
  vAxis: { title: "Weight", viewWindow: { min: 0, max: 15 } },
  legend: "none"
};
const data = [
  ["Age", "Weight"],
  [8, 12],
  [4, 5.5],
  [11, 14],
  [4, 5],
  [3, 3.5],
  [6.5, 7]
];

const ExampleChart = () => {
  return (
    <Chart
      chartType="ScatterChart"
      data={data}
      options={options}
      width="80%"
      height="400px"
      legendToggle
    />
  );
};

render(<ExampleChart />, document.getElementByID("app"));

Initialize using rows and columns

import * as React from "react";
import { Chart } from "react-google-charts";

const ExampleChart = () => {
  return (
    <Chart
      chartType="ScatterChart"
      rows={[[8, 12], [4, 5.5], [11, 14], [4, 5], [3, 3.5], [6.5, 7]]}
      columns={[
        {
          type: "number",
          label: "Age"
        },
        {
          type: "number",
          label: "Weight"
        }
      ]}
      options={
        // Chart options
        {
          title: "Age vs. Weight comparison",
          hAxis: {
            title: "Age",
            viewWindow: { min: 0, max: 15 }
          },
          vAxis: { title: "Weight", viewWindow: { min: 0, max: 15 } },
          legend: "none"
        }
      }
      width={"100%"}
      height={"400px"}
      legendToggle
    />
  );
};
export default ExampleChart;

Listen to chart events

Set the chart-specific events you want to listen to and the corresponding callback. The callback has the component as an argument.

import * as React from "react";
import { Chart } from "react-google-charts";

const chartEvents = [
  {
    eventName: "select",
    callback({ chartWrapper }) {
      console.log("Selected ", chartWrapper.getChart().getSelection());
    }
  }
];
const data = [
  ["age", "weight"],
  [8, 12],
  [4, 5.5],
  [11, 14],
  [4, 5],
  [3, 3.5],
  [6.5, 7]
];

const options = {
  title: "Age vs. Weight comparison",
  hAxis: { title: "Age", viewWindow: { min: 0, max: 15 } },
  vAxis: { title: "Weight", viewWindow: { min: 0, max: 15 } },
  legend: "none"
};
const ExampleChart = () => {
  return (
    <Chart
      chartType="ScatterChart"
      data={data}
      options={options}
      graphID="ScatterChart"
      width="100%"
      height="400px"
      chartEvents={chartEvents}
    />
  );
};

export default ExampleChart;

Examples

Load Data

Load Data From SpreadSheet

Demo

Charts

Area Chart

Bar Chart

Bubble Chart

Calendar Chart

Candlestick Chart

Column Chart

Code
Sandbox

Diff Scatter Chart

Diff Column Chart

Donut Chart

Code
Sandbox

Gantt Chart

Gauge Chart

Geo Chart

Histogram Chart

Line Chart

Material Bar Chart

Material Line Chart

Org Chart

Pie Chart

Sankey Chart

Scatter Chart

Stepped Area Chart

Table Chart

Timeline Chart

Treemap Chart

Waterfall Chart

Code
Sandbox

Wordtree Chart

Run the example app

git clone https://www.github.com/rakannimer/react-google-charts
cd react-google-charts
npm i
npm start

Contributing

Contributions are very welcome. Check out CONTRIBUTING.md

Demo

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 944

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (96) 🔗