Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 77 additions & 0 deletions content/2.3.0/breaking-changes.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
# Breaking Changes

## charts-core

### Do I need to update call sites?
- No, if you already call `ChartViewDefaults.style(...)` and keep the default square chart area.
- Yes, if you want a non-square chart area; pass the new `modifierChart` argument.

### What changed
- `ChartViewDefaults.style(...)` now includes `modifierChart: Modifier` (default `Modifier.aspectRatio(1f)`) and threads it through `ChartViewStyle`.

### Migration (only if required)
```kotlin
// Before
val chartViewStyle = ChartViewDefaults.style()

// After
val chartViewStyle = ChartViewDefaults.style(
modifierChart = Modifier.aspectRatio(16f / 9f),
)
```

- Recommended: Prefer named arguments when calling style factory functions.

## charts-bar

### Do I need to update call sites?
- No, if you call `BarChartDefaults.style(...)` with named arguments only.
- Yes, if you pass `BarChartDefaults.style(...)` arguments positionally after `barColor`, or if you call internal `validateBarData(...)` directly.

### What changed
- `BarChartDefaults.style(...)` adds `barColors: List<Color> = emptyList()` immediately after `barColor`.
- `validateBarData(...)` now accepts `colorsSize` to validate `barColors` length against data points.

### Migration (only if required)
```kotlin
// Before
val barStyle = BarChartDefaults.style(
MaterialTheme.colorScheme.primary,
0.4f,
10.dp,
)

// After
val barStyle = BarChartDefaults.style(
barColor = MaterialTheme.colorScheme.primary,
barAlpha = 0.4f,
space = 10.dp,
)
```

- Recommended: Use named arguments for `BarChartDefaults.style(...)` to stay resilient to future parameter additions.

## charts-pie

### Do I need to update call sites?
- No, if you never passed `innerPadding` to `PieChartDefaults.style(...)`.
- Yes, if you previously passed `innerPadding`; move that value into `chartViewStyle`.

### What changed
- `PieChartDefaults.style(...)` removed `innerPadding`.
- Pie content padding now comes from `chartViewStyle.innerPadding`.

### Migration (only if required)
```kotlin
// Before
val pieStyle = PieChartDefaults.style(
innerPadding = 24.dp,
)

// After
val pieStyle = PieChartDefaults.style(
chartViewStyle = ChartViewDefaults.style(innerPadding = 24.dp),
)
```

- Recommended: Keep pie container spacing and chart-view spacing aligned through one `ChartViewStyle` instance.
Binary file added content/2.3.0/wiki/assets/bar_default.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added content/2.3.0/wiki/assets/demo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added content/2.3.0/wiki/assets/histogram_default.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added content/2.3.0/wiki/assets/line_default.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added content/2.3.0/wiki/assets/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added content/2.3.0/wiki/assets/multi_line_default.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added content/2.3.0/wiki/assets/pie_default.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added content/2.3.0/wiki/assets/radar_default.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
210 changes: 210 additions & 0 deletions content/2.3.0/wiki/examples.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
# Code Examples

### Pie

<div style="text-align: center; margin: 1rem 0 1.25rem;">
<img src="/content/{{version}}/wiki/assets/pie_default.gif" alt="Pie Demo" style="max-width: 360px; width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
</div>

```kotlin
@Composable
private fun ShowPie() {
val dataSet = listOf(32f, 21f, 24f, 14f, 9f).toChartDataSet(
title = "Household Energy",
postfix = "%",
labels = listOf("Heating", "Cooling", "Appliances", "Water Heating", "Lighting")
)

PieChart(dataSet)
}
```

### Line

<div style="text-align: center; margin: 1rem 0 1.25rem;">
<img src="/content/{{version}}/wiki/assets/line_default.gif" alt="Line Demo" style="max-width: 360px; width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
</div>

```kotlin
@Composable
private fun ShowLine() {
val dataSet = listOf(42f, 38f, 45f, 51f, 47f, 54f, 49f).toChartDataSet(
title = "Daily Support Tickets",
labels = listOf("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")
)

LineChart(dataSet)
}
```

### MultiLine

<div style="text-align: center; margin: 1rem 0 1.25rem;">
<img src="/content/{{version}}/wiki/assets/multi_line_default.gif" alt="MultiLine Demo" style="max-width: 360px; width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
</div>

