Quick Start

Quick Start

This example creates a line chart through the public ChartKit API. A ChartKit chart is a QWidget, so it can be placed in a Qt layout, a page widget, or a Qt-UI container.

Include Headers

#include "UIGQLineChart.h"
#include "UIGQChartTheme.h"

For other chart types:

#include "UIGQBarChart.h"
#include "UIGQOpenGLPieChart.h"
#include "UIGQScatterChart.h"

Create the Chart

using namespace UIGQtLib;

auto* chart = new UIGQLineChart(parent);
chart->setMinimumSize(640, 360);
chart->setTitle("Monthly Orders");

Set Categories and Data

chart->setCategories({"Jan", "Feb", "Mar", "Apr", "May"});
chart->setSeries("Orders", {128, 152, 176, 163, 209}, QColor(35, 128, 224));

Theme and Interaction

chart->setThemePreset(kChartThemeMacarons);
chart->setLegendPosition(kChartLegendBottom);
chart->setTooltipMode(kChartTooltipItem);
chart->setTooltipVisible(true);
chart->setHoverEnabled(true);
chart->setAnimationEnabled(true);

Refresh Data

chart->setSeries("Orders", latestValues, QColor(35, 128, 224));
chart->restartAnimation();

Do not update the chart through internal QtCharts objects. Re-apply data through ChartKit setters.

Usage Guide

Usage Guide

ChartKit uses a "control + data structure + theme" model. Business code prepares categories, values, points, or slices, then passes them to the chart control.

Shared Base API

All current ChartKit controls inherit UIGQChartBase.

Data Entry Points

Recommended Flow

auto* chart = new UIGQBarChart(parent);

chart->setTitle("Policy Status");
chart->setCategories({"Active", "Expiring", "Invalid"});

QVector<UIGQBarChartSeries> series;
UIGQBarChartSeries item;
item.name = "Policies";
item.values = {420, 15, 30};
item.fillColor = QColor(35, 128, 224);
series.append(item);

chart->setSeries(series);
chart->setThemePreset(kChartThemeShine);
chart->setTooltipVisible(true);
chart->setHoverEnabled(true);

Notes

• Keep category count and value count aligned whenever possible.
• Use QVector<UIGQLineChartSeries> or QVector<UIGQBarChartSeries> for multiple series.
• Use clearSeries() or clearSlices() to remove current data.
• Use setSeriesVisible(index, visible) to toggle series visibility without deleting data.
• Application code should configure data structures, theme settings, and interaction options through ChartKit public methods. Internal rendering objects are managed by the chart controls.

AI Skills Integration

ChartKit AI Skills Integration

The ChartKit Skill is a product knowledge package for AI assistants. It covers integration workflows, data structures, themes, legends, tooltips, animation, and data refresh rules for Line, Column, Pie, and Scatter charts. It helps AI choose the right chart type for business data and generate Qt code.

Downloads

• Download ChartKit Skill
• Download All Qt-UI Skills

Folder Structure

uigears-chartkit/
  SKILL.md
  agents/openai.yaml
  references/
    integration.md
    api-reference.md

Suitable AI Tasks

• Choose Line, Column, Pie, or Scatter based on business metrics.
• Generate ChartKit widget creation, data assignment, and theme setup code.
• Create examples for multi-series line charts, bar charts, donut charts, and scatter plots.
• Troubleshoot blank charts, mismatched data length, missing tooltips, and animation refresh issues.
• Map business data structures into ChartKit series or slice data structures.

Integration Steps

1. Download and extract qt-ui-uigears-chartkit-skill.zip.
2. Place uigears-chartkit in the AI tool's skills directory.
3. Describe the data type and desired chart, for example: "Use ChartKit to generate a monthly orders line chart."
4. For new integrations, have the AI read references/integration.md first.
5. For chart-specific APIs, have the AI read references/api-reference.md.

Example Prompts

Use the uigears-chartkit skill to generate a UIGQLineChart example for monthly order data with tooltip, legend, and animation enabled.

Use the uigears-chartkit skill to convert these category statistics into a UIGQBarChart and explain how setCategories maps to setSeries.

Code Generation Rules

• The current product includes only Line, Column/Bar, Pie, and Scatter charts.
• Charts are Qt widgets and can be placed in Qt layouts or WidgetKit containers.
• Update data and appearance through public APIs such as setSeries(...), setSlices(...), and setThemePreset(...).
• Do not access internal rendering objects.
• Call restartAnimation() when refreshed data should replay animation.

Line Chart

Line Chart

Line charts show continuous trends, historical comparisons, monitoring curves, and time-like business metrics.

Base and Class Diagram

QOpenGLWidget
  └─ UIGQChartBase
      └─ UIGQLineChart + IUIGQWidgetBase

Data Structure

struct UIGQLineChartSeries
{
    QString name;
    QVector<double> values;
    QColor lineColor;
    QColor areaColor;
    bool showSymbol = true;
    bool smooth = false;
    bool showArea = false;
    bool visible = true;
    qreal lineWidth = 2.0;
    qreal areaOpacity = 0.22;
};

