Forem: Manoj Mohan

Understanding Resize Observer in Modern Web Development

Manoj Mohan — Fri, 03 Apr 2026 19:27:33 +0000

Modern frontend development has outgrown viewport-centric thinking. While media queries and window.resize events were sufficient in the era of page-level layouts, they fall short in today’s world of componentized, nested, and highly dynamic interfaces. Components no longer live in predictable containers—they expand, shrink, and reflow based on surrounding context.

The Resize Observer API addresses this gap by enabling developers to react to element-level size changes in a performant and standardized way. This article explores not just how to use it, but why it exists, how it fits into the rendering model, and where it belongs in a mature frontend architecture.

The Architectural Gap: Life Before Resize Observer

Historically, detecting size changes of an element required indirect or inefficient strategies:

Viewport-bound signals (window.resize)
Only useful when the browser window changes—not when a sidebar collapses or content loads dynamically.
Polling strategies
Using setInterval or requestAnimationFrame to repeatedly measure layout (getBoundingClientRect) introduces unnecessary CPU overhead and risks layout thrashing.
Mutation-driven inference
MutationObserver can detect DOM changes, but not layout changes. Inferring size from DOM mutations is unreliable and semantically incorrect.
Manual coupling to layout logic
Developers often encoded assumptions about parent sizes, leading to brittle systems.

These approaches fundamentally fail in component-driven systems, where a component’s size is influenced by factors outside its control.

Why Resize Observer Was Introduced

Resize Observer is not just a convenience API rather it's a response to systemic shifts in how we build interfaces:

1. Component Encapsulation

Modern frameworks encourage isolation. Components should respond to their own rendering context, not global state.

2. Fluid Layout Systems

CSS Grid and Flexbox create layouts where element dimensions are often determined by content or sibling behavior. Resize Observer allows JavaScript to stay in sync with these fluid CSS changes.

3. Performance Constraints

Repeated synchronous layout reads are expensive. The platform needed a way to observe size changes without forcing reflows.

4. Standardization

Before Resize Observer, every serious UI library implemented its own workaround. A native solution eliminates inconsistency.

The Resize Observer API: Core Concepts

At its core, Resize Observer provides a mechanism to subscribe to changes in an element’s box dimensions.

Key Interfaces

ResizeObserver
The observer instance that tracks one or more elements.
ResizeObserverEntry
Delivered to the callback, containing size information about observed elements.

Observed Box Types

content-box (default)
Measures the content area (excluding padding and border).
border-box
Includes padding and border—often more aligned with layout calculations.
device-pixel-content-box
Provides higher precision for rendering contexts like canvas (limited support).

Usage: Minimal but Powerful

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const width = entry.contentBoxSize[0].inlineSize;
    const height = entry.contentBoxSize[0].blockSize;
    console.log(`Width: ${size.width}, Height: ${size.height}`);
  }
});

observer.observe(document.querySelector('.container'));

Cleanup

observer.disconnect();

In long-lived applications, proper teardown is essential to avoid memory leaks.

Under the Hood: How Browsers Deliver Resize Signals

Understanding the delivery model is key to using Resize Observer correctly.

Observation Phase

The browser tracks elements marked for observation during layout calculations.
Batching

Size changes are collected and queued. Multiple changes across the frame are grouped.
Asynchronous Delivery

Callbacks are invoked after layout, but before paint completion in most implementations.

Loop Detection

If your callback triggers further size changes, the browser may detect a resize loop and halt execution with a warning.

Some of Practical Use Case

Container-Aware Components

Adapt behavior based on container size instead of viewport.
Auto-Sizing Layouts

Dynamic grids, cards, and panels specially in the current era of flexbox and grid.
Virtualized Interfaces

Efficient recalculation of visible regions.

Performance Considerations in Real World Scenario

Use requestAnimationFrame to keep callback light and realistic

const observer = new ResizeObserver((entries) => {
  requestAnimationFrame(() => {
    // heavier work here
  });
});

2. If your resize logic is purely visual (e.g., changing a background color or hiding a button), use CSS Container Queries (@container). Reserve ResizeObserver for logic that requires JavaScript.

Final Thoughts

Resize Observer marks the transition from "responsive pages" to "responsive components". By moving away from the viewport and focusing on the element, we can build UIs that are more modular, more performant, and significantly more resilient.

Browser Support & Compatibility

Chrome: 64+ (Released Jan 2018)
Firefox: 69+ (Released Sept 2019)
Safari: 13.1+ (Released Mar 2020)
Edge (Chromium-based): 79+ ( Released Jan 2020)

Adding a Custom Context Menu to CanvasJS Charts on Right-Click

Manoj Mohan — Wed, 05 Nov 2025 10:56:38 +0000

CanvasJS enables interactive charts for web apps. Adding a custom context menu on right-click allows quick actions like printing or exporting. In this guide, we'll implement one using a monthly sales column chart demo. It's straightforward and customizable.

Why Add a Custom Context Menu?

Context menus boost UX by providing an intuitive, native feel, right-clicking works just like in desktop apps. They also promote efficiency by hiding advanced features until needed, which keeps your charts looking clean and uncluttered. Plus, they're highly flexible, letting you extend them for things like exports, data tweaks, or even dynamic annotations without complicating the interface.

Prerequisites

To follow along, you'll need a basic grasp of HTML, CSS, and JavaScript, along with the CanvasJS Chart library.

Step 1: Set Up the Basic Chart

To demonstrate, we'll use a basic multi-series column chart for monthly sales. Embed the library and container first:

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<div id="chartContainer"></div>

Briefly initialize chart with shared tooltips. Add a callback to hide tooltips during menu use (to prevent overlap).

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  theme: "light2",
  title: { text: "Monthly Sales Comparison (Electronics vs Home Appliances)", fontSize: 20 },
  subtitles: [{ text: "Right click to get the custom context menu" }],
  axisX: { title: "Months", titleFontColor: "#333", labelFontColor: "#555", labelFontSize: 14 },
  axisY: { title: "Sales", labelFontSize: 14, prefix: "$", includeZero: true },
  toolTip: {
    shared: true,
    updated: function(e) {
      if (contextMenu && contextMenu.style.display === "block") {
        chart.toolTip.hide();
      }
    }
  },
  data: [ /* data array */ ]
});
chart.render();

Step 2: Create the Context Menu HTML

The foundation of the menu is a hidden overlay dropdown placed immediately following the chart container. For accessibility, it must be structured as a semantic HTML list (<ul> with <li> elements), each containing an interactive element (<a>). The data-exportType attributes are essential, serving as JavaScript hooks to route specific actions:

"print": Triggers the chart's native print method.
"png" / "jpg": Defines the desired image export format.
"cancel": Simply dismisses the dropdown.

This modular approach ensures that adding new export options (such as "pdf") is a straightforward task.

<div id="contextMenu">
  <ul role="list">
    <li role="listitem">
      <button data-exportType="print">Print</button>
    </li>
    <li role="listitem">
      <button data-exportType="png">Save as PNG</button>
    </li>
    <li role="listitem">
      <button data-exportType="jpg">Save as JPG</button>
    </li>
    <li role="listitem" class="seperator">
      <button data-exportType="cancel">Cancel</button>
    </li>
  </ul>
</div>

Step 4: Handle Events with JavaScript

Event handling brings the menu to life. First, cache DOM elements: the chart's container (retrieved via the CanvasJS chart.get("container") method for direct access to the DOM element, which is more reliable than querying by ID), the menu for toggling, and buttons via querySelectorAll for efficiency. This avoids repeated lookups during interactions and ties the logic closely to the chart instance.

var chartDiv = chart.get("container");
var contextMenu = document.getElementById("contextMenu");
var exportButtons = contextMenu.querySelectorAll("button[data-exportType]");

To implement the export mechanism, we must iterate through the available buttons using a for loop, attaching an event listener to each. Within the handler, the button's data-exportType attribute must be extracted to execute the appropriate function. Specifically, invoking the 'print' type should trigger a print preview via chart.print(). Conversely, the 'PNG' and 'JPG' types must utilize chart.exportChart({ format: '...' }) to initiate a direct file download. To ensure a seamless user experience, the export menu must be hidden immediately after the action, maintaining consistent dismissal even if the user cancels. This standardized protocol also enhances the scalability for integrating new export formats.

for (let i = 0; i < exportButtons.length; i++) {
  var button = exportButtons[i];
  button.addEventListener("click", function() {
    var exportType = this.getAttribute("data-exportType");
    if (exportType === "print") {
      chart.print();
    } else if (exportType === "png") {
      chart.exportChart({ format: "png" });
    } else if (exportType === "jpg") {
      chart.exportChart({ format: "jpg" });
    }
    contextMenu.style.display = "none";
  });
}

The core trigger is a contextmenu listener on the chart's container div. preventDefault() blocks the browser's native menu, then set the menu's left and top to the event's pageX/pageY for cursor-following precision. Show it with display: block and hide tooltips via the chart API.

chartDiv.addEventListener("contextmenu", function(event) {
  event.preventDefault();
  contextMenu.style.left = event.pageX + "px";
  contextMenu.style.top = event.pageY + "px";
  contextMenu.style.display = "block";
  chart.toolTip.hide();
})

To close on outside clicks, attach a document-level listener—any click bubbles up and hides the menu, unless it's on a button (handled separately). This creates intuitive, escape-hatch behavior.

document.addEventListener("click", function() {
  contextMenu.style.display = "none";
});

Full Working Demo

Customization Tips

You can further enhance this approach by adding dynamic annotations — capturing click coordinates on the chart, prompting the user for annotation text, and pushing the resulting note into an annotations array followed by chart.render() for instant visual updates. This makes your charts more interactive and allows users to leave contextual notes or insights directly within the visualization.

This approach gives developers complete control over user interactions, enabling chart-specific actions such as exporting, filtering, or drilling down on data. It’s lightweight, dependency-free, and easily adaptable to multiple charts or dynamic datasets.

Creating a Comparison (Year over Year) Chart for Daily Data Across Two Years Using CanvasJS

Manoj Mohan — Tue, 10 Jun 2025 11:26:23 +0000

In today's data-driven world, businesses and analysts often need to compare daily performance metrics across years to uncover trends, evaluate growth, or identify anomalies. Whether you're tracking sales, website traffic, or environmental data, a well-crafted chart can make these insights accessible and actionable. This blog walks through creating a comparison chart using CanvasJS to display daily data for a specific month (e.g., March) across two years (2024 and 2025). We'll use xValue for accurate date-time storage, label for clean day displays, and a custom contentFormatter to enhance tooltips with dates and percentage changes, making the chart both functional and user-friendly.

Setting Up CanvasJS

Start by adding CanvasJS to your project via its CDN for a quick setup. Create an HTML file with a chart container

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daily Data Comparison Chart</title>
    <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
  </head>
  <body>
    <div id="chartContainer" style="height: 400px; width: 100%;"></div>
    <script>
      // JavaScript code will go here
    </script>
  </body>
</html>

Preparing Your Data

In practice, you'd likely pull data from a database, API, or CSV—say, daily sales from a retail system or website hits from analytics. Here, we'll simulate daily sales for March 2024 and 2025 to keep things grounded. Each data point starts with an x (JavaScript Date object) and y (the metric), then gets mapped to include a label (day of the month) and xValue (full date for tooltips).

var march2024Dps = [
  { "x": new Date(2024, 2, 1), "y": 1177 },
  { "x": new Date(2024, 2, 2), "y": 1192 },
  { "x": new Date(2024, 2, 3), "y": 1042 }
  .
  { "x": new Date(2024, 2, 31), "y": 1106 }
];
var march2025Dps =[
  { "x": new Date(2025, 2, 1), "y": 1123 },
  { "x": new Date(2025, 2, 2), "y": 959 },
  { "x": new Date(2025, 2, 3), "y": 1032 },
  .
  { "x": new Date(2025, 2, 31), "y": 1209 }
];

// Transform data for chart
march2024Dps = march2024Dps.map(dp => ({
    label: CanvasJS.formatDate(dp.x, "D"), // Day (1-31)
    y: dp.y,
    xValue: dp.x
}));
march2025Dps = march2025Dps.map(dp => ({
    label: CanvasJS.formatDate(dp.x, "D"),
    y: dp.y,
    xValue: dp.x
}));

Building the Chart

To visualize daily sales trends for March 2024 and 2025, we'll build a spline chart with CanvasJS, ideal for tracking changes over time with smooth, continuous lines. The chart displays days (1-31) on the primary x-axis for 2025, while 2024 uses a hidden secondary x-axis to handle differing label and x values, ensuring alignment without visual clutter. A custom contentFormatter enriches tooltips with full dates (DD MMMM), sales values, and year-over-year percentage changes, color-coded green for increases and red for decreases. This setup, paired with two data series formatted with label and xValue, ensures a clear, interactive comparison that highlights trends and differences effectively.

