DEV Community: Abdelraman Ahmed

Building Your First Interactive Drill-Down Chart with React and Chart.js

Abdelraman Ahmed — Tue, 08 Jul 2025 15:04:01 +0000

Ever clicked on a chart and wished it would show you more details? Let's build that together!

Hey there! 👋 Today we're going to build something really cool - a chart that actually listens when you click on it. Think of it like those Russian nesting dolls, but for data. Click on the big doll (day view), and boom! You see all the little dolls inside (hourly view).

What Are We Building?

Picture this: You run a pizza shop 🍕 and want to know:

Big Picture: Which days are your busiest?
Zoom In: Click on "Friday" → See exactly what hours people order pizza

It's like having X-ray vision for your data!

Quick question: What would YOU use this for? Gaming stats? Study hours? Netflix binge patterns? Drop a comment - I'm curious!

Part 1: Setting Up React State (Your Chart's Memory)

Let's start simple. Your chart needs to remember two things:

const [selectedDay, setSelectedDay] = useState(null);
const [isDetailView, setIsDetailView] = useState(false);

Think of these like light switches:

selectedDay: Which day did someone click? (null = nobody clicked anything yet)
isDetailView: Are we zoomed in? (true/false)

Let's Play Detective!

What's happening in each scenario?

Scenario A:

selectedDay = null
isDetailView = false

Scenario B:

selectedDay = "Friday"
isDetailView = true

Click for answers!

Scenario A: We're chilling in the main view, showing all days
Scenario B: Someone clicked Friday, so we're showing Friday's hours!

Pro tip: Using two variables instead of one gives you superpowers. Trust me, you'll thank me later when debugging!

Part 2: Organizing Your Data (Making It Chart-Friendly)

Here's the fun part - we need data that works like a filing cabinet:

const chartData = {
  // Top drawer - what everyone sees first
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
  datasets: [{
    data: [20, 35, 40, 25, 55] // Total pizzas per day
  }],

  // Secret drawers - hourly details for each day
  detailData: {
    'Friday': {
      labels: ['10am', '11am', '12pm', '1pm', '2pm', '3pm'],
      datasets: [{
        data: [2, 5, 15, 20, 10, 3] // Pizzas per hour
      }]
    }
  }
};

Quick Math Challenge!

Looking at Friday's data above:

How many pizzas at lunchtime (12pm)?
What's the slowest hour?
Do the hourly numbers add up to 55?

Share your answers below! First correct answer gets a virtual high-five! 🙌

Part 3: Making Your Chart Clickable (The Fun Part!)

Time to bring your chart to life! Chart.js gives us a magic spell called onClick:

onClick: (event, elements) => {
  // Did someone actually click a bar?
  if (elements && elements.length > 0) {
    // Which bar did they click? (0 = first bar, 1 = second, etc.)
    const clickedIndex = elements[0].index;

    // What day is that?
    const clickedDay = chartData.labels[clickedIndex];

    // Time to drill down!
    console.log(`Someone clicked ${clickedDay}!`);
    showDayDetails(clickedDay);
  }
}

How It Works (In Human Language)

You click a bar
Chart.js says "Hey! Someone clicked bar number 3!"
We check: "What's in position 3? Oh, it's Wednesday!"
We show Wednesday's hourly data

Debugging tip: Not working? Add console.logs everywhere! Seriously, it's like leaving breadcrumbs:

console.log('Click detected!');
console.log('Clicked on bar:', clickedIndex);
console.log('That day is:', clickedDay);

Part 4: Smart Data Trimming (No More Ghost Towns)

Here's a real problem: Your pizza shop closes at 3 PM. Why show empty bars until midnight?

Let's build a function that's smarter than that:

const removeEmptyHours = (dayData) => {
  const hourlyData = dayData.datasets[0].data;

  // Start from the end and work backwards
  let lastPizzaTime = -1;
  for (let i = hourlyData.length - 1; i >= 0; i--) {
    if (hourlyData[i] > 0) {
      lastPizzaTime = i;
      break; // Found the last pizza!
    }
  }

  // Chop off the empty hours
  const cutHere = lastPizzaTime + 1;
  return {
    labels: dayData.labels.slice(0, cutHere),
    datasets: [{
      ...dayData.datasets[0],
      data: hourlyData.slice(0, cutHere)
    }]
  };
};

Real Example

Before: [5, 10, 15, 8, 0, 0, 0, 0] (showing until 6 PM)
After: [5, 10, 15, 8] (stops at 1 PM when last pizza was made)

Challenge: How would you modify this to always show at least one empty hour after the last sale? (Hint: Change one number!)

Part 5: Building the Navigation (So Nobody Gets Lost)

Let's add breadcrumbs so users know where they are:

{isDetailView && (
  <div className="navigation">
    <button onClick={goBackToAllDays}>
      ← Back to Week View
    </button>
    <span> › </span>
    <span>{selectedDay}</span>
  </div>
)}

This only shows up when you're in the detailed view. It's like leaving a trail of breadcrumbs in the forest! 🍞

Make It Pretty Challenge

How would you style this? Here's a starter pack:

.navigation {
  padding: 10px;
  background: #f0f0f0;
  border-radius: 5px;
  /* Add your magic here! */
}

Show off your CSS skills in the comments!

Part 6: Putting It All Together (The Grand Finale)

Here's the complete recipe:

const PizzaChart = () => {
  // Our memory banks
  const [selectedDay, setSelectedDay] = useState(null);
  const [isDetailView, setIsDetailView] = useState(false);

  // When someone clicks a day
  const handleDayClick = (day) => {
    if (chartData.detailData[day]) {
      setSelectedDay(day);
      setIsDetailView(true);
      console.log(`Diving into ${day}!`);
    }
  };

  // Going back to main view
  const goBack = () => {
    setIsDetailView(false);
    setSelectedDay(null);
    console.log('Back to the big picture!');
  };

  // Which data to show?
  const getChartData = () => {
    if (isDetailView && selectedDay) {
      // Show hourly data (trimmed)
      return removeEmptyHours(chartData.detailData[selectedDay]);
    }
    // Show weekly overview
    return chartData;
  };

  return (
    <div>
      <h1>Pizza Orders</h1>

      {isDetailView && (
        <button onClick={goBack}>← Back</button>
      )}

      <Bar 
        data={getChartData()}
        options={{
          onClick: (event, elements) => {
            if (!isDetailView && elements.length > 0) {
              const day = chartData.labels[elements[0].index];
              handleDayClick(day);
            }
          }
        }}
      />
    </div>
  );
};

Common Oopsies and How to Fix Them

Oopsie #1: "My clicks don't work!"

Check these things:

Is onClick inside the options object?
Did you forget to check if you're in detail view?
Is your data structure set up correctly?

Add this debug helper:

console.log('Current view:', isDetailView ? 'detail' : 'main');
console.log('Data exists?', !!chartData.detailData);

Oopsie #2: "Wrong data showing up!"

This usually happens when your function uses old state. Always use functions to get current data:

// Bad - might use stale data
const data = isDetailView ? detailData : mainData;

// Good - always fresh!
const getData = () => isDetailView ? detailData : mainData;

Got stuck somewhere? Share your error message - we've all been there!

Level Up Your Chart!

Ready for some bonus features?

1. Smooth Animations

Make your transitions buttery smooth:

animation: {
  duration: 300,
  easing: 'easeInOutQuad'
}

2. Remember Where They Were

Save their view when they refresh:

localStorage.setItem('lastView', selectedDay);

3. Mobile Friendly

Add swipe gestures for touch devices!

4. Color Coding

Make busy hours red and slow hours green!

Your Turn!

I'd love to hear from you:

What part made you go "aha!"?
What would you track with this chart?
Got stuck? What confused you?
Built something cool? Share a screenshot!

Homework Time!

[ ] Build this with your own data (try tracking your coffee consumption!)
[ ] Add one bonus feature
[ ] Help someone in the comments
[ ] Share what you built!

Helpful Links

Chart.js Playground - Try stuff out!
React State Tutorial - If state still confuses you
CodeSandbox - Start coding right now!

Found this helpful? Got questions? Think you found a bug?

Drop a comment! Remember, there are no stupid questions. We're all figuring this out together!

Happy coding! And remember - if your code works on the first try, something's probably wrong. 😄

P.S. - Seriously, share what you build. I love seeing creative uses of this stuff!

Building a RichText Editor with TipTap in React (with Mentions)

Abdelraman Ahmed — Sat, 23 Nov 2024 16:55:30 +0000

If you want to enhance your React app with a powerful, customizable RichText editor, TipTap is an excellent choice. This tutorial will guide you through integrating TipTap into your project and adding a mentions feature for a dynamic user experience.

What You’ll Build

By the end of this tutorial, you’ll have:

A fully functional RichText editor built with TipTap.
Support for mentions triggered by @, complete with dynamic suggestion lists.
Insight into resolving edge cases like placeholder visibility and cursor preservation.

For more on TipTap, visit the official documentation or explore their GitHub repository.

Step 1: Install Dependencies

Before diving in, install the required libraries:

npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-mention

Step 2: Create a Basic RichText Editor

Start by creating a RichTextEditor component. Here’s a simple implementation:

import { useEditor, EditorContent } from '@tiptap/react';  

import StarterKit from '@tiptap/starter-kit';  

export const RichTextEditor = ({ content, onChange }) => {  
  const editor = useEditor({  
    extensions: [StarterKit],  
    content: content,  
    onUpdate: ({ editor }) => {  
      onChange(editor.getHTML());  
    },  
  });  
  return <EditorContent editor={editor} />;  
};

Step 3: Add Mentions

Mentions enhance user interactivity, especially in chat or collaborative applications. To implement them:

Install and Configure the Mention Extension

Modify the RichTextEditor component to include the Mention extension:

import Mention from '@tiptap/extension-mention';  

export const RichTextEditor = ({ content, onChange, mentions }) => {  
  const editor = useEditor({  
    extensions: [  
      StarterKit,  
      Mention.configure({  
        HTMLAttributes: { class: 'mention' },  
        suggestion: {  
          items: ({ query }) =>  
            mentions.filter(item => item.display.toLowerCase().includes(query.toLowerCase())).slice(0, 5),  
          render: () => {  
            let component;  
            let popup;  
            return {  
              onStart: (props) => {  
                popup = document.createElement('div');  
                popup.className = 'mention-popup';  
                document.body.appendChild(popup);  
                component = {  
                  updateProps: () => {  
                    popup.innerHTML = `  
                      <div class="items">  
                        ${props.items.map(item => `  
                          <button class="item ${item.selected ? 'is-selected' : ''}">${item.display}</button>  
                        `).join('')}  
                      </div>  
                    `;  
                  },  
                  destroy: () => popup.remove(),  
                };  
                popup.addEventListener('click', (e) => {  
                  const button = e.target.closest('button');  
                  if (button) {  
                    const index = Array.from(popup.querySelectorAll('.item')).indexOf(button);  
                    props.command({ id: props.items[index].id, label: props.items[index].display });  
                  }  
                });  
                component.updateProps();  
              },  
              onExit: () => component?.destroy(),  
            };  
          },  
        },  
      }),  
    ],  
    content,  
    onUpdate: ({ editor }) => onChange(editor.getHTML()),  
  });  
  return <EditorContent editor={editor} />;  
};

Step 4: Style the Mentions Popup

Mentions should be visually distinct. Add the following styles to enhance usability:

.mention-popup {  
  background: white;  
  border-radius: 8px;  
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);  
  padding: 8px;  
  position: absolute;  
  z-index: 1000;  
}  
.mention-popup .items {  
  display: flex;  
  flex-direction: column;  
}  
.mention-popup .item {  
  padding: 8px;  
  cursor: pointer;  
  border-radius: 4px;  
}  

