# Charts (ChartView)

> चार्ट — लाइन, एरिया, बार, स्टैक्ड बार/एरिया, पाई, डोनट और कॉम्बो — एक साझा रेंडर कोर के साथ।

Source: https://crossfly.dev/hi/docs/ui/widgets/chartview — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Charts (ChartView + subclasses)

`dev.crossfly.ui.chart` मॉड्यूल में एक **साझा रेंडर कोर** (`ChartView`, जो
`Component` का विस्तार करता है) और **8 ठोस उपवर्ग** हैं जो अनुशंसित प्रवेश बिंदु हैं — प्रत्येक
प्रकार को पूर्व-कॉन्फ़िगर करता है और एर्गोनोमिक fluent मेथड्स प्रदान करता है:

| वर्ग | प्रकार | डेटा कैसे जोड़ता है |
|---|---|---|
| `LineChart` | लाइन | `.withSeries(nome, valores[, cor])` |
| `AreaChart` | भरे हुए क्षेत्र वाली लाइन (`LineChart` का विस्तार करता है) | `.withSeries(...)` · `.areaOpacity(int)` |
| `BarChart` | समूहित बार | `.withSeries(...)` |
| `StackedBarChart` | स्टैक्ड बार | `.series(nome, valores[, cor])` |
| `StackedAreaChart` | स्टैक्ड एरिया (ग्रेडिएंट) | `.series(...)` · `.areaOpacity(int)` |
| `PieChart` | पाई | `.slice(nome, valor[, cor])` |
| `DonutChart` | डोनट | `.slice(...)` · `.hole(float)` |
| `ComboChart` | बार + लाइन (द्वितीयक Y अक्ष) | `.addBarSeries(...)` · `.addLineSeries(...)` |

> 🟡 · **पैकेज:** `dev.crossfly.ui.chart` · **विस्तार करता है:** `Component` · **शैली:** `ComponentStyle`
>
> ⚠️ **2026 पुनर्नामकरण:** पुराने वर्ग `LineChartView`/`BarChartView`/`PieChartView`/
> `DonutChartView`/`ComboChartView` को `LineChart`/`BarChart`/`PieChart`/
> `DonutChart`/`ComboChart` में **पुनर्नामित** किया गया (`View` प्रत्यय हटाया गया)। और पाई/डोनट अब **`slice(...)`** का उपयोग करते हैं (न कि
> `withSlice`)।

## कब उपयोग करें
- श्रेणी के अनुसार रुझान (लाइन/एरिया), परिमाण (बार), समय के साथ संरचना (स्टैक्ड),
  किसी पूरे का अनुपात (पाई/डोनट), या परिमाण + दर एक साथ (कॉम्बो)।

## कब उपयोग न करें
- मनमाने X के साथ XY डिस्पर्शन, 3D या स्पीडोमीटर → समर्थित नहीं। मुक्त-हस्त ड्रॉइंग → [`whiteboard`](/docs/ui/widgets/whiteboard)।

## संपूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)
CrossFly में आप **एक `Window` वर्ग** लिखते हैं (मुख्य स्क्रीन) — `Main` और launcher
**प्लेटफ़ॉर्म का boilerplate** हैं। launcher को इस वर्ग की ओर इंगित करें (`classname` पैरामीटर) और
`gradlew :lwjgl3:run` चलाएँ:
```java
package com.exemplo;

import dev.crossfly.ui.*;          // Window, Component, LAY_FILL…
import dev.crossfly.ui.layout.*;   // VerticalLayout
import dev.crossfly.ui.chart.*;    // ChartView, LineChart…

/**
 * निष्पादन योग्य मुख्य स्क्रीन। launcher को इस क्लास (classname) पर सेट करें
 * और चलाएं: gradlew :lwjgl3:run
 */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      LineChart line = new LineChart();
      line.withSeries("Revenue", new double[]{42, 55, 51, 68, 73, 88}, 0xFF42A5F5)
          .withSeries("Target",  new double[]{40, 50, 56, 60, 70, 82}, 0xFFAB47BC);
      line.title("Receita por mês");
      line.categories(new String[]{"Jan", "Feb", "Mar", "Apr", "May", "Jun"});
      line.smooth(true);            // Catmull-Rom
      line.yAxis(0, 100, 5);         // स्थिर Y रेंज (या autoYAxis())

      add(LAY_FILL, line);
   }
}
```

