react-chartjs-2#defaults JavaScript Examples

defaults.global.defaultFontFamily = 'Neucha'

defaults.global.tooltips.enabled = true;

defaults.global.legend.position = 'bottom';

defaults.global.tooltips.enabled = true;

defaults.global.legend.position = 'bottom';

defaults.global.tooltips.enabled = true;

defaults.global.legend.position = 'bottom';

defaults.global = deepmerge(defaults.global, {
  defaultFontFamily: 'Archia',
  elements: {
    line: {
      fill: false,
    },
    point: {
      pointStyle: 'rectRounded',
    },
  },
  tooltips: {
    intersect: false,
    mode: 'nearest',
    position: 'average',
    displayColors: false,
    borderWidth: 0,
    titleSpacing: 4,
    titleMarginBottom: 8,
    bodySpacing: 5,
    cornerRadius: 3,
    xPadding: 6,
    yPadding: 6,
    caretSize: 0,
  },
  legend: {
    display: true,
    position: 'bottom',
    labels: {
      padding: 15,
      usePointStyle: true,
    },
  },
  hover: {
    intersect: false,
  },
  layout: {
    padding: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 20,
    },
  },
});

function DailyConfirmedChart(props) {
  const dates = [];
  const confirmed = [];
  const recovered = [];
  const deceased = [];

  if (!props.timeseries || props.timeseries.length === 0) {
    return <div></div>;
  }

  props.timeseries.forEach((data, index) => {
    if (index >= 31) {
      const date = parse(data.date, 'dd MMMM', new Date(2020, 0, 1));
      dates.push(format(date, 'dd MMM'));
      confirmed.push(data.dailyconfirmed);
      recovered.push(data.dailyrecovered);
      deceased.push(data.dailydeceased);
    }
  });

  const barDataSet = {
    labels: dates,
    datasets: [
      {
        data: recovered,
        label: 'Recovered',
        backgroundColor: '#7ebf80',
      },
      {
        data: deceased,
        label: 'Deceased',
        backgroundColor: '#6c757d',
      },
      {
        data: confirmed,
        label: 'Confirmed',
        backgroundColor: '#ff6862',
      },
    ],
  };

  const options = deepmerge(defaultOptions, {
    tooltips: {
      mode: 'index',
    },
    legend: {
      display: true,
      reverse: true,
      labels: {
        usePointStyle: true, // Required to change pointstyle to 'rectRounded' from 'circle'
        generateLabels: (chart) => {
          const labels = defaults.global.legend.labels.generateLabels(chart);
          labels.forEach((label) => {
            label.pointStyle = 'rectRounded';
          });
          return labels;
        },
      },
    },
    scales: {
      xAxes: [
        deepmerge(xAxisDefaults, {
          stacked: true,
        }),
      ],
      yAxes: [
        deepmerge(yAxisDefaults, {
          stacked: true,
          ticks: {
            callback: (value) => formatNumber(value),
          },
        }),
      ],
    },
  });

  return (
    <div className="charts-header">
      <div className="chart-title">{props.title}</div>
      <div className="chart-content">
        <Bar data={barDataSet} options={options} />
      </div>
    </div>
  );
}