.mention-popup .item:hover,  
.mention-popup .item.is-selected {  
  background: #f0f0f0;  
}

Step 5: Edge Cases I Faced During Implementation

Cursor Jumping: To avoid cursor jumping while typing, ensure content updates preserve the cursor’s position:

const editor = useEditor({  
  extensions: [StarterKit],  
  content,  
  onUpdate: ({ editor }) => {  
    const selection = editor.state.selection;  
    onChange(editor.getHTML());  
    editor.commands.setTextSelection(selection);  
  },  
});

Placeholder Not Visible:

Use the Placeholder extension to display a hint when the editor is empty:

import Placeholder from '@tiptap/extension-placeholder';  
const editor = useEditor({  
  extensions: [  
    StarterKit,  
    Placeholder.configure({ placeholder: 'Type something...' }),  
  ],  
});

Mention Suggestions Not Showing: Check the suggestion.items method to ensure it filters and returns the expected list.

Step 6: Integrate into Your App

Wrap the editor in a modal or form component to make it part of a larger feature, such as notifications or comments. Here’s an example:

import React from 'react';  

const NotificationForm = ({ mentions, onSubmit }) => {  
  const [content, setContent] = React.useState('');  
  return (  
    <form onSubmit={() => onSubmit(content)}>  
      <RichTextEditor content={content} onChange={setContent} mentions={mentions} />  
      <button type="submit">Send</button>  
    </form> 
  );  
};

Conclusion

With TipTap, you can build a RichText editor that’s both powerful and user-friendly. Adding mentions enhances the interactivity of your app, making it more engaging for users.

For more, visit the official TipTap website. Did you learn something new from this article? Let me know in the comments! 🎉