> नीचे दिए गए स्निपेट **केवल मूल भाग** दिखाते हैं (जो `onShow()` के अंदर जाता है), ताकि फ़ीचर पर ध्यान केंद्रित रहे।
> चलाने के लिए, मूल भाग को ऊपर दिए `MainWindow` कंकाल के अंदर रखें।

## बुनियादी उपयोग (उपवर्ग के अनुसार — अनुशंसित)
```java
LineChart line = new LineChart();
line.withSeries("Revenue", new double[]{42, 55, 51, 68, 73, 88}, 0xFF42A5F5)
    .withSeries("Target",  new double[]{40, 50, 56, 60, 70, 82}, 0xFFAB47BC);
line.title("Receita por mês");
line.categories(new String[]{"Jan", "Feb", "Mar", "Apr", "May", "Jun"});
line.smooth(true);                       // Catmull-Rom
line.yAxis(0, 100, 5);                    // स्थिर Y रेंज (या autoYAxis())
add(LAY_FILL, line);
```

### बार और स्टैक्ड बार
```java
BarChart bar = new BarChart();
bar.withSeries("North", new double[]{120, 140, 138, 165}, 0xFF5C6BC0)
   .withSeries("South", new double[]{95, 110, 123, 131}, 0xFF26C6DA);
bar.title("Vendas trimestrais").categories(new String[]{"Q1", "Q2", "Q3", "Q4"});

StackedBarChart stacked = new StackedBarChart();
stacked.series("Direct",  new double[]{6.2, 13.7, 19.9, 8}, 0xFF1976D2)
       .series("Mail Ad", new double[]{18.2, 11, 8, 17.8}, 0xFF81C784);
stacked.yAxis(0, 100, 5);
```

### एरिया और स्टैक्ड एरिया
```java
AreaChart area = new AreaChart();
area.withSeries("Load", new double[]{180, 260, 210, 300, 280}, 0xFF26C6DA);
area.areaOpacity(110);                    // भराव का alpha 0–255

StackedAreaChart sarea = new StackedAreaChart();
sarea.series("Line 1", new double[]{140, 232, 101, 264}, 0xFF6DDB92)
     .series("Line 2", new double[]{120, 282, 111, 234}, 0xFF00D4FF);
sarea.areaOpacity(210);
sarea.decimals = 0;                        // फाइन-ट्यूनिंग के लिए सार्वजनिक फील्ड
```

### पाई और डोनट
```java
PieChart pie = new PieChart();
pie.slice("Organic", 38, 0xFF42A5F5)
   .slice("Paid",    24, 0xFFAB47BC)
   .slice("Social",  20, 0xFF26A69A);
pie.title("Fontes de tráfego");

DonutChart donut = new DonutChart();
donut.slice("Organic", 38).slice("Paid", 24).slice("Social", 20)
     .hole(0.58f);                          // छेद की त्रिज्या [0..0.95]
```

### कॉम्बो (द्वितीयक अक्ष पर बार + लाइन)
```java
ComboChart combo = new ComboChart();
combo.addBarSeries("Sessions",     new double[]{1000, 1250, 1180, 1340}, 0xFF90CAF9)
     .addLineSeries("Conversion %", new double[]{2.8, 3.1, 2.9, 3.4}, 0xFF1E88E5);  // दायां Y अक्ष
combo.title("Conversão x Sessões").yAxis(0, 1600, 8);
```

## डेटा मॉडल
- **`ChartView.Series`** (कार्तीय): `new Series(nome, double[] valores[, cor])`; fluent `.line()` /
  `.bar()` `renderMode` परिभाषित करते हैं (कॉम्बो में उपयोग होता है)।
- **`ChartView.PieSlice`** (रेडियल): `new PieSlice(nome, double valor[, cor])`।
- **रंग `0` = स्वचालित** (`DEFAULT_COLORS` पैलेट, 9 रंग)। स्थिर रंग के लिए ARGB **alpha के साथ** उपयोग करें (`0xFF…`)।