...
axisX2: {
  lineThickness: 0,
  labelFormatter: () => "",
  tickLength: 0,
  margin: 0
},
data: [{
  type: "spline",
  name: "2025",
  showInLegend: true,
  color: "#343A40",
  dataPoints: march2025Dps
},{
  type: "spline",
  name: "2024",
  showInLegend: true,
  lineDashType: "longDash",
  axisXType: "secondary",
  color: "#17A2B8",
  dataPoints: march2024Dps
}]
...

See It in Action

To better understand how everything ties together, explore the live demo below. The chart is fully interactive—hover over the lines to compare daily values between 2024 and 2025, view percentage changes, and see how the tooltip formatting enhances readability.

Conclusion

CanvasJS makes it easy to craft an interactive chart for year-over-year daily data, perfect for tracking sales, engagement, or other metrics. By using xValue for date precision, label for a clean axis, a hidden secondary x-axis for data alignment, and a custom contentFormatter for rich tooltips, this chart is both practical and powerful. Its flexibility lets you scale to more months or datasets, making it a go-to for data-driven decisions.

Coordinating Tooltips Across Multiple CanvasJS Charts Using React Context

Manoj Mohan — Mon, 19 May 2025 10:34:35 +0000

Analyzing related data points across multiple charts simultaneously significantly enhances the user's ability to identify trends, correlations, and anomalies. A powerful way to achieve this in a web application is by synchronizing the tooltips displayed on these charts. This ensures that as a user interacts with one chart, relevant data for the same point (typically based on the x-axis value) is highlighted across all linked charts.

This article outlines a concise and effective solution for coordinating tooltips in CanvasJS Charts rendered within a React application, even when these charts are defined in separate component files. The core of this approach lies in leveraging the showAtX method provided by the CanvasJS API and managing the shared tooltip state using React Context.

Prerequisites

React with hooks, JavaScript (ES6+).
@canvasjs/react-charts

Approach

React Context: Centralizes chart refs and tooltip handlers.
Dynamic Refs: Tracks chart instances across files.
showAtX Method: Aligns tooltips at shared x-values.
Layout: CSS Grid places two charts side-by-side, one below.

Implementation Overview

To easily keep tooltips in sync across charts, even when they're in separate files for modularity, we use a central ChartProvider for the shared logic. Given all charts share the 12-month x-axis (x: 1–12), interacting with a data point on one instantly brings up the corresponding tooltips across the others.

Chart Context and Synchronization Mechanism

The ChartContext centralizes chart instance management and tooltip coordination.

ChartContext.js

Context: createContext() enables sharing refs and handlers.
Refs: useRef([]) stores chart instances, indexed by index prop.
Registration: registerChart(index, ref) assigns chart instances to chartRefs.current[index].
Handlers:
- handleTooltipUpdated(e, currentChartIndex): Extracts x-value (e.entries[0]?.dataPoint?.x) and calls showAtX(xValue) on all charts except the source.
- handleTooltipHidden(currentChartIndex): Clears tooltips on other charts via toolTip.hide().

The ChartProvider wraps chart components, exposing these functions.

Synchronization Process

Trigger: Hovering a data point (e.g., x: 3, March) fires toolTip.updated, invoking handleTooltipUpdated.
Propagation: The x-value is shared, triggering showAtX on other charts to show tooltips at the same x-value.
Hiding: toolTip.hidden calls handleTooltipHidden, clearing tooltips on other charts.
Cross-File Coordination: Context ensures all charts, defined in separate files, access shared refs and handlers.

The showAtX method aligns tooltips precisely, assuming identical x-axis scales (x: 1–12).

The complete implementation is available below in the embedded code sample. Dive into the code for the ChartContext, the ChartProvider handling chart instance registration and event logic, and the individual chart component consuming the context. This pattern serves as a clear blueprint for building similar interactive multi-chart dashboards.

Conclusion

In summary, we've established a robust method for synchronizing tooltips across multiple CanvasJS Charts, even when defined in separate React components. This is achieved by leveraging React Context for centralized state management and sharing core synchronization handlers, paired with the CanvasJS toolTip.showAtX() method for programmatic tooltip control based on a common x-value. This pattern enables seamless, simultaneous data point analysis across linked chart views.

Enhancing Sales Data Visualization: Advanced Interactivity with CanvasJS and React Table

Manoj Mohan — Fri, 28 Mar 2025 10:42:14 +0000

This article builds upon the foundation laid in my previous piece, "Visualizing Sales Data with CanvasJS and React Table", where we explored the basics of setting up a sales dashboard using @tanstack/react-table for tabular data and @canvasjs/react-charts for graphical representation. In that article, we focused on rendering sales data effectively in both table and chart formats. Now, we'll take it a step further by diving into advanced interactive features—row highlighting in tables and dynamic tooltips in charts—to create a more engaging and user-friendly experience. These enhancements will help users better navigate and analyze sales data, making the dashboard not just a display tool but an interactive exploration platform.

Why Interactivity Matters

Interactivity is a cornerstone of modern data visualization, particularly in sales dashboards where users need to quickly pinpoint trends, outliers, or specific data points. Features like row highlighting and interactive tooltips provide visual cues and additional context, making the data more accessible without overwhelming the user. In this continuation, we’ll enhance our previous dashboard by implementing these features using @tanstack/react-table and @canvasjs/react-charts, seamlessly integrating them to elevate the user experience.

Highlighting Rows in @tanstack/react-table

A simple yet powerful way to improve table usability is to highlight rows when users hover over them. This visual feedback helps users track data across columns more easily. We will use the hoveredRowIndex state to highlight rows dynamically when a user hovers over them. The useState hook is used to track the currently hovered row index. When the mouse enters a row, the onMouseEnter event updates the state, changing the row's background color. When the mouse leaves, the onMouseLeave event resets the state, restoring the default background. The smooth transition effect ensures a seamless user experience.

...
<tr
  key={row.id}
  onMouseEnter={() => handleRowHover(index)}
  onMouseLeave={handleRowLeave}
  style={{
    backgroundColor: hoveredRowIndex === index ? '#E8EAF6' : 'white',
    transition: 'background-color 0.3s',
    cursor: 'pointer',
  }}
  >
  {row.getVisibleCells().map((cell) => (
  <td
    key={cell.id}
    style={{
      padding: '12px',
      borderBottom: '1px solid #dee2e6',
    }}
  >
    {flexRender(cell.column.columnDef.cell, cell.getContext())}
  </td>
  ))}
