HarmonyOS

Posted on Dec 4

Creating Charts in HarmonyOS using @mcui/mccharts and ArkTS

#huawei #harmony #harmonyos

Read the original article：Creating Charts in HarmonyOS using @mcui/mccharts and ArkTS

HarmonyOS NEXT is steadily evolving to support rich UI components and data visualization capabilities for developers. In this guide, I’ll walk you through integrating the @mcui/mccharts package using ArkTS and ArkUI to create an interactive and elegant line chart.

Introduction

Data visualization is a key feature in many mobile applications, from tracking user metrics to displaying real-time statistics. HarmonyOS developers can now take advantage of @mcui/mccharts, a lightweight charting library that integrates seamlessly with ArkTS and ArkUI.

In this guide, we will walk through how to use the McLineChart component from the @mcui/mccharts package to render clean, interactive line charts in your HarmonyOS NEXT apps.

Installation

Start by installing the package with the following command:

ohpm install @mcui/mccharts

Ensure you’re working in a project that supports ArkTS with the HarmonyOS NEXT.

Importing the Module

import { McLineChart, McBarChart, McGaugeChart, McHorBarChart, McPieChart, McPointChart, McRadarChart, Options } from '@mcui/mccharts'

Creating a Line Chart Component

1. Set Up Chart Options

First, initialize the chart options using the Options object:

@State seriesOption: Options = new Options({
  xAxis: {
    data: ['Mon','Sun','Wed','Thu','Fri','Sat','Sun'],
    axisLabel: {
      color: '#333',
      fontWeight: '500',
      fontSize: 40
    },
  },
  yAxis: {
    axisLabel: {
      color: '#333',
      fontWeight: '500',
      fontSize: 40
    },
  },
  series: [
    { name: 'Maximum' },
    { name: 'Minimum' }
  ]
})

2. Populate Chart Data Dynamically

To simulate a data update, use setTimeout in the aboutToAppear() lifecycle method:

aboutToAppear() {
  setTimeout(() => {
    this.seriesOption.setVal({
      series: [
        {
          name: 'Maximum',
          data: [110, 110, 150, 130, 120, 190, 100]
        },
        {
          name: 'Minimum',
          data: [-30, -20, 10, 50, 40, 70, 100]
        }
      ]
    })
  }, 2000)
}

3. Render the Line Chart

Row() {
  McLineChart({
    options: this.seriesOption
  })
}
.height('50%')

Key Features

Reactive updates: Chart updates automatically when seriesOption changes.
Clean syntax: Integration is ArkTS-native and fits ArkUI component structure.
Customizable axes: You can style x/y axis labels to match your app's design.

Use Cases

Displaying weekly temperature trends
Showing performance metrics
Tracking progress in fitness or finance apps

Conclusion

The @mcui/mccharts library makes it easy to implement fast and attractive charts in HarmonyOS apps using ArkTS. Whether you're visualizing sensor data or weekly stats, this library provides a straightforward way to bring dynamic visualizations into your app.

DEV Community