• FluentUI Reference Documentation
• FluentUI.Controls
• Chart
• FluentUI 1.0

Chart QML Type

A chart component powered by Chart.js supporting multiple chart types and animations. More...

• List of all members, including inherited members

Properties

• animationDuration : double
• animationEasingType : int
• animationRunning : alias
• chartAnimationProgress : double
• datas : var
• options : var
• type : string

Signals

• void animationFinished()

Methods

• void animateToNewData()

Detailed Description

Chart is a QML Canvas-based component that wraps the Chart.js library to render interactive charts. It supports all Chart.js chart types (bar, line, pie, doughnut, radar, polarArea, bubble, scatter) and provides animation, mouse event handling, and responsive resizing.

Usage Example

 import QtQuick
 import FluentUI.Controls

 Chart {
     anchors.centerIn: parent
     width: 400
     height: 300
     type: "bar"
     datas: {
         labels: ["Jan", "Feb", "Mar"],
         datasets: [{
             label: "Revenue",
             data: [100, 200, 150]
         }]
     }
     options: {
         responsive: true,
         scales: {
             y: { beginAtZero: true }
         }
     }
     animationDuration: 500
 }

Property Documentation

animationDuration : double

The duration of the chart animation in milliseconds. Defaults to Theme.slowAnimationDuration (358 ms).

See also animationEasingType.

animationEasingType : int

The easing curve used for chart animations. Defaults to Theme.animationCurve (Easing.OutCubic).

See also animationDuration.

animationRunning : alias

Holds whether the chart animation is currently running. Setting this to true starts the animation; setting to false stops it.

chartAnimationProgress : double

The animation progress value ranging from 0.1 to 1.0. This property drives the chart's draw animation and is updated by the internal animator during the animation cycle.

datas : var

The data object conforming to the Chart.js data structure, containing labels and datasets arrays. Each dataset should have a label and data array.

See also options.

options : var

The Chart.js configuration options object. This allows customization of scales, tooltips, legends, and other chart behavior as defined by the Chart.js library.

See also datas.

type : string

The chart type. Supported values include "bar", "line", "pie", "doughnut", "radar", "polarArea", "bubble", and "scatter". This property determines which Chart.js chart type is used for rendering.

Signal Documentation

void animationFinished()

Emitted when the chart animation completes.

Method Documentation

void animateToNewData()

Triggers the chart to animate from its current state to display newly assigned data. Call this after updating datas or options properties to smoothly transition the visual representation.