</tr>
...

Adding Interactivity to @canvasjs/react-charts

CanvasJS charts include built-in interactivity, such as tooltips that appear on hover to display detailed information about data points. To synchronize the chart with the table, we can programmatically control tooltips using CanvasJS methods like showAtX on hovering over table rows. Additionally, to highlight a row in the React table, we can leverage the shown and hidden events of CanvasJS, which are triggered whenever a tooltip is displayed or hidden, ensuring seamless interaction between the chart and the table.

...
toolTip: {
  updated: handleTooltipShown,
  hidden: handleTooltipHidden,
}

const handleTooltipShown = (e) => {
  if (e.entries && e.entries.length > 0) {
    const index = e.entries[0].dataPointIndex;
    handleRowHover(index, e.chart);
  }
};

const handleTooltipHidden = () => {
  handleRowLeave();
};

const handleRowHover = (index, chart = null) => {
  setHoveredRowIndex(index);
  if (chart) {
    if (revenueChart === chart)
      salesChart.toolTip.showAtX(revenueChart.data[0].dataPoints[index].x);
    else {
      revenueChart.toolTip.showAtX(revenueChart.data[0].dataPoints[index].x);
    }
  } else {
    revenueChart.toolTip.showAtX(revenueChart.data[0].dataPoints[index].x);
    salesChart.toolTip.showAtX(revenueChart.data[0].dataPoints[index].x);
  }
};
...

Conclusion

In this continuation, we've transformed our basic sales dashboard into an interactive powerhouse by adding row highlighting in @tanstack/react-table and dynamic tooltips in @canvasjs/react-charts. These features make it easier for users to explore and interpret sales data, enhancing both usability and engagement. By synchronizing the table and chart, we’ve created a seamless experience that invites deeper analysis. I encourage you to take these ideas and experiment with them in your own projects—interactivity is the key to unlocking the full potential of your data visualizations!

Visualizing Sales Data with CanvasJS and React-Table

Manoj Mohan — Fri, 14 Mar 2025 12:43:45 +0000

In today's data-driven world, combining tabular data presentations with visualizations is crucial for effective analysis. This guide demonstrates how to use Tanstack React-Table for data management and CanvasJS for visualization, creating a cohesive dashboard that tells a complete data story.

Why This Combination?

React Table: Robust table management with sorting/filtering capabilities
CanvasJS: Rich interactive charting library

Prerequisites

To follow along, ensure you have the following dependencies installed in your React project:

@tanstack/react-table
@canvasjs/react-charts

Step-by-Step Explanation

Import required packages

import React from 'react';
import {
  createColumnHelper,
  useReactTable,
  getCoreRowModel,
  flexRender,
} from '@tanstack/react-table';
import CanvasJSReact from '@canvasjs/react-charts';

const CanvasJSChart = CanvasJSReact.CanvasJSChart;

2. Sample Data
The sample data is structured as an array of objects. Each object represents a product with its name and quarterly sales figures. For example:

const data = [
  {
    product: 'Product A',
    'Quarter 1': 500,
    'Quarter 2': 600,
    'Quarter 3': 700,
    'Quarter 4': 750,
  },
  // ... other products
];

3. Defining Table Columns:
In any table-based application, defining the structure of the table is a foundational step. In our example, we use the @tanstack/react-table library to manage our sales data, and the column definitions determine how that data is organized and displayed.

const columnHelper = createColumnHelper();
const columns = [
  columnHelper.accessor('product', {
    header: 'Product',
  }),
  columnHelper.accessor('Quarter 1', {
    header: 'Sales Q1 (Units)',
  }),
  columnHelper.accessor('Quarter 2', {
    header: 'Sales Q2 (Units)',
  }),
  columnHelper.accessor('Quarter 3', {
    header: 'Sales Q3 (Units)',
  }),
  columnHelper.accessor('Quarter 4', {
    header: 'Sales Q4 (Units)',
  }),
];

4. Initializing the Table
Once we've defined our data and column structure, the next step is to bring the table to life. This is where @tanstack/react-table shines, providing a powerful yet flexible way to manage table state and behavior. In our example, we initialize the table inside the App component using the useReactTable hook.

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
});

5. Generating Data for Chart
To bring our sales data to life in a visual format, we need to transform the table data into a structure that CanvasJS can understand. The generateChartData function handles this crucial step, converting the table's row data into multi-series chart data:

const generateChartData = () => {
  return table.getRowModel().rows.map((row) => {
    const product = row.getValue("product");
    return {
      type: 'column',
      name: product,
      showInLegend: true,
      dataPoints: [
        { label: 'Quarter 1', y: row.getValue('Quarter 1') },
        { label: 'Quarter 2', y: row.getValue('Quarter 2') },
        { label: 'Quarter 3', y: row.getValue('Quarter 3') },
        { label: 'Quarter 4', y: row.getValue('Quarter 4') },
      ],
    };
  });
};

6. Configuring the Chart
To display our sales data effectively, we need to configure the CanvasJS chart with options that define its appearance and behavior. The options object sets up the chart's title, axes, and data, bringing the multi-series visualization to life.

const options = {
  title: {
    text: 'Comparing Sales',
  },
  theme: "light2",
  axisY: {
    title: 'Quantity',
  },
  toolTip: {
    shared: true
  },
  axisY2: {
    title: 'Price',
    valueFormatString: '#0.00',
  },
  data: generateChartData(),
};

7. Rendering the Table
With our table initialized, it’s time to display the sales data visually. The rendering step uses the table instance from @tanstack/react-table to create an HTML table, showing product names and quarterly sales in a structured format.

<table style={{ borderCollapse: 'collapse', marginBottom: '20px' }}>
  <thead>
    {table.getHeaderGroups().map((headerGroup) => (
      <tr key={headerGroup.id}>
        {headerGroup.headers.map((header) => (
          <th
            key={header.id}
            style={{ border: '1px solid black', padding: '8px' }}
          >
            {header.isPlaceholder
              ? null
              : flexRender(
                  header.column.columnDef.header,
                  header.getContext()
                )}
          </th>
        ))}
      </tr>
    ))}
  </thead>
  <tbody>
    {table.getRowModel().rows.map((row) => (
      <tr key={row.id}>
        {row.getVisibleCells().map((cell) => (
          <td
            key={cell.id}
            style={{ border: '1px solid black', padding: '8px' }}
          >
            {flexRender(cell.column.columnDef.cell, cell.getContext())}
          </td>
        ))}
      </tr>
    ))}
  </tbody>
