react-chartjs-2#Bar JavaScript Examples

render() {
        const options = {
            legend: {
                position: "bottom"
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }}]
            },
            plugins: {
                datalabels: {
                    display: function(context) {
                        return context
                    },
                    font: {
                        weight: 'bold'
                    }
                }
            },
            tooltips: {
                enabled: false
            }
        };

        return (
            <div>
                <Image src={azureImage} style={{width: "98%"}} />
                <h3 className="text-left my-3">实时统计</h3>
                <Bar data={this.state.chartData} options={options} plugins={DataLabels}/>
                <NoticeAlert />
            </div>
        )
    }

function Charts() {
  return (
    <>
      <PageTitle>Charts</PageTitle>

      <div className="grid gap-6 mb-8 md:grid-cols-2">
        <ChartCard title="Doughnut">
          <Doughnut {...doughnutOptions} />
          <ChartLegend legends={doughnutLegends} />
        </ChartCard>

        <ChartCard title="Lines">
          <Line {...lineOptions} />
          <ChartLegend legends={lineLegends} />
        </ChartCard>

        <ChartCard title="Bars">
          <Bar {...barOptions} />
          <ChartLegend legends={barLegends} />
        </ChartCard>
      </div>
    </>
  )
}

render() {
        const data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "Sales Analytics",
                    backgroundColor: "rgba(52, 195, 143, 0.8)",
                    borderColor: "rgba(52, 195, 143, 0.8)",
                    borderWidth: 1,
                    hoverBackgroundColor: "rgba(52, 195, 143, 0.9)",
                    hoverBorderColor: "rgba(52, 195, 143, 0.9)",
                    data: [65, 59, 81, 45, 56, 80, 50,20]
                }
            ]
        };

        const option = {
            scales: {
                xAxes: [{
                    barPercentage: 0.4
                }]
            }
        }

        return (
            <React.Fragment>
                <Bar width={474} height={300} data={data} options={option} />
            </React.Fragment>
        );
    }

export function BarChart(props) {
  function generateGraph() {
    const colorVal = `rgba(${props.color.r},${props.color.g},${props.color.b},${props.color.a})`;
    return {
      labels: props.labels,
      datasets: [
        {
          label: props.title,
          fill: false,
          lineTension: 0.5,
          backgroundColor: colorVal,
          borderColor: 'rgba(0,0,0,1)',
          borderWidth: 2,
          data: props.data
        }
      ]
    }
  }

  return (
    <Bar data={generateGraph} legend={{ display: false }} />)
}

export default function BarPlot (props) {
  return <Bar
    data={props.data}
    options={{
      responsive: true,
      maintainAspectRatio: false,
      aspectRatio: 1,
      animation: { duration: 0 },
      plugins: {
        legend: {
          display: props.legend
        }
      }
    }}
  />
}

render() {
    return (
      <div>
        <Bar
          id="bar-graph"
          data={this.state}
          width={100}
          height={50}
          options={{
            scales: {
              yAxes: [
                {
                  ticks: {
                    beginAtZero: true,
                  },
                },
              ],
            },
          }}
        />
      </div>
    );
  }

render() {
    return (
      <div>
        <Bar
          id="bar-graph"
          data={this.state}
          width={100}
          height={50}
          options={{
            scales: {
              yAxes: [
                {
                  ticks: {
                    beginAtZero: true,
                  },
                },
              ],
            },
          }}
        />
      </div>
    );
  }

render() {
    return (
      <div>
        <Bar
          id="bar-graph"
          data={this.state}
          width={1000}
          height={500}
          options={{ maintainAspectRatio: false }}
          options={{
            scales: {
              yAxes: [
                {
                  ticks: {
                    beginAtZero: true,
                  },
                },
              ],
            },
          }}
        />
      </div>
    );
  }