Methods

Example

using namespace UIGQtLib;

auto* chart = new UIGQLineChart(parent);
chart->setTitle("CPU Usage");
chart->setCategories({"00:00", "00:05", "00:10", "00:15"});
chart->setSeries("CPU", {22.0, 35.0, 31.0, 48.0}, QColor(35, 128, 224));
chart->setSmooth(true);
chart->setShowSymbol(true);
chart->setThemePreset(kChartThemeMacarons);
chart->setTooltipMode(kChartTooltipAxis);
chart->setTooltipVisible(true);

setCategories(...) defines the horizontal labels. setSeries(...) provides the line name, values, and color. kChartTooltipAxis is useful when values should be inspected by category position.

Bar Chart

Bar Chart

Bar charts compare values across categories. The public class is UIGQBarChart; this chapter keeps the column-chart slug only for existing page compatibility.

Base and Class Diagram

QOpenGLWidget
  └─ UIGQChartBase
      └─ UIGQBarChart + IUIGQWidgetBase

Data Structure

struct UIGQBarChartSeries
{
    QString name;
    QVector<double> values;
    QColor fillColor;
    QColor borderColor;
    bool visible = true;
};

Methods

Example

using namespace UIGQtLib;

auto* chart = new UIGQBarChart(parent);
chart->setTitle("Policy Overview");
chart->setCategories({"Active", "Expiring Soon", "Need Validation", "Expired"});
chart->setSeries("Policies", {420, 15, 30, 12}, QColor(35, 128, 224));
chart->setThemePreset(kChartThemeShine);
chart->setLegendPosition(kChartLegendBottom);
chart->setTooltipMode(kChartTooltipItem);
chart->setTooltipVisible(true);
chart->setHoverEnabled(true);

setCategories(...) defines category names. setSeries(name, values, color) is the fastest entry point for one grouped dataset. For multiple datasets, pass QVector<UIGQBarChartSeries> to setSeries(...).

Pie Chart

Pie Chart

Pie charts show part-to-whole relationships. The public class is UIGQOpenGLPieChart.

Base and Class Diagram

QOpenGLWidget
  └─ UIGQChartBase
      └─ UIGQOpenGLPieChart + IUIGQWidgetBase

Data Structure

struct UIGQOpenGLPieChartSlice
{
    QString name;
    double value = 0.0;
    QColor fillColor;
    bool visible = true;
};

Methods

Example

using namespace UIGQtLib;

auto* chart = new UIGQOpenGLPieChart(parent);
chart->setTitle("Traffic Sources");

QVector<UIGQOpenGLPieChartSlice> slices;

UIGQOpenGLPieChartSlice search;
search.name = "Search";
search.value = 1048;
search.fillColor = QColor(35, 128, 224);
slices.append(search);

UIGQOpenGLPieChartSlice direct;
direct.name = "Direct";
direct.value = 735;
direct.fillColor = QColor(62, 180, 98);
slices.append(direct);

chart->setSlices(slices);
chart->setInnerRadiusRatio(0.55);
chart->setTooltipMode(kChartTooltipItem);
chart->setTooltipVisible(true);

setSlices(...) is the data entry point. value is used to calculate proportions, so application code does not need to pre-compute percentages.

Scatter Chart

Scatter Chart

Scatter charts show relationships between two numeric dimensions, such as correlation, distribution, clusters, and outliers.

Base and Class Diagram

QOpenGLWidget
  └─ UIGQChartBase
      └─ UIGQScatterChart + IUIGQWidgetBase

Data Structure

struct UIGQScatterChartSeries
{
    QString name;
    QVector<QPointF> points;
    QColor color;
    bool visible = true;
    qreal symbolSize = 8.0;
};

Methods

Example

using namespace UIGQtLib;

auto* chart = new UIGQScatterChart(parent);
chart->setTitle("Validation Samples");

QVector<UIGQScatterChartSeries> series;

UIGQScatterChartSeries passed;
passed.name = "Passed";
passed.points = {QPointF(12, 80), QPointF(18, 88), QPointF(25, 91)};
passed.color = QColor(62, 180, 98);
passed.symbolSize = 8.0;
series.append(passed);

UIGQScatterChartSeries warning;
warning.name = "Warning";
warning.points = {QPointF(10, 52), QPointF(20, 58), QPointF(28, 61)};
warning.color = QColor(232, 148, 54);
warning.symbolSize = 10.0;
series.append(warning);

chart->setSeries(series);
chart->setThemePreset(kChartThemeShine);
chart->setTooltipMode(kChartTooltipItem);
chart->setTooltipVisible(true);
chart->setHoverEnabled(true);

Each QPointF(x, y) is one scatter point. Each UIGQScatterChartSeries represents one group.

License

License

ChartKit provides community and commercial editions.

Commercial editions are intended for production Qt applications and include source packages, examples, resources, and update rights according to the purchased plan.