</table>

8. Rendering the Chart
To visualize our sales data, we render the CanvasJS chart using the configured options. This step brings the multi-series bar chart to the screen, displaying product sales across quarters. Note that this needs to be added above the table in the JSX, as shown in the code:

<h2>Quarterly Sales Performance by Product</h2>
<CanvasJSChart options={options} />

9. Component Structure

return (
  <div>
    <h2>Quarterly Sales Performance by Product</h2>
    <CanvasJSChart options={options} />
    <table>...</table>
  </div>
);

Conclusion:
This example showcases the seamless integration of @tanstack/react-table and CanvasJS to present sales data in a React application. The table delivers a detailed, row-by-row breakdown of the numbers, while the multi-series chart offers a striking visual comparison of sales trends across products and quarters. The power of this setup lies in its flexibility—you can easily extend it with features like sorting, filtering, or alternative chart types (think line or area charts) to fit your specific needs. Take it further by adding custom styling for a polished look or enhancing interactivity with tooltips that reveal detailed data on hover. Experiment with this code, tweak it for your own datasets, and unlock the potential of dynamic, impactful data visualization!

Embedding JSFiddle in dev.to Articles

Manoj Mohan — Thu, 30 Jan 2025 07:35:26 +0000

When you're sharing code examples in your articles on dev.to, providing an interactive experience can significantly enhance reader engagement. JSFiddle, a popular online code editor, allows you to create and share web snippets directly from your browser. However, manually embedding these snippets can be cumbersome. Fortunately, dev.to offers a simplified method using custom Liquid tags specifically designed for JSFiddle integration. Here's how you can leverage this feature to make your code examples more interactive and insightful.

Why Embed JSFiddle?

Interactivity: Readers can modify and experiment with your code in real-time, enhancing their learning experience.
Immediate Feedback: Seeing the code in action helps in understanding concepts better than static code blocks.
Ease of Use: For both you and your readers, there's no need to set up a local development environment to test or view code changes.
Customizable Tabs: Show only the code panels you want (e.g., HTML, CSS, JS, or the result).

The Liquid Tag for JSFiddle

dev.to provides a custom Liquid tag for embedding JSFiddle, which looks like this:

{% jsfiddle link html,css %}

Here's how to use it:

Create Your JSFiddle

Go to jsfiddle.net and create your HTML, CSS, and JavaScript code snippet.
Save your work to get a unique URL like https://jsfiddle.net/yourusername/yourfiddleID/

Use the Liquid Tag

Instead of using the generic {% embed %} tag, dev.to offers a specific Liquid tag for JSFiddle which gives you more control over what is displayed:

Basic Embedding: Simply embed the jsfiddle (default)

{% jsfiddle link %}

Custom Panels: To show specific panels, append them to the tag

{% jsfiddle link result,html,css %}

Troubleshooting

Fiddle Not Displaying:
- Verify the URL is correct and the fiddle is public.
- Check if you've included the correct panel names.

Conclusion

Using Liquid tags like {% jsfiddle %} streamlines the process of embedding interactive code demos into your DEV.to articles. By specifying tabs, you can tailor the viewer's experience and keep your tutorials clean and engaging. Give it a try in your next post!

Adapting CanvasJS Charts to System Default Themes for Enhanced User Experience

Manoj Mohan — Thu, 30 Jan 2025 06:42:11 +0000

In today's digital landscape, users expect applications to seamlessly adapt to their system preferences, including dark and light modes. For data visualization libraries like CanvasJS, dynamically adjusting chart themes based on system settings can significantly improve user experience. This article demonstrates how to detect system theme preferences and apply corresponding styles to CanvasJS charts.

Why Theme Adaptation Matters

Modern operating systems and browsers allow users to specify preferred color schemes. By respecting these preferences, developers can:

Create visually consistent experiences
Reduce eye strain in low-light environments
Improve accessibility
Increase user engagement

Understanding CanvasJS Themes

CanvasJS comes with built-in themes like "light1", "light2", "dark1", and "dark2", which you can apply directly to your charts:

light1 and light2: These themes provide a light background with different color palettes for data points.
dark1 and dark2: These offer dark backgrounds, which are especially useful for applications with a dark mode.

By default, if no theme is specified, CanvasJS will use "light1". However, for a more dynamic user interface, adjusting the chart theme based on the system's theme (light or dark mode) can make your application appear more cohesive and user-friendly.

Implementing System Theme Detection

Detecting Color Scheme Preferences The CSS Media Query prefers-color-scheme allows JavaScript to detect system theme preferences:

const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
let selectedTheme = isDarkMode  ? "dark2" : "light2";

Applying the Theme to CanvasJS

Once you've determined the appropriate theme, applying it to your CanvasJS chart is straightforward:

var chart = new CanvasJS.Chart("chartContainer", {
  theme: selectedTheme, // selected theme from above match media query
  // Other chart options...
});
chart.render();

Dynamic Theme Switching

For applications with light/dark mode toggling, ensure charts update dynamically by monitoring system preferences with a change event listener, as shown below.

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
  selectedTheme = e.matches ? "dark2" : "light2";
  chart.options.theme = newTheme;
  chart.render();
});

Conclusion

By dynamically adjusting CanvasJS charts to reflect system color schemes, you're not just customizing the look but enhancing usability and comfort. This approach respects user preferences, potentially increases engagement, and ensures your charts are accessible and aesthetically pleasing in any environment. Remember, a good user experience is about making technology adapt to the user, not the other way around.

This article provides both the conceptual understanding and the practical steps needed to integrate CanvasJS with system color schemes, ensuring that your charts are not only functional but also visually harmonious with the user's environment.

Display Chart in Express.js App using CanvasJS

Manoj Mohan — Mon, 02 Dec 2024 12:29:02 +0000

Express.js is a powerful tool for creating server-side applications, and CanvasJS makes it easy to visualize data with interactive charts. This tutorial will show you how to integrate the two for a seamless charting experience in your Express.js application.

Prerequisites

Before you start, make sure you have the following installed:

Node.js (LTS version recommended)
npm (comes with Node.js)
Basic knowledge of JavaScript and Express.js

Step 1: Set Up Your Express.js Application

1. Create a new directory for your project and navigate to it:

mkdir express-canvasjs-chart
cd express-canvasjs-chart

2. Initialize a new Node.js project:

npm init -y

3. Install Express:

npm install express

4. Create a file named server.js and set up a basic Express server:

const express = require('express');
const app = express();
const port = 3000;

app.use(express.static('public'));

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