```kotlin
@Composable
private fun ShowMultiLine() {
val items = listOf(
"Web Store" to listOf(420f, 510f, 480f, 530f, 560f, 590f),
"Mobile App" to listOf(360f, 420f, 410f, 460f, 500f, 540f),
"Partner Sales" to listOf(280f, 320f, 340f, 360f, 390f, 420f)
)

val dataSet = items.toMultiChartDataSet(
title = "Weekly Revenue by Channel",
prefix = "$",
categories = listOf("Week 1", "Week 2", "Week 3", "Week 4", "Week 5", "Week 6")
)

LineChart(dataSet)
}
```

### Bar

<div style="text-align: center; margin: 1rem 0 1.25rem;">
<img src="/content/{{version}}/wiki/assets/bar_default.gif" alt="Bar Demo" style="max-width: 360px; width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
</div>

```kotlin
@Composable
private fun ShowBar() {
val dataSet = listOf(45f, -12f, 38f, 27f, -19f, 42f, 31f).toChartDataSet(
title = "Daily Net Cash Flow",
labels = listOf("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")
)

BarChart(dataSet)
}
```

### Stacked Bar

<div style="text-align: center; margin: 1rem 0 1.25rem;">
<img src="/content/{{version}}/wiki/assets/stacked_bar_default.gif" alt="Stacked Bar Demo" style="max-width: 360px; width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
</div>

```kotlin
@Composable
private fun ShowStackedBar() {
val items = listOf(
"North America" to listOf(320f, 340f, 360f, 390f),
"Europe" to listOf(210f, 230f, 245f, 260f),
"Asia Pacific" to listOf(180f, 205f, 225f, 250f)
)

val dataSet = items.toMultiChartDataSet(
title = "Quarterly Revenue by Region",
prefix = "$",
categories = listOf("Q1", "Q2", "Q3", "Q4")
)

StackedBarChart(dataSet)
}
```

### Histogram

<div style="text-align: center; margin: 1rem 0 1.25rem;">
<img src="/content/{{version}}/wiki/assets/histogram_default.gif" alt="Histogram Demo" style="max-width: 360px; width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
</div>

```kotlin
@Composable
private fun ShowHistogram() {
val dataSet = listOf(3f, 6f, 11f, 16f, 14f, 9f, 5f).toChartDataSet(
title = "Request Duration Distribution",
labels = listOf("0-50ms", "50-100ms", "100-150ms", "150-200ms", "200-250ms", "250-300ms", "300ms+")
)

HistogramChart(dataSet)
}
```

### Stacked Area

<div style="text-align: center; margin: 1rem 0 1.25rem;">
<img src="/content/{{version}}/wiki/assets/stacked_area_default.gif" alt="Stacked Area Demo" style="max-width: 360px; width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
</div>

```kotlin
@Composable
private fun ShowStackedArea() {
val items = listOf(
"Free Plan" to listOf(620f, 650f, 690f, 720f, 760f, 800f),
"Standard Plan" to listOf(240f, 260f, 285f, 310f, 340f, 365f),
"Premium Plan" to listOf(90f, 95f, 105f, 118f, 130f, 142f)
)

val dataSet = items.toMultiChartDataSet(
title = "Monthly Active Subscribers by Plan",
categories = listOf("Jan", "Feb", "Mar", "Apr", "May", "Jun")
)

StackedAreaChart(dataSet)
}
```

### Radar

<div style="text-align: center; margin: 1rem 0 1.25rem;">
<img src="/content/{{version}}/wiki/assets/radar_default.gif" alt="Radar Demo" style="max-width: 360px; width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
</div>

```kotlin
@Composable
private fun ShowRadar() {
val categories = listOf(
"Performance",
"Reliability",
"Usability",
"Security",
"Scalability",
"Observability"
)

val dataSet = listOf(84f, 79f, 76f, 88f, 82f, 74f).toChartDataSet(
title = "Platform Readiness Score",
labels = categories
)

RadarChart(dataSet)
}
```


## Style Customization

To customize chart appearance, start from each chart's `*ChartDefaults.style(...)` factory and override only the fields you need.

