How to use react-chartkick - 7 common examples

To help you get started, we’ve selected a few react-chartkick examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github toltarisa / Fullstack-WordMemorizer / client / src / components / utils / DailyChart.js View on Github external
import React, { Component } from "react";
import ReactChartkick, { ColumnChart } from "react-chartkick";
import Chart from "chart.js";
import axios from "axios";
import moment from "moment";
//import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

ReactChartkick.addAdapter(Chart);
class DailyChart extends Component {
  state = {
    words: [],
    data: [],
    // startDate: null,
    // endDate: null
  };
  getMemorizedWords = () => {
    // let obj= {start: this.state.startDate,
    //   end: this.state.endDate}
    //   console.log(obj);
    axios
      .get("test/getmemorizedwords")
      .then(res => {
        this.setState({
          words: res.data
github sandiz / rs-manager / src / Components / chartView.js View on Github external
constructor(props) {
    super(props);
    ReactChartkick.addAdapter(Chart)
    this.state = {
      chartData: [],
    }
    this.timer = null;
    this.lastsongid = "";
    console.log(zoom);
  }
github prashant-andani / git-scene / ui / src / dashboard.js View on Github external
import Counter from './components/counter/Counter';

import Authors from './components/authors/Authors';
import Commits from './components/commits/Commits';
import CommitCountList from './components/commitCountList/CommitCountList';
import { connect } from 'react-redux';
import ACTIONS from './constants/actions.constants';
import Chart from 'chart.js';
import './dashboard.css';
import '../node_modules/react-github-contribution-calendar/default.css';
import moment from 'moment';
import PR from './components/pr/PR';
import CommitsCard from './components/commitsCard/CommitsCard';
import CommitShare from './components/commitShare/CommitShare';

ReactChartkick.addAdapter(Chart);

const until = new Date();

const panelColors = ['#eeeeee', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];

class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      author: 'all',
      duration: 'weeks'
    };
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
github toltarisa / Fullstack-WordMemorizer / client / src / components / utils / MonthlyChart.js View on Github external
import React, { Component } from "react";
import ReactChartkick, { ColumnChart } from "react-chartkick";
import Chart from "chart.js";
import axios from 'axios';
import moment from 'moment';
ReactChartkick.addAdapter(Chart);
class MonthLyChart extends Component {
  state = {
    data: []
  };

  getMeorizedWords = () => {
    axios.get("/test/getmemorizedwords").then(res => {
      this.setState({
        words: res.data
      });
    }).catch(err => {
      throw err;
    })
  };

  calculateMonthlyData = () => {
github converge / instapy-dashboard / src / components / UserStatistics / index.jsx View on Github external
render() {
    const { classes } = this.props
    let rows = []
    if (this.state.updatedUserStats.length !== 0) {
      rows = this.state.updatedUserStats
    }

    const compareRowsByDateDesc =(a, b) => {
      return Moment(b.day).diff(Moment(a.day))
    }

    ReactChartkick.addAdapter(Chart)
    let followersFollowingChartData = [{name: 'Followers', data: {}}, {name: 'Following', data: {}}]
    let newFollowersChartData = [{name: 'New Followers', data: {}}]
    rows.forEach((item) => {
        followersFollowingChartData[0]['data'][item.day] = item.followers
        followersFollowingChartData[1]['data'][item.day] = item.following
        newFollowersChartData[0]['data'][item.day] = item.newFollowers
      }
    )

    return (
      <div className={classes.wrapper}>
        <h1>User Statistics</h1>
        <Paper>
          <LineChart data={followersFollowingChartData} />
          <LineChart data={newFollowersChartData} />
        </Paper>
github DiceBear / avatars / server / pages / stats.tsx View on Github external
import React from 'react';
import * as http from 'http';
import * as socketio from 'socket.io-client';

import Layout from '../layout';

import { Meta } from '../types/meta';
import { getMetaData } from '../server/helper/meta';

import ReactChartkick, { AreaChart } from 'react-chartkick';
import Chart from 'chart.js';
import { Stats } from '../types/mongodb';

ReactChartkick.addAdapter(Chart);

type Props = {
  meta: Meta;
};

type State = {
  stats?: Stats;
};

export default class LegalNotice extends React.Component<Props, State> {
  state: State = {};

  static async getInitialProps(ctx: { req: http.IncomingMessage }) {
    let meta: Meta;

    if (ctx.req) {
github Mike82co / TeamColoradoTracking / project3 / src / Components / MoneyChart.js View on Github external
import React, {Component} from "react"
import ReactChartkick, { LineChart, PieChart } from 'react-chartkick'
import Chart from 'chart.js'

ReactChartkick.addAdapter(Chart)
class MoneyChart extends Component {

    constructor(props) {
        super(props);
        this.state = {
        data: [],
        };
    }
    
    render(){
        return(
            <React.Fragment> 
                <PieChart data={this.props.dataToSend} width="400px" height="400px" donut="true" />
            </React.Fragment>
        )
    }

react-chartkick

Create beautiful JavaScript charts with one line of React

MIT
Latest version published 5 months ago

Package Health Score

67 / 100
Full package analysis

Popular react-chartkick functions

Similar packages