Chart = ({data: { confirmed, deaths, recovered }, country}) => {
    const [dailyData, setDailyData] = useState([]);

    useEffect(() => {
        const fetchAPI = async () => {
             setDailyData(await fetchDailyData());
        }


        fetchAPI();
    }, []); //[] this means empty array and this moth to make use effect behave like component didmount and not run endlessly

    const lineChart = (
        dailyData.length 
        ? (
        <Line
            data={{
                labels: dailyData.map(({ date }) => date),
                datasets: [{
                    data:dailyData.map(({ confirmed }) => confirmed),
                    label:'Infected',
                    borderColor: '#3333ff',
                    fill: true,
                }, {
                    data:dailyData.map(({ deaths }) => deaths),
                    label:'Deaths',
                    borderColor: 'red',
                    backgroundColor: 'rgba(255, 0, 0, 0.5)',
                    fill: true, 
                }],
            }}
            />) : null
    );

    console.log(confirmed, recovered, deaths);

    const barChart = (
        confirmed
        ? (
            <Bar
            data={{
                labels: ['Infected', 'Recovered', 'Deaths'],
                datasets:[{
                    label: 'People',
                    backgroundColor: [
                        'rgba(0, 0, 255, 0.5)',
                        'rgba(0, 255, 0, 0.5)',
                        'rgba(255, 0, 0, 0.5)',
                    ],
                    data:[confirmed.value, recovered.value, deaths.value]
                }]
            }}
           options={{
               legend: { display: false},
               title: {display: true, text:`Current state in ${country}`},
           }}
            />
        ) : null
    );

    return(
        <div className={styles.container}>
            {country ? barChart : lineChart}
        </div>
    )
}

export default function StackedBarChart(props){
  const DefaultMaxTicks = 10;
  const { series, minTickStep, displayValue, light, maxTicks } = props;
  const maxTicksValue = maxTicks? maxTicks : DefaultMaxTicks;
  const brushColor = light ? blackColor : whiteColor;
  const dataCount = series[0].data.length;
  const labels = new Array(dataCount).fill('');
  const minValue = 0;
  var maxValue = minTickStep;
  var datasets = [];
  series.forEach( dataSeries => {
    datasets.push({
      data: dataSeries.data,
      label: dataSeries.label,
      backgroundColor: dataSeries.color,
      barPercentage: 0.6,
      borderColor: brushColor,
      borderWidth: 1,
      stack: 'default',
    })
  });

  //max value for summary
  for (var i = 0; i < dataCount; i++){
    var total = 0;
    for (var j = 0; j < series.length; j++){
      total += series[j].data[i];
    }
    maxValue = Math.max(maxValue, total);
  }

  const chartData = {
    labels: labels,
    datasets: datasets,
  };

  let tickStep;
  if (maxValue <= maxTicksValue * minTickStep){
    tickStep = minTickStep;
  }else{
    tickStep = Math.ceil(maxValue / maxTicksValue / minTickStep) * minTickStep;
  }

  const chartOptions = {
    scales: {
      xAxes: [{
        display: false,
      }],
      yAxes: [{
        stacked: true,
        gridLines:{
            borderDash: [2, 4],
            color: brushColor,
            zeroLineColor: brushColor,
            zeroLineWidth: 2,
        },
        ticks: {
          stepSize: tickStep,
          fontColor: brushColor,
          suggestedMax: maxValue,
          suggestedMin: minValue,
          callback: value => {
            if (displayValue){
              return displayValue(value);
            }else {
              return value.toString();
            }
          }
        },
      }],
    },
    legend: {
      display: false,
    },
  };
  return <Bar data={chartData} options={chartOptions}/>;
}