```kotlin
@Composable
private fun ShowStyledBar() {
val dataSet = listOf(45f, -12f, 38f, 27f, -19f, 42f, 31f).toChartDataSet(
title = "Daily Net Cash Flow",
prefix = "$",
labels = listOf("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")
)

val style = BarChartDefaults.style(
barColor = Color(0xFF0F766E),
barAlpha = 0.78f,
space = 14.dp,
gridVisible = true,
gridSteps = 5,
gridColor = Color(0xFF94A3B8),
selectionLineColor = Color(0xFFEA580C),
yAxisLabelCount = 6,
chartViewStyle = ChartViewDefaults.style(
width = 340.dp,
cornerRadius = 18.dp,
shadow = 2.dp,
backgroundColor = Color(0xFFF8FAFC),
),
)

BarChart(dataSet = dataSet, style = style)
}
```
74 changes: 74 additions & 0 deletions content/2.3.0/wiki/getting-started.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
---
title: Setup
---

# Manual Setup

This guide will help you integrate the Charts library into your Kotlin Multiplatform project.

## Installation

Replace `<version>` with the latest release: [![Release](https://img.shields.io/maven-central/v/io.github.dautovicharis/charts.svg?label=Maven%20Central)](https://central.sonatype.com/artifact/io.github.dautovicharis/charts/overview)

### Repository
```kotlin
dependencyResolutionManagement {
repositories {
mavenCentral()
}
}
```

### Umbrella Dependency
```kotlin
commonMain.dependencies {
implementation("io.github.dautovicharis:charts:<version>")
}
```

### Modular Dependencies (Pick What You Need)
```kotlin
commonMain.dependencies {
implementation("io.github.dautovicharis:charts-line:<version>")
implementation("io.github.dautovicharis:charts-pie:<version>")
implementation("io.github.dautovicharis:charts-bar:<version>")
implementation("io.github.dautovicharis:charts-histogram:<version>")
implementation("io.github.dautovicharis:charts-stacked-bar:<version>")
implementation("io.github.dautovicharis:charts-stacked-area:<version>")
implementation("io.github.dautovicharis:charts-radar:<version>")
// Optional: add charts-core directly only if you need shared base APIs
implementation("io.github.dautovicharis:charts-core:<version>")
}
```

### BOM (Optional Version Alignment)
Use BOM where Gradle platforms are supported (for example JVM/Android module dependencies).
For KMP `commonMain`, keep explicit versions as shown above.

```kotlin
dependencies {
implementation(platform("io.github.dautovicharis:charts-bom:<version>"))
implementation("io.github.dautovicharis:charts-line")
implementation("io.github.dautovicharis:charts-pie")
implementation("io.github.dautovicharis:charts-bar")
implementation("io.github.dautovicharis:charts-histogram")
implementation("io.github.dautovicharis:charts-stacked-bar")
implementation("io.github.dautovicharis:charts-stacked-area")
implementation("io.github.dautovicharis:charts-radar")
}
```

### Snapshot Builds [![Snapshots](https://img.shields.io/maven-metadata/v?metadataUrl=https%3A%2F%2Fcentral.sonatype.com%2Frepository%2Fmaven-snapshots%2Fio%2Fgithub%2Fdautovicharis%2Fcharts%2Fmaven-metadata.xml&label=Snapshots&color=4285F4)](https://central.sonatype.com/repository/maven-snapshots/io/github/dautovicharis/charts/maven-metadata.xml)
Access the latest pre-release builds through the Sonatype snapshots repository. Snapshots contain the most recent features and fixes that haven't been officially released yet, allowing you to test upcoming functionality.
```kotlin
commonMain.dependencies {
implementation("io.github.dautovicharis:charts:<snapshot-version>")
}

dependencyResolutionManagement {
repositories {
// Sonatype Central Portal Snapshots (replaces old s01.oss.sonatype.org)
maven("https://central.sonatype.com/repository/maven-snapshots/")
}
}
```
20 changes: 20 additions & 0 deletions content/2.3.0/wiki/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<div style="text-align: center; margin-bottom: 20px;">
<img src="/content/{{version}}/wiki/assets/logo.png" alt="Charts Library Logo" style="max-width: 500px;">
</div>

# Charts {{versionLabel}}


<div style="text-align: center; margin: 2rem 0;">
<img src="/content/{{version}}/wiki/assets/demo.png" alt="Charts Demo" style="max-width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
</div>


## What's New in {{versionLabel}}


## Breaking Changes / Migration

Breaking changes and call-site migration details now live on a dedicated page:

- [Migration Guide](/{{version}}/wiki/migration)
3 changes: 3 additions & 0 deletions content/2.3.0/wiki/migration.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Migration Guide

This page summarizes snapshot breaking changes and how to migrate call sites safely. Use the module sections below to jump directly to impacted APIs.
Loading