Me and my friend are trying to build an app around completing tasks, like an to-do list. But we also want to add an calendar chart to actually see your consistency. We made the app and so far we are satisfied with how it is turning out. Only one problem, we cant seem to configure the calender chart to like the one in leetcode.

enter image description here

We used the calendar chart from any chart but we dont really like it. We would like the chart to be more like that of leetcode.

Here’s an screenshot of our calendar chart.

https://i.sstatic.net/MgjTEtpB.png

Here’s the code for same. If it is possible to configure the calendar chart from anychart library to be like the leetcode, please tell us how. We are also open to change libraries if there are any. We are using rust, tauri, react, npm and css to configure how the app looks.

import React, { useEffect, useRef } from 'react';
import * as anychart from 'anychart';

const StreaksWatchView = () => {
  const chartContainerRef = useRef(null);

  useEffect(() => {
    if (!chartContainerRef.current) return;

    // Prepare data - Example data for demonstration
    const data = [
      { x: "2023-06-01", value: 1 },
      { x: "2023-06-02", value: 0 },
      // Example:
      { x: "2023-12-25", value: 5 },
      { x: "2023-12-26", value: 3 },
    ];

    // Create the calendar chart
    const chart = anychart.calendar(data);

    // Customize color scale with a gradient
    chart.colorScale({
      ranges: [
        { less: 1, color: '#eeeeee' },
        { from: 1, to: 5, color: '#93c47d' },
        { greater: 5, color: '#63891c' }
      ]
    });

    // Adjust tooltip
    chart.tooltip().format('{%value} submissions');

    // Customize days appearance
    chart.days().spacing(7.5);

    // Customize months appearance
    chart.months().labels().enabled(true).format(function() {
      return anychart.format.date(this.actualFirstDate, 'MMM');
    });
    chart.months().stroke('2 #ffffff');

    // Set container
    chart.container(chartContainerRef.current);
    chart.draw();

    // Cleanup function
    return () => {
      chart.dispose();
    };
  }, []);

  return (
    <div>
      <h1>Streaks Watch View</h1>
      {/* Render the chart container */}
      <div ref={chartContainerRef} style={{ width: '100%', height: '400px' }}></div>
    </div>
  );
}

export default StreaksWatchView;