Skip to main content

Attendance Chart

The Attendance-Chart component provided is a reusable component designed to display attendance data in the form of a bar chart.It is accesible through the TNP Website.

Adding Attendance Chart​

Let's understand how to add the Attendance Bar Chart to the Page

  1. Opening index.tsx of the Attendance-Chart component file in our projects root directory.

  2. Define the AttendanceChart component using the React.FC type. It accepts props of type { data: ChartData<"bar">, title: string }. The data prop represents the chart data, and the title prop represents the chart title.

    index.tsx
    const AttendanceChart: React.FC<{
    data: ChartData<"bar">;
    title: string;
    }> = ({ data, title }) => {
        // Component code goes here
    };

  3. Render the Bar component from Chart.js within the <div> element. Pass the data prop to provide the chart data, and use the optionGenerator function to generate the `chart options based on the title` prop.

    index.tsx
    <Bar data={data} options={optionGenerator(title)} />

  4. Save the file.

  5. Run yarn dev on the terminal to see the changes made in your local environment.

On executing the above steps, the individual attendance bar charts look like this:



We inserted this Attendance Chart in many of our events and other pages of TNP Website. Next we will be seeing on how we integrated the Placements component.