export default function MultiBarChart(props){
  const DefaultMaxTicks = 10;
  const { series, minTickStep, displayValue, light, maxTicks } = props;
  const maxTicksValue = maxTicks? maxTicks : DefaultMaxTicks;
  const brushColor = light ? blackColor : whiteColor;
  const dataCount = series[0].data.length;
  const labels = new Array(dataCount).fill('');
  const minValue = 0;
  var maxValue = minTickStep;
  var datasets = [];
  series.forEach( dataSeries => {
    dataSeries.data.forEach( value =>{
      maxValue = Math.max(maxValue, value);
    })
    datasets.push({
      data: dataSeries.data,
      label: dataSeries.label,
      backgroundColor: dataSeries.color,
      barPercentage: 0.6,
      borderColor: brushColor,
      borderWidth: 1,
    })
  });

  const chartData = {
    labels: labels,
    datasets: datasets,
  };

  let tickStep;
  if (maxValue <= maxTicksValue * minTickStep){
    tickStep = minTickStep;
  }else{
    tickStep = Math.ceil(maxValue / maxTicksValue / minTickStep) * minTickStep;
  }

  const chartOptions = {
    scales: {
      xAxes: [{
        display: false,
      }],
      yAxes: [{
        gridLines:{
            borderDash: [2, 4],
            color: brushColor,
            zeroLineColor: brushColor,
            zeroLineWidth: 2,
        },
        ticks: {
          stepSize: tickStep,
          fontColor: brushColor,
          suggestedMax: maxValue,
          suggestedMin: minValue,
          callback: value => {
            if (displayValue){
              return displayValue(value);
            }else {
              return value.toString();
            }
          }
        },
      }],
    },
    legend: {
      display: false,
    },
  };
  return <Bar data={chartData} options={chartOptions}/>;
}

render() {
        const {ghdate,ghconfirm} = this.state;
        const barChart = (<Bar   
        height = {160}
        data = {{ 
         labels: ghdate.map((date) => { return date  }),
         datasets: [
            {
              barPercentage: 0.2,
              label: 'confirmed',
              backgroundColor:'orange',
              data: ghconfirm.map((confirm)=> {return confirm }),
            },
          ],
        }
        } 
        options={{
          responsive:true,
          maintainAspectRatio:false,
          scales:
            {
                xAxes:[{
                  gridLines: {
                  display:false
                 },
                }],
                yAxes: [{
                  gridLines: {
                  display:false,
                    },
                    ticks:{
                        beginAtZero:true,
                        maxTicksLimit:5
                    }

                }]
            },
           
         }

        
        }
        />
        )

      return (
        <div className ="gcard">
                <p className="ti1 fw7">Daily New Cases in India</p>    
                <div className="graph">
                {barChart}
                </div>
                </div>
                
      );
      }

BarChart = ({ sizeData }) => {
    const themeContext = useContext(ThemeContext);

    const data = {
        labels: [],
        datasets: [
            {
                label: "",
                data: [],
                backgroundColor: bgColor,
            },
        ],
    };
    data.labels = sizeData.label;
    data.datasets[0].data = sizeData.data;

    const scales = {
        xAxes: [
            {
                ticks: {
                    fontColor: themeContext.textColor,
                    fontFamily: "'Roboto', sans-serif",
                    fontSize: 12,
                },
            },
        ],
        yAxes: [
            {
                ticks: {
                    fontColor: themeContext.textColor,
                    beginAtZero: true,
                    fontFamily: "'Roboto', sans-serif",
                    fontSize: 12,
                },
            },
        ],
    };

    return (
        <>
            <Bar
                data={data}
                options={{
                    maintainAspectRatio: false,
                    responsive: true,
                    title: {
                        display: false,
                        text: "Biggest Repos in Size (kb)",
                        fontSize: 25,
                    },
                    legend: {
                        display: false,
                        position: "right",
                    },
                    scales: scales
                }}

            />
        </>
    );
}

handleStatisticBar = (mainData, options) =>
  mainData?.datasets[0]?.data?.length ? (
    <Bar data={mainData} options={options} redraw />
  ) : (
    <StatisticError />
  )

