text: import React from 'react';
  import ChartistGraph from 'react-chartist';
  import Chartist from 'chartist';
  
  class SalesChart extends React.Component {
      dataSales = {
          labels: ['9:00AM', '12:00AM', '3:00PM', '6:00PM', '9:00PM', '12:00PM', '3:00AM', '6:00AM'],
          series: [
              [287, 385, 490, 492, 554, 586, 698, 695, 752, 788, 846, 944],
              [67, 152, 143, 240, 287, 335, 435, 437, 539, 542, 544, 647],
              [23, 113, 67, 108, 190, 239, 307, 308, 439, 410, 410, 509]
          ]
      };
  
      optionsSales = {
          //lineSmooth: true,
          low: 0,
          high: 800,
          showArea: true,
          height: "245px",
          axisX: {
              showGrid: false,
          },
          lineSmooth: Chartist.Interpolation.simple({
              divisor: 5
          }),
          showLine: false,
          showPoint: false
      };
  
      responsiveSales = [
          ['screen and (max-width: 640px)', {
              axisX: {
                  labelInterpolationFnc: function (value) {
                      return value[0];
                  }
              }
          }]
      ];
  
      render() {
          return (
  
              <div className="card" {...this.props} ref={this.props.innerRef}>
                  <div className="header">
                      <h4 className="title">Users Behavior</h4>
                      <p className="category">24 Hours performance</p>
                  </div>
                  <div className="content">
                      <ChartistGraph data={this.dataSales} options={this.optionsSales}
                                     responsiveOptions={this.responsiveSales} type="Line"
                                     className="ct-chart"/>
                  </div>
                  <div className="footer">
                      <div className="legend">
                          <div className="item">
                              <i className="fa fa-circle text-info"></i> Open
                          </div>
                          <div className="item">
                              <i className="fa fa-circle text-danger"></i> Click
                          </div>
                          <div className="item">
                              <i className="fa fa-circle text-warning"></i> Click Second Time
                          </div>
                      </div>
                      <hr/>
                      <div className="stats">
                          <i className="fa fa-history"></i> Updated 3 minutes ago
                      </div>
                  </div>
              </div>
          )
      }
  }
  
  export default SalesChart;