## कॉन्फ़िगरेशन (सार्वजनिक फ़ील्ड + fluent)
| सदस्य | प्रकार | डिफ़ॉल्ट | क्या करता है |
|---|---|---|---|
| `title(String)` · `categories(String[])` | fluente | — | शीर्षक / X अक्ष के लेबल |
| `yAxis(min, max, steps)` · `autoYAxis()` | fluente | auto | Y अक्ष की सीमा |
| `smooth(bool)` / `smoothLines` | fluente/campo | `false` | Catmull-Rom इंटरपोलेशन |
| `area(bool)` / `showArea` | fluente/campo | `false` | लाइन के नीचे का क्षेत्र भरता है |
| `areaOpacity(int)` / `areaAlpha` | fluente/campo | `0x55` | भराव का alpha (0–255) |
| `showLegend`/`showGrid`/`showTitle`/`showPoints`/`showValues` | campo | `true` | प्रदर्शन फ़्लैग |
| `decimals` | campo | `2` | लेबल/tooltip में दशमलव स्थान |
| `axisColor`/`axisTextColor`/`legendTextColor`/`gridColor` | campo | थीम | रंग (ARGB) |
| `pointRadius`/`lineThickness`/`barInnerGap`/`splineSteps` | campo | — | ड्रॉइंग का सूक्ष्म समायोजन |
| `donutHoleRatio` / `hole(float)` | campo/fluente | `0.56` | डोनट का छेद |
| `enableHoverSelection`/`enableInteractionAnimations` | campo | `true` | hover से चयन / हाइलाइट एनिमेशन |

> **सार्वजनिक फ़ील्ड** को किसी fluent मेथड के बाहर बदलने के बाद, `repaint()` कॉल करें।

## कॉलबैक और अवस्थाएँ
- **`onAction(Action)`** **चयन बदलने** पर ट्रिगर होता है (बिंदु/बार/स्लाइस) — `runActions()` के माध्यम से।
  `selectedSeries`+`selectedIndex` (कार्तीय) या `selectedSlice` (रेडियल) पढ़ें; `-1` = कुछ नहीं।
- इंटरैक्शन `onTouchUp` (निकटतम को चुनता है) और `onHover` (कर्सर के नीचे हाइलाइट करता है) के माध्यम से। कोई `onClick` नहीं है।

## शैली
किसी भी `Component` की तरह: `chart.getStyle().backColor(...)`/`borderColor(...)`; साझा वाले को बदले बिना
व्युत्पन्न करने के लिए `.copy()` का उपयोग करें:
```java
chart.style(chart.getStyle().copy().backColor(0xFFFFFFFF).borderColor(0xFFE0E0E0));
```

## अच्छे तरीके
- कच्चे `ChartView` की जगह **ठोस उपवर्ग** (`LineChart`, `BarChart`…) को प्राथमिकता दें — fluent मेथड्स
  अधिक स्पष्ट हैं।
- कार्तीय `series`/`withSeries` का उपयोग करता है; रेडियल `slices`/`slice` का — एक ही प्रकार में मिश्रण न करें।
- स्थिर अक्षों के लिए `yAxis(min,max,steps)` तय करें (स्वचालित मोड शून्य शामिल करता है और "समतल" कर सकता है)।

## सामान्य गलतियाँ
- **पुराने नाम** `LineChartView`/`PieChartView`… (पुनर्नामित) या **`withSlice`** (अब `slice`) का उपयोग करना।
- काले की अपेक्षा में `0x00…` रंग पास करना: `0` "स्वचालित" है और alpha `00` अदृश्य है — `0xFF000000` का उपयोग करें।
- `onClick` की अपेक्षा करना: इंटरैक्शन चयन/hover द्वारा ट्रिगर किए गए `onAction` के माध्यम से है।

## यह भी देखें
- [`ui/`](/docs/ui) · [`cookbook/`](/docs/cookbook) · [`whiteboard`](/docs/ui/widgets/whiteboard)