ChartsChartjs = () => {
  return (
    <div>
      <Helmet title="Charts / Chartjs" />
      <div className="kit__utils__heading">
        <h5>
          <span className="mr-3">Charts / Chartjs</span>
          <a
            href="http://www.chartjs.org/"
            rel="noopener noreferrer"
            target="_blank"
            className="btn btn-sm btn-light"
          >
            Official Documentation
            <i className="fe fe-corner-right-up" />
          </a>
        </h5>
      </div>
      <div className="card">
        <div className="card-body">
          <div className="row">
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Line Chart</strong>
              </h5>
              <div className="mb-5">
                <Line data={lineData} options={lineOptions} width={400} height={200} />
              </div>
            </div>
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Bar Chart</strong>
              </h5>
              <div className="mb-5">
                <Bar data={barData} options={barOptions} width={400} height={200} />
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Radar Chart</strong>
              </h5>
              <div className="mb-5">
                <Radar data={radarData} options={radarOptions} width={400} height={200} />
              </div>
            </div>
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Polar Area Chart</strong>
              </h5>
              <div className="mb-5">
                <Polar data={polarData} options={polarOptions} width={400} height={200} />
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Pie Chart</strong>
              </h5>
              <div className="mb-5">
                <Pie data={pieData} options={pieOptions} width={400} height={200} />
              </div>
            </div>
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Doughnut Chart</strong>
              </h5>
              <div className="mb-5">
                <Doughnut data={doughnutData} options={doughnutOptions} width={400} height={200} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

function SimpleChartApp() {
    const base = useBase();
    const globalConfig = useGlobalConfig();

    const tableId = globalConfig.get(GlobalConfigKeys.TABLE_ID);
    const table = base.getTableByIdIfExists(tableId);

    const viewId = globalConfig.get(GlobalConfigKeys.VIEW_ID);
    const view = table ? table.getViewByIdIfExists(viewId) : null;

    const xFieldId = globalConfig.get(GlobalConfigKeys.X_FIELD_ID);
    const xField = table ? table.getFieldByIdIfExists(xFieldId) : null;

    const records = useRecords(view);

    const data = records && xField ? getChartData({records, xField}) : null;

    return (
        <Box
            position="absolute"
            top={0}
            left={0}
            right={0}
            bottom={0}
            display="flex"
            flexDirection="column"
        >
            <Settings table={table} />
            {data && (
                <Box position="relative" flex="auto" padding={3}>
                    <Bar
                        data={data}
                        options={{
                            maintainAspectRatio: false,
                            scales: {
                                yAxes: [
                                    {
                                        ticks: {
                                            beginAtZero: true,
                                        },
                                    },
                                ],
                            },
                            legend: {
                                display: false,
                            },
                        }}
                    />
                </Box>
            )}
        </Box>
    );
}

MixedChart = ({reports, height}) => (
  <Bar data={formatData(reports)} options={options} height={height} />
)

IndicateurCumulChart = ({label, metricName, reports, color, height}) => (
  <Bar data={formatData(label, metricName, reports, color)} options={options} height={height} />
)

CovidTestsMixedChart = ({reports, height}) => (
  <Bar data={formatData(reports)} options={options} height={height} />
)

storiesOf('Updating chart Example', module).add('Line & Bar', () => {
  const labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
  ];

  const Chart = ({ data }) => {
    const config = {
      labels: labels,
      datasets: data.map((series, idx, arr) => {
        let { year, data, color } = series;
        return {
          id: year,
          type: idx < arr.length - 1 ? 'line' : 'bar',
          label: year,
          data: data,
          backgroundColor: color,
          borderColor: color
        };
      })
    };
    return <Bar data={config} options={options} />;
  };

  class SelectAndChart extends React.Component {
    constructor() {
      super();
      this.state = { data: srcData.map(s => ({ ...s, selected: true })) };
    }

    toggleYear(year) {
      this.setState(state => {
        return {
          data: state.data.map(s => ({
            ...s,
            selected: year === s.year ? !s.selected : s.selected
          }))
        };
      });
    }

    render() {
      return (
        <div>
          <Chart data={this.state.data.filter(series => series.selected)} />
          <Select data={this.state.data} toggle={this.toggleYear.bind(this)} />
        </div>
      );
    }
  }

  const Select = ({ data, toggle }) => {
    return (
      <div>
        {data.map(({ year, selected }) => (
          <div key={year}>
            <input
              type="checkbox"
              checked={selected}
              onChange={toggle.bind(null, year)}
            />
            <label htmlFor={year}>{year}</label>
          </div>
        ))}
      </div>
    );
  };

  return <SelectAndChart />;
});

VerticalBar = () => (<Bar data={data} options={options} />)

render() {
        return (
            <div>
                <div className="page-header">
                    <h3 className="page-title">
                        Chart-js
                    </h3>
                    <nav aria-label="breadcrumb">
                        <ol className="breadcrumb">
                        <li className="breadcrumb-item"><a href="!#" onClick={event => event.preventDefault()}>Charts</a></li>
                        <li className="breadcrumb-item active" aria-current="page">Chart-js</li>
                        </ol>
                    </nav>
                </div>
                <div className="row">
                    <div className="col-md-6 grid-margin stretch-card">
                        <div className="card">
                            <div className="card-body">
                                <h4 className="card-title">Line Chart</h4>
                                <Line data={this.data} options={this.options} />
                            </div>
                        </div>
                    </div>
                    <div className="col-md-6 grid-margin stretch-card">
                        <div className="card">
                            <div className="card-body">
                                <h4 className="card-title">Bar Chart</h4>
                                <Bar data={this.data} options={this.options} />    
                            </div>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-md-6 grid-margin stretch-card">
                        <div className="card">
                            <div className="card-body">
                                <h4 className="card-title">Area Chart</h4>
                                <Line data={this.areaData} options={this.areaOptions} />
                            </div>
                        </div>
                    </div>
                    <div className="col-md-6 grid-margin stretch-card">
                        <div className="card">
                            <div className="card-body">
                                <h4 className="card-title">Doughnut Chart</h4>
                                <Doughnut data={this.doughnutPieData} options={this.doughnutPieOptions} />
                            </div>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-md-6 grid-margin stretch-card">
                        <div className="card">
                            <div className="card-body">
                                <h4 className="card-title">Pie Chart</h4>
                                <Pie data={this.doughnutPieData} options={this.doughnutPieOptions} />                                
                            </div>
                        </div>
                    </div>
                    <div className="col-md-6 grid-margin stretch-card">
                        <div className="card">
                            <div className="card-body">
                                <h4 className="card-title">Scatter Chart</h4>
                                <Scatter data={this.scatterChartData} options={this.scatterChartOptions} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

render(){
  return (
    <div className="ARI">
      <div>
        <Row>
          <Col sm="12">
            <Card className="Rounded p-3">
              <Bar
                data={{
                    labels: ['CT1','CT2','CT3','CT4','CT5','CT6','TT1','TT2','TT3','TT4','TT5','TT6','TT7','TT8','DT1','DT2','DT3','DT4'],
                datasets: [
                        {
                          backgroundColor: ['lightblue','lightblue','lightblue','lightblue','lightblue','lightblue',
                            'lightgreen','lightgreen','lightgreen','lightgreen','lightgreen','lightgreen','lightgreen','lightgreen',
                            'pink','pink','pink','pink'
                          ],
                          borderColor: ['lightblue','lightblue','lightblue','lightblue','lightblue','lightblue',
                            'lightgreen','lightgreen','lightgreen','lightgreen','lightgreen','lightgreen','lightgreen','lightgreen',
                            'pink','pink','pink','pink'
                          ],
                          borderWidth: 1,
                          hoverBackgroundColor: ['blue','blue','blue','blue','blue','blue','green','green','green','green','green','green','green','green','red','red','red','red'],
                          hoverBorderColor: ['blue','blue','blue','blue','blue','blue','green','green','green','green','green','green','green','green','red','red','red','red'],
                          data: [this.state.AT1,this.state.AT2,this.state.AT3,this.state.AT4,this.state.AT5,this.state.AT6,this.state.TT1,this.state.TT2,this.state.TT3,this.state.TT4,
                            this.state.TT5,this.state.TT6,this.state.TT7,this.state.TT8,this.state.DT1,this.state.DT2,this.state.DT3,this.state.DT4], 
                          },
                        ],
                }}
                options={{
                    scales: {
                      yAxes: [{
                        ticks: {
                          beginAtZero: true,
                          max: 100,
                          stepSize: 20  
                        }
                      }]
                    },
                  }}
                  />
            </Card>
          </Col>
        </Row>
      </div>
    </div>
  );
}

Chart = ({ data: { confirmed, recovered, deaths }, country }) => {
  const [dailyData, setDailyData] = useState({});

  useEffect(() => {
    const fetchMyAPI = async () => {
      const initialDailyData = await fetchDailyData();

      setDailyData(initialDailyData);
    };

    fetchMyAPI();
  }, []);

  const barChart = (
    confirmed ? (
      <Bar
        data={{
          labels: ['Infected', 'Recovered', 'Deaths'],
          datasets: [
            {
              label: 'People',
              backgroundColor: ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0, 0.5)', 'rgba(255, 0, 0, 0.5)'],
              data: [confirmed.value, recovered.value, deaths.value],
            },
          ],
        }}
        options={{
          legend: { display: false },
          title: { display: true, text: `Current state in ${country}` },
        }}
      />
    ) : null
  );

  const lineChart = (
    dailyData[0] ? (
      <Line
        data={{
          labels: dailyData.map(({ date }) => new Date(date).toLocaleDateString()),
          datasets: [{
            data: dailyData.map((data) => data.confirmed),
            label: 'Infected',
            borderColor: '#3333ff',
            fill: true,
          }, {
            data: dailyData.map((data) => data.deaths),
            label: 'Deaths',
            borderColor: 'red',
            backgroundColor: 'rgba(255, 0, 0, 0.5)',
            fill: true,
          },  {
            data: dailyData.map((data) => data.recovered),
            label: 'Recovered',
            borderColor: 'green',
            backgroundColor: 'rgba(0, 255, 0, 0.5)',
            fill: true,
          },
          ],
        }}
      />
    ) : null
  );

  return (
    <div className={styles.container}>
      {country ? barChart : lineChart}
    </div>
  );
}

function Chart(props) {
    function renderChart(info, type, metaData) {
        try {
            return getChart(info, type, metaData)
        } catch (e) {
            console.log(e)
        }
    }
    function getChart(info, type, metaData) {
        let data = createData(info, type, metaData)
        let options = {
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: metaData.xLabel
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: metaData.yLabel
                    }
                }]
            }
        }
        switch (type) {
            case 'batteryCapacityHistory':
            case 'batteryLifeHistory':
                return <Line data={data} options={options}/>
            case 'powerUsageInfo':
                if (metaData.type === 'cumulativePie') {
                    return <Pie data={data} />
                }
                else if(metaData.type === 'cumulativeActiveSuspended') {
                    return <Pie data={data}/>
                }
                else if (metaData.type === 'dailyBar') {
                    return <Bar data={data} options={options}/>
                }
                else if (metaData.type === 'dailyLine') {
                    return <Line data={data} options={options} />
                }
                return <Pie data={data} />
            default:
                return <Line data={data} options={options}/>
        }
    }

    return (
        <div>
            <div className="content-center">
                <div>
                    <h3>{props.heading}</h3>
                    <span className="text-xs content-center">{props.info.note}</span>
                </div>
            </div>
            {renderChart(props.info, props.info.name, props.metaData)}
        </div>
    )
}

