Custom visualisations with Metabase plugin points: A practical guide for South African teams

Custom visualisations with Metabase plugin points: A practical guide for South African teams

Introduction: Why custom visualisations matter in South Africa right now

As more South African businesses double down on business intelligence tools and data analytics, teams are running into the same problem: the default charts in their BI platforms are not always enough. That’s where Custom visualisations with Metabase plugin points come in. They let local dev and data teams extend Metabase beyond its built‑in bar charts, maps, and tables, and plug in bespoke visuals that match South African markets, regulatory needs, and customer journeys.

This article explains, in clear and practical terms, how Custom visualisations with Metabase plugin points work, how they fit into a modern analytics stack, and how South African companies can use them alongside CRM data from tools like MahalaCRM to build richer, faster, and more relevant dashboards for sales, support, and product teams.

What are Metabase plugin points?

From standard charts to pluggable extensions

Metabase ships with a powerful set of built‑in visualisation types (tables, pivot tables, line, bar, area, row, pie, gauge, and multiple map views). These can already be deeply customised using the visualisation settings pane for things like conditional formatting, stacked bars, percentages, goal lines, trend lines, and custom maps.[1][5][7] However, some teams quickly reach the limits of the default chart set.

Plugin points are extension hooks in Metabase that allow developers to add new capabilities — including new visualisation types — without forking or modifying Metabase’s core. In practice, this usually means:

• Defining a custom visualisation component in JavaScript/React.
• Registering it with Metabase through a plugin entry point.
• Passing query results from Metabase into your custom chart and rendering it inside the UI.

Why South African organisations care about plugin points

South African businesses often operate across multiple regions, currencies, and product lines. Out‑of‑the‑box charts might not capture:

• Regional metrics across provinces on a custom GeoJSON map.[5][7]
• Telecom or fintech event flows (e.g. airtime purchases & reversals) as Sankey or chord diagrams.
• Complex CRM funnels stitched from multiple systems (e.g. web, WhatsApp, call centre, in‑store).

With Custom visualisations with Metabase plugin points, data teams can build exactly the charts they need, while still letting non‑technical business users query data via the Metabase interface.[1][6]

How Metabase handles visualisations today

Built‑in visualisation options you should use first

Before investing dev time in plugins, it’s worth exhausting what Metabase already offers out of the box.[1][6] For most South African teams, you can get very far with:

• Tables & pivot tables with conditional formatting for operations and finance teams.[1]
• Line and area charts for time‑based metrics like daily active users or transaction volume.[1][6]
• Bar & stacked bar charts to compare branches, regions, or product lines.[1][6]
• Pie and gauge charts for high‑level distribution and performance indicators.[1]
• Maps (pin, grid, region) for province‑ or city‑level performance across South Africa.[5][7]

Metabase also supports custom maps via GeoJSON and OpenStreetMap tiles, so you can define your own region shapes (e.g. sales zones or franchise areas) before you ever write a plugin.[5][7]

Interactive features that reduce the need for custom code

Interactive features like drill‑through, filters, and custom destinations turn standard charts into exploratory tools.[4] For example, clicking on a bar in a sales chart can send users to a filtered dashboard or external CRM URL, parameterised by the branch or customer they clicked.[4]

These capabilities often deliver enough flexibility for most internal stakeholders, so it’s best to implement them first before moving to Custom visualisations with Metabase plugin points.

When you should use Custom visualisations with Metabase plugin points

Use cases in South African businesses

Here are realistic local scenarios where investing in Custom visualisations with Metabase plugin points makes sense:

• Advanced CRM funnel analytics: Combine MahalaCRM data with web events to build a custom funnel visualisation tailored to South African buying journeys, from lead to repeat customer.
• Load‑shedding impact visuals: Build a custom visual that overlays Eskom load‑shedding schedules with transaction volume, contact centre load, or churn events for deep operational insight.
• Geo‑rich retail and logistics dashboards: Visualise delivery performance or stock‑outs on a custom map of delivery zones across Gauteng, Western Cape, and KZN using bespoke shapes and colour rules.
• Financial risk & compliance views: Render multi‑dimensional risk indicators (e.g. fraud signals, dispute ratios) with radial or matrix charts that are not available by default in Metabase.

Business benefits of custom plugin‑based visualisations

• Better decision‑making thanks to visuals designed around your exact processes, not generic templates.
• Faster stakeholder adoption because executives can see data in formats aligned to local terminology, segments, and regulatory concepts.
• Competitive differentiation when you embed custom Metabase charts directly into your customer‑facing product or internal CRM.[9]

Technical approach to Custom visualisations with Metabase plugin points

Typical architecture

At a high level, implementing Custom visualisations with Metabase plugin points follows this flow:

1. Developer creates a plugin project, usually in JavaScript/React.
2. Plugin registers itself with Metabase as a new visualisation type via a plugin entry point.
3. Metabase query results are passed to the plugin component as props.
4. The plugin renders a chart (often via a charting library like D3, Chart.js, or Recharts) using that data.
5. Users can pick the custom visualisation type inside Metabase as if it were native.

Example: Skeleton of a Metabase visualisation plugin

Below is a conceptual example of how a custom visualisation component might look. This is an illustrative pattern, not production‑ready code.

// Example skeleton for a Metabase custom visualisation plugin

import React from "react";
// import YourChartLibrary from "your-chart-lib";

function CustomSAFunnelVisualization({ data, settings }) {
  // `data` contains the rows/columns returned by Metabase
  // Transform it into the shape your charting library expects
  const transformed = transformResultToFunnel(data);

  return (
    <div className="sa-funnel-visual">
      {/* Replace with your charting library of choice */}
      {/* <YourChartLibrary data={transformed} options={settings} /> */}
      Custom South African CRM funnel visual goes here.
    </div>
  );
}

// Registration with Metabase's plugin system
export const metabaseVizPlugin = {
  id: "custom-sa-funnel",
  title: "SA CRM Funnel",
  description: "Custom CRM funnel for South African customer journeys",
  component: CustomSAFunnelVisualization,
  // Additional config like supported data shapes, settings UI, etc.
};

On the Metabase side, administrators can configure where this plugin is loaded and which users can access it, much like they manage other configuration options such as appearance and branding.[8]

Combining plugins with maps and custom regions

If you are building location‑heavy dashboards, you can pair Custom visualisations with Metabase plugin points with Metabase’s built‑in custom maps.[5][7] For example:

• Use Metabase’s custom region maps for standard province‑level reporting.[5][7]
• Use