function GrowthTrendChart(props) {
  const dates = [];

  defaults.global.elements.line.fill = false;

  defaults.global.tooltips.intersect = false;
  defaults.global.tooltips.mode = 'nearest';
  defaults.global.tooltips.position = 'average';
  defaults.global.tooltips.backgroundColor = 'rgba(255, 255, 255, 0.6)';
  defaults.global.tooltips.displayColors = false;
  defaults.global.tooltips.borderColor = '#c62828';
  defaults.global.tooltips.borderWidth = 1;
  defaults.global.tooltips.titleFontColor = '#000';
  defaults.global.tooltips.bodyFontColor = '#000';
  defaults.global.tooltips.caretPadding = 4;
  defaults.global.tooltips.intersect = false;
  defaults.global.tooltips.mode = 'nearest';
  defaults.global.tooltips.position = 'nearest';

  defaults.global.legend.display = true;
  defaults.global.legend.position = 'bottom';

  defaults.global.hover.intersect = false;

  if (!props.data || props.data.length === 0) {
    return <div></div>;
  }

  const statesData = new Map();
  const statesDailyData = new Map();

  props.data.forEach((data, index) => {
    if (data.status !== 'Confirmed') {
      return;
    }

    Object.keys(data).forEach((key) => {
      if (key === 'date') {
        const date = parse(data.date, 'dd-MMM-yy', new Date());
        dates.push(date);
      }

      if (key === 'status' || key === 'date') {
        return;
      }

      const currentValue = data[key] !== '' ? parseInt(data[key]) : 0;

      if (currentValue === 0 && !statesData.has(key)) {
        return;
      }

      if (!statesData.has(key)) {
        statesData.set(key, []);
        statesDailyData.set(key, []);
      }
      const previousValue =
        statesData.get(key).length > 0
          ? parseInt(statesData.get(key)[statesData.get(key).length - 1].x)
          : 0;

      const stateData = statesDailyData.get(key);
      let weekSum = 0;
      for (let i = 1; i <= 7; ++i) {
        const idx = stateData.length - i;
        if (idx >= 0) {
          weekSum += stateData[idx];
        }
      }
      statesData.get(key).push({x: previousValue + currentValue, y: weekSum});
      statesDailyData.get(key).push(currentValue);
    });
  });

  const sortedMap = new Map(
    [...statesData.entries()].sort((a, b) => {
      return a[1][a[1].length - 1].x < b[1][b[1].length - 1].x ? 1 : -1;
    })
  );

  const colors = [
    '#ff073a',
    '#28a745',
    '#342ead',
    '#7D5BA6',
    '#DD7596',
    '#16c8f0',
    '#f67575',
    '#2b580c',
    '#9D44B5',
    '#91132d',
    '#6D9DC5',
    '#2b580c',
    '#6c757d',
    '#f67575',
    '#d4f8e8',
  ];

  let index = 0;
  const datasets = [];
  sortedMap.forEach((data, key) => {
    if (key === 'tt') {
      return;
    }

    if (index >= 10) {
      return;
    }

    datasets.push({
      data: statesData.get(key),
      label: getStateName(key),
      order: index,
      borderWidth: 1.0,
      borderCapStyle: 'round',
      borderColor: colors[index],
      pointBackgroundColor: colors[index],
      pointHoverRadius: 1.0,
    });

    index++;
  });

  const dataset = {
    datasets: datasets,
  };

  const options = {
    responsive: true,
    events: ['click', 'mousemove', 'mouseout', 'touchstart', 'touchmove'],
    maintainAspectRatio: false,
    tooltips: {
      mode: 'index',
      backgroundColor: 'rgba(0, 0, 0, 0.9)',
      borderColor: 'rgba(0, 0, 0, 0)',
      bodyFontColor: 'white',
      titleFontColor: 'white',
      displayColors: true,
    },
    elements: {
      point: {
        radius: 0,
      },
      line: {
        cubicInterpolationMode: 'monotone',
      },
    },
    layout: {
      padding: {
        left: 20,
        right: 20,
        top: 0,
        bottom: 20,
      },
    },
    scales: {
      yAxes: [
        {
          type: 'logarithmic',
          ticks: {
            beginAtZero: true,
            min: 1,
            max: 2000,
            precision: 0,
            callback: function (value, index, values) {
              return Number(value.toString());
            },
          },
          scaleLabel: {
            display: true,
            labelString: 'New Cases (since last 7 days)',
          },
          gridLines: {
            color: 'rgba(0, 0, 0, 0)',
          },
        },
      ],
      xAxes: [
        {
          type: 'logarithmic',
          ticks: {
            beginAtZero: true,
            min: 0,
            max: 2000,
            precision: 0,
            callback: function (value, index, values) {
              return Number(value.toString());
            },
          },
          scaleLabel: {
            display: true,
            labelString: 'Total Cases',
          },
          gridLines: {
            color: 'rgba(0, 0, 0, 0)',
          },
        },
      ],
    },
  };

  return (
    <div className="charts-header">
      <div className="chart-title">{props.title}</div>
      <div className="chart-content">
        <Line data={dataset} options={options} />
      </div>
    </div>
  );
}

function StateChart(props) {
  defaults.global.tooltips.intersect = false;
  defaults.global.tooltips.mode = 'nearest';
  defaults.global.tooltips.position = 'average';
  defaults.global.tooltips.backgroundColor = 'rgba(255, 255, 255, 0.8)';
  defaults.global.tooltips.displayColors = false;
  defaults.global.tooltips.borderColor = '#c62828';
  defaults.global.tooltips.borderWidth = 1;
  defaults.global.tooltips.titleFontColor = '#000';
  defaults.global.tooltips.bodyFontColor = '#000';
  defaults.global.tooltips.caretPadding = 4;
  defaults.global.tooltips.intersect = false;
  defaults.global.tooltips.mode = 'nearest';
  defaults.global.tooltips.position = 'nearest';

  defaults.global.legend.display = true;
  defaults.global.legend.position = 'bottom';

  defaults.global.hover.intersect = false;

  const stateNames = [];
  const stateCases = [];
  let otherStateCases = 0;
  if (!props.data || props.data.length === 0) {
    return <div></div>;
  }

  props.data.forEach((state, index) => {
    if (index === 0 || state.confirmed <= 0) {
      return;
    }
    if (index <= 15) {
      stateNames.push(state.state);
      stateCases.push(state.confirmed);
    } else {
      otherStateCases += parseInt(state.confirmed);
    }
  });

  stateNames.push('Others');
  stateCases.push(otherStateCases);

  const chartData = {
    datasets: [
      {
        data: stateCases,
        backgroundColor: [
          '#ff7272',
          '#ffb385',
          '#fae7cb',
          '#ffd31d',
          '#00a8cc',
          '#005082',
          '#000839',
          '#ffa41b',
          '#f1e7b6',
          '#400082',
          '#fe346e',
          '#5a3f11',
          '#9c5518',
          '#f67575',
          '#d4f8e8',
          '#1eb2a6',
        ],
      },
    ],
    labels: stateNames,
  };

  const chartOptions = {
    events: ['mousemove', 'mouseout', 'touchstart', 'touchmove', 'touchend'],
    layout: {
      padding: {
        left: 20,
        right: 20,
        top: 0,
        bottom: 20,
      },
    },
    legend: {
      display: false,
    },
    responsive: true,
    maintainAspectRatio: false,
    tooltips: {
      callbacks: {
        label: function (tooltipItem, data) {
          const dataset = data.datasets[tooltipItem.datasetIndex];
          const meta = dataset._meta[Object.keys(dataset._meta)[0]];
          const total = meta.total;
          const currentValue = dataset.data[tooltipItem.index];
          const percentage = parseFloat(
            ((currentValue / total) * 100).toFixed(1)
          );
          return currentValue + ' (' + percentage + '%)';
        },
        title: function (tooltipItem, data) {
          return data.labels[tooltipItem[0].index];
        },
      },
    },
  };

  return (
    <div className="charts-header">
      <div className="chart-title">{props.title}</div>
      <div className="chart-content doughnut">
        <Doughnut data={chartData} options={chartOptions} />
      </div>
    </div>
  );
}