ParticipantChart = (props) => {
    return (
        <div className="gsocChart">
            <Bar
                data={{
                    labels: ['2010','2011','2012','2013','2014','2015','2016', '2017', '2018', '2019', '2020', '2021'],
                    datasets: [
                        {
                            label: 'No. of Participants accepted',
                            data: [410,630,905,1126,1000,1026,1115,1212,1192,1307,1051, 1206, 1318, 1264, 1276, 1198, 1292],
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            borderColor: 'rgba(255, 99, 132, 1)',
                            borderWidth: 1,
                        },
                        {
                            label: 'Sucessful participants',
                            data: [328,516.6,733.05,935,850,913.14,981,1073,1060,1172,927, 1032, 1136, 1090, 1136, 1106, 1205],
                            backgroundColor: 'orange',
                            borderColor: 'red',
                            borderWidth: 1,
                        },
                    ],
                    }
                }
                options={{
                    maintainAspectRatio: false,
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    beginAtZero: true,
                                },
                            },
                        ],
                    },
                    legend: {
                        labels: {
                            fontSize: props.font ,
                        }
                    },
                }}
            />
        </div>
    )
}

function AgeChart(props) {
  const ages = Array(10).fill(0);
  if (!props.data || props.data.length === 0) {
    return <div></div>;
  }

  props.data.forEach((patient) => {
    if (patient.agebracket) {
      const age = parseInt(patient.agebracket);
      for (let i = 0; i < 10; i++) {
        if (age > i * 10 && age <= (i + 1) * 10) {
          ages[i]++;
        }
      }
    }
  });

  const chartData = {
    labels: [
      '0-10',
      '11-20',
      '21-30',
      '31-40',
      '41-50',
      '51-60',
      '61-70',
      '71-80',
      '81-90',
      '91-100',
    ],
    datasets: [
      {
        data: ages,
        label: 'Cases',
        backgroundColor: '#bc79c9',
      },
    ],
  };

  const chartOptions = deepmerge(defaultOptions, {
    legend: {
      display: false,
    },
    scales: {
      xAxes: [
        deepmerge(xAxisDefaults, {
          stacked: true,
        }),
      ],
      yAxes: [
        {
          stacked: true,
        },
      ],
    },
    events: ['mousemove', 'mouseout', 'touchstart', 'touchmove', 'touchend'],
    responsive: true,
    maintainAspectRatio: false,
    tooltips: {
      mode: 'index',
    },
  });

  const sampleSize = ages.reduce((a, b) => a + b, 0);

  return (
    <div className="charts-header">
      <div className="chart-title">{props.title}</div>
      <div className="chart-content doughnut">
        <Bar data={chartData} options={chartOptions} />
      </div>
      <div className="chart-note">
        Sample Size: {formatNumber(sampleSize)} patients
      </div>
    </div>
  );
}

