Hướng dẫn sử dụng biểu đồ đường (Line Chart) trong Android

Tổng quan

Biểu đồ đường (Line Chart) kết nối các điểm dữ liệu bằng đường thẳng, lý tưởng để thể hiện xu hướng theo thời gian (time series), biến thiên giá trị liên tục.

Các bước thực hiện

Bước 1: Tạo dự án mới

Android Studio → File → New Project → Empty Activity.

Bước 2-3: Cấu hình Gradle

Dependency MPAndroidChart + JitPack repository (giống các bài trước).

Bước 4: Layout với LineChart (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/lineChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Bước 5: MainActivity.java

package com.example.linechartexample;

import android.graphics.Color;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private LineChart lineChart;
    private LineData lineData;
    private LineDataSet lineDataSet;
    private ArrayList<Entry> lineEntries;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        lineChart = findViewById(R.id.lineChart);
        getEntries();

        lineDataSet = new LineDataSet(lineEntries, "Doanh thu (triệu VNĐ)");
        lineData = new LineData(lineDataSet);
        lineChart.setData(lineData);

        // Tùy chỉnh đường
        lineDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
        lineDataSet.setValueTextColor(Color.BLACK);
        lineDataSet.setValueTextSize(12f);
        lineDataSet.setLineWidth(2.5f);
        lineDataSet.setCircleRadius(5f);
        lineDataSet.setCircleColor(Color.WHITE);
        lineDataSet.setCircleHoleColor(ColorTemplate.getHoloBlue());
        lineDataSet.setDrawCircleHole(true);
        lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER); // Đường cong mượt
        lineDataSet.setDrawFilled(true);
        lineDataSet.setFillColor(ColorTemplate.getHoloBlue());
        lineDataSet.setFillAlpha(50);

        // Cấu hình chart
        lineChart.getDescription().setEnabled(false);
        lineChart.getXAxis().setPosition(com.github.mikephil.charting.components.XAxis.XAxisPosition.BOTTOM);
        lineChart.getXAxis().setGranularity(1f);
        lineChart.getAxisLeft().setAxisMinimum(0f);
        lineChart.animateX(1500);
    }

    private void getEntries() {
        lineEntries = new ArrayList<>();
        // Entry(x, y) - x: tháng (0-based), y: giá trị
        lineEntries.add(new Entry(0, 20f));
        lineEntries.add(new Entry(1, 40f));
        lineEntries.add(new Entry(2, 35f));
        lineEntries.add(new Entry(3, 60f));
        lineEntries.add(new Entry(4, 55f));
        lineEntries.add(new Entry(5, 70f));
        lineEntries.add(new Entry(6, 80f));
        lineEntries.add(new Entry(7, 75f));
        lineEntries.add(new Entry(8, 90f));
        lineEntries.add(new Entry(9, 85f));
        lineEntries.add(new Entry(10, 95f));
        lineEntries.add(new Entry(11, 100f));
    }
}

Tùy chỉnh quan trọng

• setMode(CUBIC_BEZIER): Đường cong mượt (smooth curve) thay vì gấp khúc
• setDrawFilled(true) + setFillAlpha(): Tô màu dưới đường
• setCircleHoleColor(): Màu lõi điểm tròn (donut style)
• getXAxis().setGranularity(1f): Buộc hiển thị nhãn mỗi 1 đơn vị X

Kết quả

Biểu đồ đường thể hiện xu hướng tăng dần qua 12 tháng, đường cong mượt, tô màu dưới đường.

Multiple Lines (nhiều đường)

LineDataSet ds1 = new LineDataSet(entries2023, "2023");
ds1.setColor(Color.RED);
LineDataSet ds2 = new LineDataSet(entries2024, "2024");
ds2.setColor(Color.BLUE);
LineData data = new LineData(ds1, ds2);
lineChart.setData(data);

Các loại Line Chart phổ biến