Step 2: Add CanvasJS to Your Project

CanvasJS is a client-side library, so you need to include it in your front-end code.
1. Download the CanvasJS library from CanvasJS's official website.
2. Create a public folder in your project directory.
3. Place the downloaded CanvasJS script (e.g., canvasjs.min.js) inside the public folder.

Step 3: Create an HTML File to Display the Chart

1. Inside the public folder, create a file named index.html.
2. Add the following content to index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Chart in Express App using CanvasJS</title>
    <script src="canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 370px; width: 100%;"></div>
    <script>
        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                theme: "light2",
                title: {
                    text: "Display Chart in Express.js App using CanvasJS"
                },
                axisY: {
                    title: "Revenue (in USD)"
                },
                data: [{
                    type: "column",
                    dataPoints: [
                        { label: "January", y: 3000 },
                        { label: "February", y: 5000 },
                        { label: "March", y: 7000 },
                        { label: "April", y: 4000 },
                        { label: "May", y: 6000 }
                    ]
                }]
            });
            chart.render();
        };
    </script>
</body>
</html>

Step 4: Run Your Application

1. Start the server:

node server.js

2. Open your browser and navigate to http://localhost:3000.
3. You should see a column chart displaying the sales data.

Step 5: Customize Your Chart

To customize your chart, you can modify the dataPoints array with dynamic data from an API or database, such as MySQL or MongoDB. For example, you could replace the static sales data with real-time sales fetched from a backend service. You can also experiment with different chart types like line, bar, or pie to suit your visualization needs. For detailed customization options, refer to the CanvasJS documentation.

Conclusion

By integrating CanvasJS with Express.js, you unlock the ability to present data in a visually compelling and interactive manner. Whether you're building dashboards or enhancing user interfaces, this combination provides a seamless way to make data insights more engaging and accessible. Additionally, you can display charts using data sourced from databases like MySQL or MongoDB, which we will explore in future articles.

Visualizing CO2 Emission with React, World Bank Data and CanvasJS

Manoj Mohan — Tue, 24 Sep 2024 13:36:17 +0000

Climate change is a critical global issue, with carbon dioxide (CO₂) emissions playing a significant role in driving global warming. To better understand CO₂ emission trends, we can utilize data from the World Bank Data API and visualize it for clearer insights. This article will walk you through building a CO₂ emission chart using React and CanvasJS. This chart will pull data from the World Bank API based on the year selected in a dropdown menu, showcasing the top countries that contribute to CO₂ emissions.

Prerequisites

Before we begin, ensure you have the following installed:

Node.js and npm
Basic understanding of React

Setting Up the React Project

To get started, we’ll set up a basic React app using create-react-app. Run the following commands to scaffold a new project:

npx create-react-app co2-emission-chart
cd co2-emission-chart

After the project is set up, install CanvasJS React Charts, a JavaScript library that simplifies the creation of interactive and responsive charts for data visualization.

npm install @canvasjs/react-charts

Next, we'll install react-loader-spinner to show a loading indicator while the data is being fetched.

npm install react-loader-spinner

Now that everything is installed, you're prepared to start creating the chart

Fetching CO₂ Emission Data from the World Bank API

The World Bank Data API provides access to a wide range of global data, including CO₂ emissions. For this article, we'll be focusing on carbon dioxide (CO2) emissions measured in kilotons for all countries.
The API endpoint we’ll be using looks like this:

https://api.worldbank.org/v2/country/all/indicator/EN.ATM.CO2E.KT?date=2020&format=json

This API endpoint retrieves data on carbon dioxide (CO2) emissions measured in kilotons for all countries for the year 2020. The indicator EN.ATM.CO2E.KT represents the total amount of CO2 emissions produced by a country.

Creating the React Component for fetching CO₂ Emissions & displaying in chart

Let’s now create a component EmissionChart.js that fetches the data and displays it using CanvasJS. Inside your src folder, create a new file EmissionChart.js and add the following code:

import { useState, useEffect } from 'react';
import CanvasJSReact from '@canvasjs/react-charts';
let CanvasJS = CanvasJSReact.CanvasJS;
let CanvasJSChart = CanvasJSReact.CanvasJSChart;

