Overview

ChartKit is a lightweight, reusable charting component for OutSystems that allows developers to render multiple chart types using a single component and a simple JSON configuration.

Instead of creating separate components and JavaScript logic for each chart type, ChartKit provides a unified chart engine powered by D3.js, making it easy to build modern dashboards for Web and Mobile apps.

Key Features

•  Multiple chart types supported

  • Vertical Bar Chart

  • Horizontal Bar Chart

  • Line Chart

  • Pie Chart

• Single component, multiple charts

  • Change chart type using JSON only

  • No need to duplicate UI or JS logic

•  JSON-driven configuration

  • Fully controlled via input JSON

  • Ideal for dynamic and data-driven applications

• Custom colors support

  • Per-data-point color configuration

  • Automatic fallback colors if not provided

•  Web & Mobile compatible

  • Works in Reactive Web Apps

  • Works in Mobile Apps

• Lightweight & fast

  • Client-side rendering

  • No server round trips required

Why ChartKit?

Building charts in OutSystems often requires:

• Repeating JavaScript logic

• Managing multiple chart components

• Handling complex integrations

ChartKit solves this by:

• Centralizing all chart logic in one reusable component

• Reducing maintenance effort

• Providing a clean and scalable API

One component. One JSON input. Many charts.

How It Works

ChartKit receives a ChartConfig JSON as input, which defines:

• Chart type

• Labels

• Values

• Optional colors

Based on the type value, ChartKit automatically renders the appropriate chart.

Example Chart Configurations

Bar Chart

{
  "type": "bar",
  "labels": ["Jan", "Feb", "Mar"],
  "values": [120, 90, 150],
  "colors": ["#3498db", "#2ecc71", "#e74c3c"]
}

Horizontal Bar Chart

{
  "type": "horizontalBar",
  "labels": ["India", "USA", "UK"],
  "values": [120, 90, 150]
}

Line Chart

{
  "type": "line",
  "labels": ["Jan", "Feb", "Mar", "Apr"],
  "values": [20, 35, 30, 50]
}

Pie Chart

{
  "type": "pie",
  "labels": ["HR", "IT", "Finance"],
  "values": [30, 40, 30]
}

 Ideal Use Cases
Executive dashboards
KPI monitoring screens
Analytics views
Admin panels
Reporting modules