Charts = ({ data: { cases, recovered, deaths }, country }) => {
  defaults.global.tooltips.intersect = false;
  defaults.global.tooltips.mode = "nearest";
  defaults.global.tooltips.position = "average";
  defaults.global.tooltips.backgroundColor = "rgba(255, 255, 255, 0.8)";
  defaults.global.tooltips.displayColors = false;
  defaults.global.tooltips.borderColor = "#c62828";
  defaults.global.tooltips.borderWidth = 1;
  defaults.global.tooltips.titleFontColor = "#000";
  defaults.global.tooltips.bodyFontColor = "#000";
  defaults.global.tooltips.caretPadding = 4;
  defaults.global.tooltips.intersect = false;
  defaults.global.tooltips.mode = "nearest";
  defaults.global.tooltips.position = "nearest";

  defaults.global.legend.display = true;
  defaults.global.legend.position = "bottom";

  defaults.global.hover.intersect = false;

  const chartOptions = {
    animation: {
      steps: 50,
      scale: false,
    },
    responsive: true,
    events: ["click", "mousemove", "mouseout", "touchstart", "touchmove"],
    maintainAspectRatio: false,
    tooltips: {
      mode: "index",
    },
    elements: {
      point: {
        radius: 0,
      },
      line: {
        tension: 0,
      },
    },
    layout: {
      padding: {
        left: 20,
        right: 20,
        top: 0,
        bottom: 20,
      },
    },
    title: {
      display: true,
      text: `Current state in ${country ? country : `the World`}`,
    },
    scales: {
      yAxes: [
        {
          type: "linear",
          ticks: {
            callback: function (label, index, labels) {
              return label / 1000 + "K";
            },
          },
          scaleLabel: {
            display: false,
            labelString: "1K = 1000",
          },
        },
      ],
      xAxes: [
        {
          type: "time",
          time: {
            unit: "day",
            tooltipFormat: "MMM DD",
            stepSize: 7,
            displayFormats: {
              millisecond: "MMM DD",
              second: "MMM DD",
              minute: "MMM DD",
              hour: "MMM DD",
              day: "MMM DD",
              week: "MMM DD",
              month: "MMM DD",
              quarter: "MMM DD",
              year: "MMM DD",
            },
          },
          gridLines: {
            color: "rgba(0, 0, 0, 0)",
          },
        },
      ],
    },
  };

  const months = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec",
  ];

  const lineChart =
    cases && recovered && deaths ? (
      <React.Fragment>
        <Line
          data={{
            labels: [
              ...Object.keys(cases).map((item) => {
                return `${new Date(item).getDate()} ${
                  months[new Date(item).getMonth()]
                }`;
              }),
            ],
            datasets: [
              {
                data: Object.values(cases),
                label: "Infected",
                borderColor: "#2186b4",
                backgroundColor: "#d9ecf5",
                fill: true,
              },
              {
                data: Object.values(recovered),
                label: "Recovered",
                borderColor: "#24aa24",
                backgroundColor: "#c3e0c3",
                fill: true,
              },
              {
                data: Object.values(deaths),
                label: "Deceased",
                borderColor: "red",
                backgroundColor: "rgba(255, 0, 0, 0.5)",
                fill: true,
              },
            ],
          }}
          options={chartOptions}
        />
      </React.Fragment>
    ) : null;

  return (
    <div className={`${styles.container} fadeInUp`}>
      {lineChart}
      <div className="w-100"></div>
      <h6 style={{ fontSize: 10 }}>
        Quick Tip: Click on the legends to remove their plot.
      </h6>
    </div>
  );
}