DEV Community

HarmonyOS
HarmonyOS

Posted on

Visualizing Data in Visualizing Data in HarmonyOS with VChart and ArkTS

Read the original article：Visualizing Data in HarmonyOS with VChart 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 visactor/harmony-vchart package using ArkTS and ArkUI to create an interactive and stylish line chart.

Introduction

Creating clean, scalable, and interactive charts has become a core part of modern app development — whether for dashboards, analytics, or monitoring data. HarmonyOS NEXT empowers developers with ArkTS and powerful UI libraries to bring visual insights directly into the native experience.

In this guide, I’ll walk through how to use the @visactor/harmony-vchart library to build a customizable, interactive line chart in your HarmonyOS app using ArkTS. Whether you're building a finance app or real-time sensor dashboard, this approach gives you control, flexibility, and smooth performance.

Why VChart?

VChart is a high-performance charting library designed for flexible, interactive, and lightweight visualizations. The HarmonyOS-specific package (@visactor/harmony-vchart) allows us to embed charts directly into ArkTS apps without jumping to webviews or external rendering layers.

Installation

ohpm install @visactor/harmony-vchart
Enter fullscreen mode Exit fullscreen mode

Make sure you’re using HarmonyOS NEXT SDK with ArkTS support enabled in your project.

Import

import { VChart } from '@visactor/harmony-vchart';
Enter fullscreen mode Exit fullscreen mode

Setting Up the Chart Component

1. Define Your State and Chart Specification

@State spec: Record<string, string | ESObject> = {}
Enter fullscreen mode Exit fullscreen mode

Then define your chart config:

this.spec = {
  type: 'line',
  data: {
    values: this.chartData as ESObject
  },
  xField: ['name', 'type'],
  yField: 'value',
  seriesField: 'type',
  axes: [
    {
      orient: 'left',
      min: this.minMax.min,
      max: this.minMax.max,
      nice: true
    }
  ],
  line: {
    state: {
      aaa: {
        fill: 'red'
      } as ESObject
    },
    style: {
      stroke: Color.Black,
      lineWidth: 2
    } as ESObject
  },
  point: {
    style: {
      fill: 'black',
      stroke: 'black',
      size: 8
    } as ESObject
  },
  legends: {
    visible: true,
    position: 'start',
    orient: 'top'
  }
}
Enter fullscreen mode Exit fullscreen mode

2. Rendering the Chart

VChart({
  spec: this.spec,
  w: this.chartWidth,
  h: this.chartHeight,
  onChartInitCb: (vchart) => {
    return;
  },
  onChartReadyCb: (vchart) => {
    vchart.on('touchstart', { level: 'mark', type: 'bar' }, (e: Event) => {
      e.item.addState('aaa');
    });
  },
  initOption: {
    beforeRender: () => {
      // Can be used for timing/debug
    },
    afterRender: () => {
      // Measure render time or post-process
    }
  }
})
Enter fullscreen mode Exit fullscreen mode

Breakdown of Key Features

  • Interactivity: The onChartReadyCb callback lets you hook into events such as touchstart for chart elements.
  • Styling: Through line.style and point.style, you can fine-tune chart aesthetics.
  • Stateful Highlighting: Define states like aaa for interactive highlights or condition-based rendering.

Use Cases

  • Financial charts (price over time)
  • Fitness apps (steps or heart rate by day)
  • Monitoring dashboards (real-time sensor data)

Good Practices

  • Always scale your chart dynamically based on device width.
  • Use nice: true on axes for better value alignment.
  • Debounce event handlers if doing complex touch interactions.

Conclusion

Bringing VChart into your HarmonyOS ArkTS project opens up a world of possibilities for smooth, interactive, and elegant data visualization. Whether you’re building a dashboard, report view, or live analytics tool, this library will give you the flexibility and performance you need.

References

Vchart Demo

Written by Ali Anıl Toklu

Top comments (0)