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 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 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>
        <h1>User Statistics</h1>
        
          
          
        </div>
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 {
  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-chartkick

Create beautiful JavaScript charts with one line of React

MIT
Latest version published 1 month ago

Package Health Score

68 / 100
Full package analysis

Popular react-chartkick functions