Sales = () => {
  // const classes = useStyles();
  const theme = useTheme();

  const data = {
    datasets: [
      {
        backgroundColor: colors.indigo[500],
        data: [18, 5, 19, 27, 29, 19, 20],
        label: 'This year'
      },
      {
        backgroundColor: colors.grey[200],
        data: [11, 20, 12, 29, 30, 25, 13],
        label: 'Last year'
      }
    ],
    labels: ['1 Aug', '2 Aug', '3 Aug', '4 Aug', '5 Aug', '6 Aug']
  };

  const options = {
    animation: false,
    cornerRadius: 20,
    layout: { padding: 0 },
    legend: { display: false },
    maintainAspectRatio: false,
    responsive: true,
    scales: {
      xAxes: [
        {
          barThickness: 12,
          maxBarThickness: 10,
          barPercentage: 0.5,
          categoryPercentage: 0.5,
          ticks: {
            fontColor: theme.palette.text.secondary
          },
          gridLines: {
            display: false,
            drawBorder: false
          }
        }
      ],
      yAxes: [
        {
          ticks: {
            fontColor: theme.palette.text.secondary,
            beginAtZero: true,
            min: 0
          },
          gridLines: {
            borderDash: [2],
            borderDashOffset: [2],
            color: theme.palette.divider,
            drawBorder: false,
            zeroLineBorderDash: [2],
            zeroLineBorderDashOffset: [2],
            zeroLineColor: theme.palette.divider
          }
        }
      ]
    },
    tooltips: {
      backgroundColor: theme.palette.background.default,
      bodyFontColor: theme.palette.text.secondary,
      borderColor: theme.palette.divider,
      borderWidth: 1,
      enabled: true,
      footerFontColor: theme.palette.text.secondary,
      intersect: false,
      mode: 'index',
      titleFontColor: theme.palette.text.primary
    }
  };

  return (
    <Card>
      <CardHeader
        action={(
          <Button
            endIcon={<ArrowDropDownIcon />}
            size="small"
            variant="text"
          >
            Last 7 days
          </Button>
        )}
        title="Latest Sales"
      />
      <Divider />
      <CardContent>
        <Box
          height={400}
          position="relative"
        >
          <Bar
            data={data}
            options={options}
          />
        </Box>
      </CardContent>
      <Divider />
      <Box
        display="flex"
        justifyContent="flex-end"
        p={2}
      >
        <Button
          color="primary"
          endIcon={<ArrowRightIcon />}
          size="small"
          variant="text"
        >
          Overview
        </Button>
      </Box>
    </Card>
  );
}