function EmissionChart() {
  const [emissionDps, setEmissionDps] = useState([]);
  const [yearSelected, setYearSelected] = useState(2020);
  const years = [];
  for (let i = 0; i < 15; i++) {
    years.push(2020 - i);
  }

  let countriesCount = 10;

  let options = {
    title: {
      text: `Top ${countriesCount} CO₂ Emitting Countries`,
    },
    subtitles: [{
      text: `World Bank Data for ${yearSelected}`
    }],
    animationEnabled: true,
    theme: 'light2',
    axisY: {
      title: 'CO₂ emissions (kt)',
      labelFormatter: (e) => addSymbols(e.value),
      suffix: 'kt'
    },
    data: [{
      type: 'bar',
      yValueFormatString: '#,###kt',
      dataPoints: emissionDps,
    }],
  };

  function addSymbols(value) {
    var suffixes = ['', 'K', 'M', 'B'];
    var order = Math.max(Math.floor(Math.log(value) / Math.log(1000)), 0);

    if (order > suffixes.length - 1) order = suffixes.length - 1;

    var suffix = suffixes[order];
    return CanvasJS.formatNumber(value / Math.pow(1000, order)) + suffix;
  }


  async function fetchCountries() {
    const response = await fetch(
      'https://api.worldbank.org/v2/country?format=json&per_page=300'
    );
    const data = await response.json();

    // Filter out non-countries (regions, aggregates) by checking if country code is not 'XD' or similar
    const validCountries = data[1].filter(
      (country) => country.region.id !== 'NA' && country.incomeLevel.id !== 'XD'
    );

    // Create a set of country codes for quick lookup
    const countryCodes = new Set(validCountries.map((country) => country.id));
    return countryCodes;
  }

  async function fetchEmissionData(baseUrl) {
    let emissionRecords = [];
    let page = 1;
    let morePagesAvailable = true;

      // Looping around pages if exist more
    while (morePagesAvailable) {
      // Construct URL for the current page
      const url = `${baseUrl}&page=${page}`;

      try {
        const response = await fetch(url);
        const data = await response.json();

        // World Bank API returns metadata in the first element, data in the second
        const [metadata, records] = data;

        // Append the current page's data to allData
        emissionRecords = emissionRecords.concat(records);

        // Check if there are more pages based on metadata
        const totalPages = metadata.pages;
        if (page >= totalPages) {
          morePagesAvailable = false;
        } else {
          page++;
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        break;
      }
    }

    // Filtering the record as the world bank API contains data for World, regions, etc.
    var countryCodes = await fetchCountries();
    emissionRecords = emissionRecords.filter((record) => {
      return record.value !== null && countryCodes.has(record.countryiso3code);
    });

    emissionRecords.sort((a, b) => b.value - a.value);
    // Parse the emission record data in CanvasJS datapoint format
    let dps = [];
    for (let i = 0; i < countriesCount; i++) {
      dps.push({
        label: emissionRecords[i].country.value,
        y: emissionRecords[i].value,
      });
    }

    setEmissionDps(dps);
  }

  useEffect(() => {
    fetchEmissionData(  
      `https://api.worldbank.org/v2/country/all/indicator/EN.ATM.CO2E.KT?date=${yearSelected}&format=json`
    );
  }, [yearSelected]);

  return (
    <>
      <div className="year-selection">
        <label>
          Select Year:
          <select
            onChangeCapture={(e) => setYearSelected(e.target.value)}
            defaultValue={yearSelected}
          >
            {years.map((year, index) => (
              <option value={year}>{year}</option>
            ))}
          </select>
        </label>
      </div>
      <div className="container">
        <CanvasJSChart
          options={options}
          containerProps={{ width: '100%', height: '360px' }}
        />
      </div>
    </>
  );
}

export default EmissionChart;

Creating the Component for displaying loader while fetching data

Let’s build a Loader component that will be shown while data is being fetched. Additionally, we will introduce a state variable isLoading in the EmissionChart component, which will serve as a flag to determine whether to display the chart or the loader.

/*Loader.js*/
import { Bars } from 'react-loader-spinner';

function Loader({ yearSelected }) {
  return (
    <>
      <Bars
        height="80"
        width="80"
        color="#6f76ab"
        ariaLabel="Loading Data from World Bank API"
        animationDuration="0.75"
        wrapperStyle={{}}
        visible={true}
      />
      <div style={{ textAlign: 'center', marginTop: '16px' }}>
        Hang on for a moment! <br />
        We're pulling CO₂ emissions data for {yearSelected} from the World Bank
      </div>
    </>
  );
}

export default Loader;

/*EmissionChart.js*/
import Loader from './Loader';
.
.

const [isLoading, setIsLoading] = useState(true);

async function fetchEmissionData(baseUrl) {
    setIsLoading(true);
    .
    .
    setEmissionDps(dps);
    setIsLoading(false);
}
.
.
.
return (
  <>
    <div className="year-selection">
      <label>
        Select Year:
        <select
          onChangeCapture={(e) => setYearSelected(e.target.value)}
          defaultValue={yearSelected}
        >
          {years.map((year, index) => (
              <option value={year}>{year}</option>
          ))}
        </select>
      </label>
    </div>
    <div className="container">
      {isLoading ? (
          // Display the loader spinner while fetching data from World Bank API
          <Loader yearSelected={yearSelected} />
      ) : (
          // Display the chart when the data is loaded
          <>
          <CanvasJSChart
              options={options}
              containerProps={{ width: '100%', height: '360px', maxWidth: '920px', margin: 'auto' }}
          />
          </>
      )}
    </div>
  </>
);
.
.

Using the Component in App.js

With the EmissionChart component complete, it's time to integrate it into the main application. Open src/App.js and update it as follows:

/*App.js*/
import EmissionChart from './EmissionChart';
import './App.css';

function App() {
  return (
    <EmissionChart />
  );
}

export default App;

Adding styles to our Component

To improve the appearance of our component, you can add some CSS styles. You can include the following lines in src/App.css

#root {
  height: 100vh;
  width: 100%;
  background: #fff;
  color: #000;
}
body {
  background: #fff;
  color: #000;
}
.year-selection {
  text-align: center;
  margin-bottom: 16px;
  margin-top: 16px;
  display: flex;
  justify-content: center;
  width: auto;
}
.year-selection select {
  margin-left: 8px;
  background: #fff;
  color: #000;
  border-radius: 4px;
  font-size: 16px;
}
.container {
  height: 360px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.credit-data {
  display: block;
  font-size: 10px;
  color: #8a8484;
  max-width: 920px;
  width: 100%;
  text-align: right;
}
.credit-data a {
  margin-left: 2px;
  margin-right: 2px;
}

Running the Application

All set! You can now run the application by simply using:

npm start

This will start the React app, and when you visit http://localhost:3000, you should see the loading spinner while the data is being fetched, followed by the chart displaying global CO₂ emissions from 2006 to 2020.

Conclusion

In this article, we illustrated how to create a chart displaying the top countries contributing to CO₂ emissions using data from the World Bank API. We’ve established a solid foundation for building a comprehensive dashboard. This dashboard can be utilized to present various environmental statistics, track trends, and support informed decision-making. Happy coding, and let’s keep making a positive impact together!

Integrate CanvasJS Charts in Your Nuxt.js App

Manoj Mohan — Fri, 03 May 2024 12:44:00 +0000

In today's data-centric world, interactive and visually engaging charts are crucial for conveying insights clearly. Nuxt.js, a popular framework for streamlined Vue.js development, allows you to build powerful applications. But by integrating a robust charting library like CanvasJS, you can unlock a new level of data visualization in your Nuxt.js projects. This blog post will equip you with the steps to seamlessly integrate CanvasJS charts, enabling you to create dynamic visualizations that bring your data to life.

Integration Steps

1. Create a Basic Nuxt.js Application
Please check this link for creating basic application in nuxt.js

2. Install CanvasJS Vue Plugin from npm

npm install @canvasjs/vue-charts

3. Register the CanvasJS Vue plugin
To make the CanvasJSChart component available across your Nuxt.js application, register it globally in the plugins directory. Create a new file named canvasjs-vue-charts.client.ts inside the plugins directory and add the following code:

// @ts-ignore
import CanvasJSChart from '@canvasjs/vue-charts';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(CanvasJSChart);
});

Notice the .client suffix on canvasjs-vue-charts.client.ts. This ensures the CanvasJS Vue Chart plugin runs only on the client-side (browser) as CanvasJS relies on browser environment and APIs to function.

4. Create Chart Component for adding CanvasJS Charts
Create file index.client.vue inside page directory and add the following code:

<script>
export default {
  data() {
    return {
      chart: null,
      options: {
        animationEnabled: true,
        title: {
          text: 'CanvasJS Nuxt App Integration',
        },
        data: [
          {
            type: 'column',
            dataPoints: [
              { label: 'apple', y: 10 },
              { label: 'orange', y: 15 },
              { label: 'banana', y: 25 },
              { label: 'mango', y: 30 },
              { label: 'grape', y: 28 },
            ],
          },
        ],
      },
    };
  },
};
</script>
<template>
  <CanvasJSChart :options="options" />
</template>

Notice the .client suffix on index.client.vue. This ensures the chart component runs only on the client-side (browser) as CanvasJS relies on browser environment and APIs to function.

5. Run the Application
Start or restart your Nuxt.js development server using npm run dev (or yarn dev). Now, you should see your column chart within your Nuxt.js application!

Further Enhancements:

Explore the extensive customization options offered by CanvasJS to create visually appealing and informative charts. Refer to this link for more examples.

Stream Data to Charts in Real-Time using Websockets and Express

Manoj Mohan — Mon, 29 Jan 2024 12:14:06 +0000

In today's dynamic digital landscape, the demand for real-time data visualization is ever-growing. Whether it's monitoring live traffic on a website, tracking stock market fluctuations, or analyzing sensor data in IoT devices, the ability to visualize data as it streams in can provide invaluable insights and drive informed decision-making. In this blog post, we'll use Websockets and Express to stream real-time data and transform it into visually appealing charts with the help of CanvasJS.

Setting Up the Environment

First, let's set up our development environment. Make sure you have Node.js and npm installed on your system. Then, create a new directory for our project and initialize it with a package.json file:

mkdir real-time-charts-websocket-app
cd real-time-charts-websocket-app
npm init -y

Next, install the necessary dependencies:

npm install express socket.io

Implementing the Server

Now, let's create the server-side application using Express and integrate Websockets with socket.io

/* server.js */
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

// Serve static files from the 'public' directory
app.use(express.static('public'));

let  y = 1000;

// Handle websocket connections
io.on('connection', (socket) => {
    console.log('A client has connected');    
});

// Sending data to the server every 2 seconds
setInterval(() => {
    y += Math.round(100 + Math.random() *(-100-100));
    io.emit('data', JSON.stringify({
        value: y
    }))
}, 2000)

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

You can customize the above as per your requirement for sending data to Websocket clients e.g. broadcasting the data to a particular pool of users. Also, in the above, I am creating random data and sending it to the client on every interval. But in real-world scenario, this data can be coming from Iot devices or some third-party APIs.

Creating the Client-Side Interface

Now that we have our server set up, let's create the client-side interface where we'll display the real-time data using CanvasJS charts.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Real-Time Charts with CanvasJS</title>
    <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
  </head>
  <body>
    <div id="chartContainer" style="height: 300px; width: 100%"></div>

    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();

      // Initialize CanvasJS chart
      const chart = new CanvasJS.Chart('chartContainer', {
        theme: 'light2',
        title: {
          text: 'Real-Time Data Visualization with Websockets',
        },
        data: [
          {
            type: 'spline',
            dataPoints: [],
          },
        ],
      });

      // Listen for incoming data
      socket.on('data', (data) => {
        data = JSON.parse(data);
        chart.options.data[0].dataPoints.push({ y: data.value });
        chart.render();
      });
    </script>
  </body>
</html>

We will be storing index.html inside public folder.

Running the Application

With both the server and client-side code in place, let's start our application by running the server:

node server.js

Now, open your web browser and navigate to http://localhost:3000. You should see a real-time chart updating with data streamed from the server.

Conclusion

In this blog post, we've explored how to achieve real-time data visualization by streaming data with Websockets and Express, and then visualizing it using CanvasJS. By combining these powerful technologies, developers can create engaging and interactive data visualization applications that provide valuable insights to users in real time. Whether it's monitoring live analytics, tracking IoT sensor data, or visualizing financial markets, the possibilities for real-time data visualization are endless with Websockets, Express, and CanvasJS.

Forem: Manoj Mohan

Understanding Resize Observer in Modern Web Development

The Architectural Gap: Life Before Resize Observer

Why Resize Observer Was Introduced

1. Component Encapsulation

2. Fluid Layout Systems

3. Performance Constraints

4. Standardization

The Resize Observer API: Core Concepts

Key Interfaces

Observed Box Types

Usage: Minimal but Powerful

Cleanup

Under the Hood: How Browsers Deliver Resize Signals

Observation Phase

Batching

Asynchronous Delivery

Loop Detection

Some of Practical Use Case

Container-Aware Components

Auto-Sizing Layouts

Virtualized Interfaces

Performance Considerations in Real World Scenario

Final Thoughts

Browser Support & Compatibility

Adding a Custom Context Menu to CanvasJS Charts on Right-Click

Why Add a Custom Context Menu?

Prerequisites

Step 1: Set Up the Basic Chart

Step 2: Create the Context Menu HTML

Step 4: Handle Events with JavaScript

Full Working Demo

Customization Tips

Creating a Comparison (Year over Year) Chart for Daily Data Across Two Years Using CanvasJS

Setting Up CanvasJS

Preparing Your Data

Building the Chart

See It in Action

Conclusion

Coordinating Tooltips Across Multiple CanvasJS Charts Using React Context

Prerequisites

Approach

Implementation Overview

Chart Context and Synchronization Mechanism

ChartContext.js

Synchronization Process

Conclusion

Enhancing Sales Data Visualization: Advanced Interactivity with CanvasJS and React Table

Why Interactivity Matters

Highlighting Rows in @tanstack/react-table

Adding Interactivity to @canvasjs/react-charts

Conclusion

Visualizing Sales Data with CanvasJS and React-Table

Why This Combination?

Prerequisites

Step-by-Step Explanation

Embedding JSFiddle in dev.to Articles

Why Embed JSFiddle?

The Liquid Tag for JSFiddle

Create Your JSFiddle

Use the Liquid Tag

Troubleshooting

Conclusion

Adapting CanvasJS Charts to System Default Themes for Enhanced User Experience

Why Theme Adaptation Matters

Understanding CanvasJS Themes

Implementing System Theme Detection

Applying the Theme to CanvasJS

Dynamic Theme Switching

Conclusion

Display Chart in Express.js App using CanvasJS

Prerequisites

Step 1: Set Up Your Express.js Application

Step 2: Add CanvasJS to Your Project

Step 3: Create an HTML File to Display the Chart

Step 4: Run Your Application

Step 5: Customize Your Chart

Conclusion

Visualizing CO2 Emission with React, World Bank Data and CanvasJS

Prerequisites