render() {
        let data = {
            labels: this.state.data.labels,
            datasets: [
                {
                    label: `Bid Amount in ${this.props.box.currency}`,
                    backgroundColor: 'rgba(35, 67, 123, 1)',
                    borderWidth: 1,
                    hoverBackgroundColor: 'rgba(53, 102, 187, 1)',
                    data: this.state.data.bids,
                },
            ],
        };

        return (
            <Modal
                size="lg"
                isOpen={this.props.isOpen}
                toggle={this.props.close}
                className={this.props.className}
            >
                <ModalHeader toggle={this.props.close}>
                    <ReactTooltip/>
                    <span className="fsize-1 text-muted">
                        Bid history of{' '}
                        {friendlyToken(this.props.box.assets[0], false, 5)}.
                        Click on bars to see transaction.
                    </span>
                </ModalHeader>
                <ModalBody>
                    <div>
                        <Bar
                            onElementsClick={(e) => {
                                if (e.length > 0 && e[0]._index !== undefined)
                                    this.showTx(
                                        this.state.data.txIds[e[0]._index]
                                    );
                            }}
                            data={data}
                            width={100}
                            height={50}
                            options={{
                                maintainAspectRatio: true,
                                scales: {
                                    yAxes: [
                                        {
                                            ticks: {
                                                beginAtZero: true,
                                                callback: this.callbackFn,
                                            },
                                        },
                                    ],
                                },
                            }}
                        />
                    </div>

                    <hr/>
                    <ResponsiveContainer height={40}>
                        <div
                            className="mt-1"
                            style={{
                                display: 'flex',
                                justifyContent: 'center',
                            }}
                        >
                            {this.state.remains && !this.state.loading && (
                                <div>
                                    <ReactTooltip
                                        effect="solid"
                                        place="right"
                                    />
                                    <div
                                        data-tip={`load ${maxLoad} more bids`}
                                        id="loadMoreIcn"
                                        style={{
                                            display: 'flex',
                                            justifyContent: 'center',
                                        }}
                                        className="widget-subheading m-1"
                                    >
                                        <span>
                                            Latest{' '}
                                            {this.state.data.txIds.length} Bids
                                            Are Loaded
                                        </span>
                                        <i
                                            onClick={() => {
                                                this.setState({
                                                    loading: true,
                                                });
                                                this.loadBids(
                                                    this.state.nextTx,
                                                    maxLoad
                                                );
                                            }}
                                            style={{
                                                fontSize: '1.5rem',
                                                marginLeft: '5px',
                                            }}
                                            className="pe-7s-plus icon-gradient bg-night-sky"
                                        />
                                    </div>
                                </div>
                            )}
                            {!this.state.remains && (
                                <span>
                                    {this.state.data.txIds.length === 1 && (
                                        <span>All Bids Are Loaded</span>
                                    )}
                                    {this.state.data.txIds.length > 1 && (
                                        <span>
                                            All {this.state.data.txIds.length}{' '}
                                            Bids Are Loaded
                                        </span>
                                    )}
                                </span>
                            )}
                            <br/>
                            <Row>
                                <SyncLoader
                                    css={override}
                                    size={8}
                                    color={'#0086d3'}
                                    loading={this.state.loading}
                                />
                            </Row>
                        </div>
                    </ResponsiveContainer>
                </ModalBody>
            </Modal>
        );
    }