{"id":13609440,"url":"https://github.com/ehsannarmani/ComposeCharts","last_synced_at":"2025-04-12T20:32:06.607Z","repository":{"id":241579347,"uuid":"805278796","full_name":"ehsannarmani/ComposeCharts","owner":"ehsannarmani","description":"Animated \u0026 Flexible Practical Charts For Jetpack Compose","archived":false,"fork":false,"pushed_at":"2024-05-28T13:34:51.000Z","size":51262,"stargazers_count":40,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-05-29T05:23:53.174Z","etag":null,"topics":["android","android-chart","android-charts","chart","chart-android","chart-library","compose-charts","jetpack-compose","jetpack-compose-charts"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ehsannarmani.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-24T08:43:30.000Z","updated_at":"2024-05-29T05:23:56.701Z","dependencies_parsed_at":"2024-05-29T05:38:56.746Z","dependency_job_id":null,"html_url":"https://github.com/ehsannarmani/ComposeCharts","commit_stats":null,"previous_names":["ehsannarmani/composecharts"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsannarmani%2FComposeCharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsannarmani%2FComposeCharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsannarmani%2FComposeCharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsannarmani%2FComposeCharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ehsannarmani","download_url":"https://codeload.github.com/ehsannarmani/ComposeCharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248629773,"owners_count":21136310,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-chart","android-charts","chart","chart-android","chart-library","compose-charts","jetpack-compose","jetpack-compose-charts"],"created_at":"2024-08-01T19:01:34.947Z","updated_at":"2025-04-12T20:32:01.597Z","avatar_url":"https://github.com/ehsannarmani.png","language":"Kotlin","funding_links":[],"categories":["Kotlin"],"sub_categories":[],"readme":"\u003ch1\u003eCompose Charts\u003c/h1\u003e\n\n![banner](https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/banner.png?raw=true)\n![mockup](https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/mokup.png?raw=true)\n\n![Kotlin](https://img.shields.io/badge/Kotlin-2.0.0-orange)\n[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://www.apache.org/licenses/LICENSE-2.0)\n[![Kotlin Multiplatform](https://img.shields.io/badge/Kotlin-Multiplatform-blue)](https://kotlinlang.org/docs/reference/multiplatform.html)\n\n![Platform](https://img.shields.io/badge/Android-3aab58)\n![Platform](https://img.shields.io/badge/Desktop-097cd5)\n![Platform](https://img.shields.io/badge/IOS-d32408)\n![Platform](https://img.shields.io/badge/WasmJS-f7e025)\n\n## Table of Contents\n\n- [Gradle Setup](#gradle-setup)\n- [All Charts](#all-charts)\n- [Examples](#examples)\n  - [Pie Chart](#pie-chart)\n  - [Row Chart](#row-chart)\n  - [Column Chart](#column-chart)\n  - [Line Chart](#line-chart)\n- [Animation Mode](#animation-mode)\n- [Chart Properties](#chart-properties)\n  - [Bars](#bars-barproperties)\n  - [Dots](#dots-dotproperties)\n  - [Indicators](#indicators-indicatorproperties)\n  - [Grid Lines](#grid-lines-gridproperties)\n  - [Axis](#axis-axisproperties)\n  - [Dividers](#dividers-dividerproperties)\n  - [Lines](#line-lineproperties)\n  - [Labels](#labels-labelproperties)\n  - [Label Helpers](#label-helpers-labelhelperproperties)\n  - [Popups](#popups-popupproperties)\n\n### Gradle Setup\n\n[![Maven Central](https://img.shields.io/maven-central/v/io.github.ehsannarmani/compose-charts?color=4caf50\u0026label=Latest%20Release\u0026v=9)](https://central.sonatype.com/artifact/io.github.ehsannarmani/compose-charts/overview)\n```gradle\ndependencies {\n    implementation (\"io.github.ehsannarmani:compose-charts:latest_version\")\n}\n```\n\u003e [!NOTE]\n\u003e We migrated to maven central repository in 0.0.5v, so if you want to access previous versions of library, see [this](https://github.com/ehsannarmani/ComposeCharts/tree/0.0.4).\n\n### All Charts:\n![mockup](https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/full_chart.png?raw=true)\n\n## Examples:\n\n### Pie Chart:\n\u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/pie1.gif?raw=true\" width=\"300\"\u003e\n\n```kotlin\nPieChart(\n   modifier = Modifier.size(200.dp),\n   data = listOf(\n      Pie(label = \"Android\",data = 20.0, color = Color.Red, selectedColor = Color.Green),\n      Pie(label = \"Windows\",data = 45.0, color = Color.Cyan, selectedColor = Color.Blue),\n      Pie(label = \"Linux\",data = 35.0, color = Color.Gray, selectedColor = Color.Yellow),\n   ),\n   onPieClick = {\n       println(\"${it.label} Clicked\")\n       val pieIndex = data.indexOf(it)\n       data = data.mapIndexed { mapIndex, pie -\u003e pie.copy(selected = pieIndex == mapIndex) }\n   },\n   selectedScale = 1.2f,\n   scaleAnimEnterSpec = spring\u003cFloat\u003e(\n       dampingRatio = Spring.DampingRatioMediumBouncy,\n       stiffness = Spring.StiffnessLow\n   ),\n   colorAnimEnterSpec = tween(300),\n   colorAnimExitSpec = tween(300),\n   scaleAnimExitSpec = tween(300),\n   spaceDegreeAnimExitSpec = tween(300),\n   style = Pie.Style.Fill\n)\n```\n\n\u003e [!NOTE]\n\u003e You can change chart style to stroke:\n\n\u003cdiv\u003e\n   \u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/pie2.gif?raw=true\" width=\"300\"\u003e\n   \u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/pie3.gif?raw=true\" width=\"300\"\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n```kotlin\nPieChart(\n   ...,\n   spaceDegree = 7f,\n   selectedPaddingDegree = 4f,\n   style = Pie.Style.Stroke(width = 100f)\n)\n```\n\n\u003chr/\u003e\n\n### Column Chart:\n\u003cdiv\u003e\n   \u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/column1.gif?raw=true\" width=\"300\"\u003e\n   \u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/column2.gif?raw=true\" width=\"300\"\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n```kotlin\nColumnChart(\n    modifier= Modifier.fillMaxSize().padding(horizontal = 22.dp),\n    data = listOf(\n        Bars(\n            label = \"Jan\",\n            values = listOf(\n               Bars.Data(label = \"Linux\", value = 50.0, color = Brush.verticalGradient(...)),\n               Bars.Data(label = \"Windows\", value = 70.0, color = SolidColor(Color.Red)),\n            )\n        ),\n        Bars(\n            label = \"Feb\",\n            values = listOf(\n               Bars.Data(label = \"Linux\", value = 80.0, color = Brush.verticalGradient(...)),\n               Bars.Data(label = \"Windows\", value = 60.0, color = SolidColor(Color.Red)),\n            )\n        ),\n        ...\n    ),\n    barProperties = BarProperties(\n        radius = Bars.Data.Radius.Rectangle(topRight = 6.dp, topLeft = 6.dp),\n        spacing = 3.dp,\n        strokeWidth = 20.dp\n    ),\n    animationSpec = spring(\n        dampingRatio = Spring.DampingRatioMediumBouncy,\n        stiffness = Spring.StiffnessLow\n    ),\n)\n```\n\n\u003e [!NOTE]\n\u003e You can set how many data you want for every bar:\n\n\u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/column3.gif?raw=true\" width=\"300\"\u003e\n\n```kotlin\nColumnChart(\n    data = listOf(\n        Bars(\n            label = \"1\", values = listOf(\n               Bars.Data(value = 10.0, color = Color.Blue)\n            )\n        ),\n        Bars(\n            label = \"2\", values = listOf(\n               Bars.Data(value = 20.0, color = Color.Blue)\n            )\n        ),\n        ...\n    ),\n    barProperties = BarProperties(\n        spacing = 1.dp,\n        strokeWidth = 10.dp,\n    ),\n    ...\n)\n```\n\n\u003e [!TIP]\n\u003e You can set negative values for this chart and define max value and min value:\n\n\u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/column_negative.gif?raw=true\" width=\"250\"\u003e\n\n#### Example:\n\n```kotlin\nColumnChart(\n    data = listOf(\n        Bars(\n            label = \"1\", values = listOf(\n               Bars.Data(value = -40.0, color = Color.Blue)\n            )\n        ),\n        Bars(\n            label = \"2\", values = listOf(\n               Bars.Data(value = 50.0, color = Color.Blue)\n            )\n        ),\n        ...\n    ),\n    maxValue = 75.0,\n    minValue = -75.0\n    ...\n)\n```\n\n\u003e [!NOTE]\n\u003e By default, max value is the highest value of given data, min value is 0 when there is no value under the zero in given data, otherwise if there is value under zero, min value will be (-maxValue)\n\n\n\u003chr/\u003e\n\n### Row Chart:\n\u003cdiv\u003e\n   \u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/row1.gif?raw=true\" width=\"250\"\u003e\n   \u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/row2.gif?raw=true\" width=\"250\"\u003e\n   \u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/row3.gif?raw=true\" width=\"250\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n\n```kotlin\nRowChart(\n    modifier= Modifier.fillMaxSize().padding(horizontal = 22.dp),\n    data = listOf(\n        Bars(\n            label = \"Jan\",\n            values = listOf(\n               Bars.Data(label = \"Linux\", value = 50.0, color = Brush.verticalGradient(...)),\n               Bars.Data(label = \"Windows\", value = 70.0, color = SolidColor(Color.Red)),\n            )\n        ),\n        Bars(\n            label = \"Feb\",\n            values = listOf(\n               Bars.Data(label = \"Linux\", value = 80.0, color = Brush.verticalGradient(...)),\n               Bars.Data(label = \"Windows\", value = 60.0, color = SolidColor(Color.Red)),\n            )\n        ),\n        ...\n    ),\n    barProperties = BarProperties(\n        radius = Bars.Data.Radius.Rectangle(topRight = 6.dp, topLeft = 6.dp),\n        spacing = 3.dp,\n        strokeWidth = 20.dp\n    ),\n    animationSpec = spring(\n        dampingRatio = Spring.DampingRatioMediumBouncy,\n        stiffness = Spring.StiffnessLow\n    ),\n)\n```\n\n\u003e [!TIP]\n\u003e You can set negative values for this chart and define max value and min value:\n\n\u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/row_negative.gif?raw=true\" width=\"250\"\u003e\n\n#### Example:\n\n```kotlin\nRowChart(\n    data = listOf(\n        Bars(\n            label = \"1\", values = listOf(\n               Bars.Data(value = -40.0, color = Color.Blue)\n            )\n        ),\n        Bars(\n            label = \"2\", values = listOf(\n               Bars.Data(value = 50.0, color = Color.Blue)\n            )\n        ),\n        ...\n    ),\n    maxValue = 75.0,\n    minValue = -75.0\n    ...\n)\n```\n\n\u003e [!NOTE]\n\u003e By default, max value is the highest value of given data, min value is 0 when there is no value under the zero in given data, otherwise if there is value under zero, min value will be (-maxValue)\n\n\n\u003chr/\u003e\n\n### Line Chart:\n\u003cdiv\u003e\n   \u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/line2.gif?raw=true\" width=\"250\"\u003e\n   \u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/line8.gif?raw=true\" width=\"250\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n```kotlin\nLineChart(\n    modifier = Modifier.fillMaxSize().padding(horizontal = 22.dp),\n    data = listOf(\n         Line(\n            label = \"Windows\",\n            values = listOf(28.0,41.0,5.0,10.0,35.0),\n            color = SolidColor(Color(0xFF23af92)),\n            firstGradientFillColor = Color(0xFF2BC0A1).copy(alpha = .5f),\n            secondGradientFillColor = Color.Transparent,\n            strokeAnimationSpec = tween(2000, easing = EaseInOutCubic),\n            gradientAnimationDelay = 1000,\n            drawStyle = DrawStyle.Stroke(width = 2.dp),\n         )\n    ),\n    animationMode = AnimationMode.Together(delayBuilder = {\n        it * 500L\n    }),\n)\n```\n\u003chr/\u003e\n\n\u003e [!NOTE]\n\u003e You can set min \u0026 max value for all charts and show zero line:\n\n\u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/zero_line.gif?raw=true\" width=\"250\"\u003e\n\n#### Example:\n\n```kotlin\nLineChart(\n    data = listOf(\n         Line(\n            label = \"Temperature\",\n            values = listOf(28.0,41.0,-5.0,10.0,35.0),\n            color = Brush.radialGradient(...),\n            ...\n         )\n    ),\n    ...,\n    zeroLineProperties = LineProperties(\n        enabled = true,\n        color = SolidColor(Color.Red),\n    ),\n    minValue = -20.0,\n    maxValue = 100.0\n)\n```\n\u003e Max value by default is highest value of chart data and Min value is 0 when there is no value under the zero, otherwise it's the lowest data.\n\n\u003chr/\u003e\n\n\u003e [!NOTE]\n\u003e You can set gradient color for lines:\n\n\u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/line7.gif?raw=true\" width=\"250\"\u003e\n\n```kotlin\nLineChart(\n    data = listOf(\n         Line(\n            label = \"Linux\",\n            values = listOf(28.0,41.0,5.0,10.0,35.0),\n            color = Brush.radialGradient(...),\n            ...\n         )\n    ),\n    ...\n)\n```\n\u003chr/\u003e\n\n\u003e [!NOTE]\n\u003e You can add how many lines you want:\n\n\u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/line1.gif?raw=true\" width=\"250\"\u003e\n\n```kotlin\nLineChart(\n    data = listOf(\n         Line(\n            label = \"Windows\",\n            values = listOf(...),\n            color = Color.Green,\n            curvedEdges = true\n         ),\n         Line(\n            label = \"Linux\",\n            values = listOf(...),\n            color = Color.Orange,\n            curvedEdges = false\n         ),\n         Line(\n            label = \"Linux\",\n            values = listOf(...),\n            color = Color.Blue,\n            curvedEdges = true\n         ),\n    ),\n    ...\n)\n```\n\n\u003e [!NOTE]\n\u003e You can show dots and disable line edge curving:\n\n\u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/line3.gif?raw=true\" width=\"250\"\u003e\n\n```kotlin\nLineChart(\n    data = listOf(\n         Line(\n            label = \"Windows\",\n            values = listOf(...),\n            color = Color.Orange,\n            curvedEdges = true,\n            dotProperties = DotProperties(\n                enabled = true,\n                color = SolidColor(Color.White),\n                strokeWidth = 4f,\n                radius = 7f,\n                strokeColor = SolidColor(Color.Orange),\n            )\n         ),\n         Line(\n            label = \"Linux\",\n            values = listOf(...),\n            color = Color.Cyan,\n            curvedEdges = false,\n            dotProperties = DotProperties(\n               ...\n            )\n         ),\n    ),\n    curvedEdges = false\n)\n```\n\u003chr/\u003e\n\n\u003e [!NOTE]\n\u003e You can make chart line dashed:\n\n\u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/line6.gif?raw=true\" width=\"250\"\u003e\n\n```kotlin\nLineChart(\n    data = listOf(\n         Line(\n            label = \"Windows\",\n            values = listOf(...),\n            drawStyle = DrawStyle.Stroke(\n                width = 3.dp,\n                strokeStyle = StrokeStyle.Dashed(intervals = floatArrayOf(10f,10f), phase = 15f)\n            )\n            ...\n         ),\n         Line(\n            label = \"Linux\",\n            values = listOf(...),\n            ...\n         ),\n    ),\n)\n```\n\u003chr/\u003e\n\n\u003e [!NOTE]\n\u003e You can make chart fill color:\n\n\u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/charts/line9.gif?raw=true\" width=\"250\"\u003e\n\n```kotlin\nLineChart(\n    data = listOf(\n         Line(\n            label = \"Windows\",\n            values = listOf(...),\n            color = Color.Orange,\n            drawStyle = DrawStyle.Fill,\n            ...\n         ),\n    ),\n)\n```\n\u003chr/\u003e\n\n## Animation Mode:\n#### In Row/Column/Line charts you can set running animations at the same time types:\n| Mode              | Description |\n|-------------------|--------------|\n| `OneByOne`        | Animations will run one by one, for example in line charts, lines will be drawn after previous line animation finished.      |\n| `Together`        | By default, animations will run async, but you can set delay for next animations    | \n\n#### Example:\n```kotlin\nLineChart(\n   ...,\n   animationMode = AnimationMode.OneByOne\n)\n\nLineChart(\n   ...,\n   animationMode = AnimationMode.Together(delayBuilder = { index-\u003e index*200 })\n)\n```\n\u003e [!NOTE]\n\u003e In the last example, every animation will be start 200ms after previous animations start.\n\n\u003chr/\u003e\n\n## Chart Properties:\n\n### Bars: `BarProperties`\n\u003e Usage: In Column/Row Charts you can set bar properties with this property\n\n| Property       | Type             | Default               | Description         |\n|----------------|------------------|-----------------------|---------------------|\n| `thickness`    | Dp               | `20`                    | specifies bar width \n| `spacing`      | Dp               | `4`                     | specifies space between data bars when you have more than one bar in a data \n| `cornerRadius` | Bars.Data.Radius | `Bars.Data.Radius.None` | specifies space between data bars when you have more than one bar in a data \n| `style`        | DrawStyle        | `DrawStyle.Fill`        | specifies bar style \n\n#### Example:\n```kotlin\nval barProperties = BarProperties(\n   thickness = 15.dp,\n   spacing = 4.dp,\n   cornerRadius = Bars.Data.Radius.Circular(6.dp),\n   style = DrawStyle.Fill\n)\n```\n\u003chr/\u003e\n\n### Dots: `DotProperties`\n\u003e Usage: In Line Charts you can set data dot shape properties with this property\n\n| Property           | Type                 | Default                      | Description         |\n|--------------------|----------------------|------------------------------|---------------------|\n| `enabled`          | Boolean              | `false`                        | specifies dots visibility \n| `radius`           | Float                | `10f`                          | specifies dot size \n| `color`            | Brush                |` SolidColor(Color.Unspecified) `| specifies dot color \n| `strokeWidth`      | Float                | `3f`                           | specifies dot stroke width\n| `strokeColor`      | Brush                |` SolidColor(Color.Unspecified) `| specifies dot stroke color\n| `strokeStyle`      | StrokeStyle          | `StrokeStyle.Normal`           | specifies dot stroke style\n| `animationEnabled` | Boolean              | `true`                         | set `false` if you want to show dots without delay and animation\n| `animationSpec`    | AnimationSpec\u003cFloat\u003e |`tween(300)`| specifies dots visibility animation spec\n\n#### Example:\n```kotlin\nval dotProperties = DotProperties(\n   enabled = true,\n   radius = 10f,\n   color = SolidColor(Color.Red),\n   strokeWidth = 3f,\n   strokeColor = Color.White,\n   strokeStyle = StrokeStyle.Normal,\n   animationEnabled = true,\n   animationSpec = tween(500)\n)\n```\n\u003chr/\u003e\n\n### Indicators: `IndicatorProperties`\n\u003e Usage: In every chart you can set properties of counters next to the chart\n\n| Property         | Type               | Default                 | Description                                                                                                      |\n|------------------|--------------------|-------------------------|------------------------------------------------------------------------------------------------------------------|\n| `enabled`        | Boolean            | `true`                  | specifies indicator visiblity                                                                                    \n| `textStyle`      | TextStyle          | `TextStyle.Default`     | specifies counter style                                                                                          \n| `count`          | Int                | `4`                     | specifies counters count                                                                                         \n| `position`       | IndicatorPosition  | `Depends on chart`      | specifies indicator position, in line \u0026 column charts can be: start or end, in line charts can be: top or bottom \n| `padding`        | Dp                 | `12`                    | specifies indicator area padding with chart area                                                                 \n| `contentBuilder` | (Double) -\u003e String | `{ \"%.2f\".format(it) }` | specifies counter content creation template                                                                      \n\n#### Example For Column/Line Charts:\n```kotlin\nval indicatorProperties = HorizontalIndicatorProperties(\n   enabled = true,\n   textStyle = MaterialTheme.typography.labelSmall,\n   count = 5,\n  position = IndicatorPosition.Horizontal.End,\n  padding = 32.dp,\n   contentBuilder = { indicator-\u003e\n        \"%.2f\".format(indicator)+\" Million\"\n   }\n)\n```\n\n#### Example For Row Charts:\n\n```kotlin\nval indicatorProperties = VerticalIndicatorProperties(\n  enabled = true,\n  textStyle = MaterialTheme.typography.labelSmall,\n  count = 5,\n  position = IndicatorPosition.Vertical.Top,\n  padding = 32.dp,\n  contentBuilder = { indicator -\u003e\n    \"%.2f\".format(indicator) + \" Million\"\n  }\n)\n```\n\n\u003chr/\u003e\n\n### Grid Lines: `GridProperties`\n\u003e Usage: In every chart you can set properties of grid lines\n\n| Property          | Type           | Default              | Description         |\n|-------------------|----------------|----------------------|---------------------|\n| `enabled`         | Boolean        | `true`               | specifies grid lines visibility \n| `xAxisProperties` | AxisProperties | `AxisProperties(..)` | specifies grid horizontal lines properties \n| `yAxisProperties` | AxisProperties | `AxisProperties(..)` | specifies grid vertical lines properties \n\n#### Example:\n```kotlin\nval gridProperties = GridProperties(\n   enabled = true,\n   xAxisProperties = AxisProperties(\n      ...\n   ),\n   yAxisProperties = AxisProperties(\n      ...\n   )\n)\n```\n\u003chr/\u003e\n\n### Axis: `AxisProperties`\n\n| Property    | Type        | Default              | Description         |\n|-------------|-------------|----------------------|---------------------|\n| `enabled`   | Boolean     | `true`               | specifies axis line visibility \n| `style`     | StrokeStyle | `StrokeStyle.Normal` | specifies axis line style \n| `color`     | Color       | `Color.Gray`         | specifies axis line color \n| `thickness` | Dp          | `(0.5).dp`           | specifies axis line stroke width\n| `lineCount` | Int         | `5`                  | specifies count of axis lines\n\n#### Example:\n```kotlin\nval axisProperties = AxisProperties(\n   enabled = true,\n   style = StrokeStyle.Dashed(intervals = floatArrayOf(10f,10f)),\n   color = Color.Gray,\n   thickness = (.5).dp,\n   lineCount = 5\n)\n```\n\u003chr/\u003e\n\n### Dividers: `DividerProperties`\n\u003e Usage: In every chart you can set properties of dividers between labels and chart, indicators and chart\n\n| Property          | Type            | Default              | Description         |\n|-------------------|-----------------|----------------------|---------------------|\n| `enabled`         | Boolean         | `true`               | specifies dividers visibility \n| `xAxisProperties` | LineProperties  | `LineProperties(..)` | specifies horizontal divider properties \n| `yAxisProperties` | LineProperties  | `LineProperties(..)` | specifies vertical divider properties \n\n#### Example:\n```kotlin\nval dividerProperties = DividerProperties(\n   enabled = true,\n   xAxisProperties = LineProperties(\n      ...\n   ),\n   yAxisProperties = LineProperties(\n      ...\n   )\n)\n```\n### Line: `LineProperties`\n\n| Property    | Type        | Default              | Description         |\n|-------------|-------------|----------------------|---------------------|\n| `enabled`   | Boolean     | `true`               | specifies axis line visibility \n| `style`     | StrokeStyle | `StrokeStyle.Normal` | specifies axis line style \n| `color`     | Color       | `Color.Gray`         | specifies axis line color \n| `thickness` | Dp          | `(0.5).dp`           | specifies axis line stroke width\n\n#### Example:\n```kotlin\nval lineProperties = LineProperties(\n   enabled = true,\n   style = StrokeStyle.Dashed(intervals = floatArrayOf(10f,10f)),\n   color = Color.Gray,\n   thickness = (.5).dp,\n)\n```\n\u003chr/\u003e\n\n### Labels: `LabelProperties`\n\u003e Usage: In every chart you can set properties of the labels (Apr, Jan, ...)\n\n| Property                       | Type         | Default             | Description                                                        |\n|--------------------------------|--------------|---------------------|--------------------------------------------------------------------|\n| `enabled`                      | Boolean      | `true`              | specifies labels visibility                                        \n| `textStyle`                    | TextStyle    | `TextStyle.Default` | specifies label textStyle                                          \n| `verticalPadding`              | Dp           | `12.dp`             | specifies vertical padding of labels area                          \n| `labels`                       | List\u003cString\u003e | `emptyList()`       | In line charts, specifies chart labels                             \n| `rotationDegreeOnSizeConflict` | Float        | `-45`               | rotation degree of label on size confilict with other labels (See) \n\n\u003e [!NOTE]\n\u003e Example of label rotation degree\n\n\u003cimg src=\"https://github.com/ehsannarmani/ComposeCharts/blob/master/assets/rotation_degree_sample.png?raw=true\" width=\"300\"\u003e\n\n#### Example:\n```kotlin\nval labelProperties = LabelProperties(\n   enabled = true,\n   textStyle = MaterialTheme.typography.labelSmall,\n   verticalPadding = 16.dp,\n   labels = listOf(\"Apr\",\"Mar\",...)\n)\n```\n\n\u003chr/\u003e\n\n### Label Helpers: `LabelHelperProperties`\n\u003e Usage: In every chart you can set properties of the labels helper which positioned in top of chart\n\n| Property          | Type         | Default             | Description                 |\n|-------------------|--------------|---------------------|-----------------------------|\n| `enabled`         | Boolean      | `true`              | specifies label helpers visibility \n| `textStyle`       | TextStyle    | `TextStyle.Default` | specifies label helper textStyle\n\n#### Example:\n```kotlin\nval labelHelperProperties = LabelHelperProperties(\n   enabled = true,\n   textStyle = MaterialTheme.typography.labelMedium\n)\n```\n\n\u003chr/\u003e\n\n### Popups: `PopupProperties`\n\u003e Usage: In every chart you can set properties of popup which shown when user click or drag on chart\n\n\u003e [!NOTE]\n\u003e In line charts your can set specific popup properties for each line, for example you can disable one of lines popup\n\u003e and e.g.\n\n| Property                   | Type                 | Default                 | Description                                                        |\n|----------------------------|----------------------|-------------------------|--------------------------------------------------------------------|\n| `enabled`                  | Boolean              | `true`                  | specifies popup visibility                                         \n| `animationSpec`            | AnimationSpec\u003cFloat\u003e | `tween(400)`            | specifies popup visibility animation spec                          \n| `duration`                 | Long                 | `1500`                  | in column/row charts, specifies how long the popup will be visible \n| `textStyle`                | TextStyle            | `TextStyle.Default`     | specifies popup text style                                         \n| `containerColor`           | Color                | `Color(0xff313131)`     | specifies popup background color                                   \n| `cornerRadius`             | Dp                   | `6.dp`                  | specifies popup corner radius                                      \n| `contentHorizontalPadding` | Dp                   | `4.dp`                  | specifies popup horizontal padding                                 \n| `contentVerticalPadding`   | Dp                   | `2.dp`                  | specifies popup vertical padding                                   \n| `contentBuilder`           | (Double)-\u003eString     | `{ \"%.2f\".format(it) }` | specifies popup content creation template                          \n\n#### Example:\n```kotlin\nval popupProperties = PopupProperties(\n   enabled = true,\n   animationSpec = tween(300),\n   duration = 2000L,\n   textStyle = MaterialTheme.typography.labelSmall,\n   containerColor = Color.White,\n   cornerRadius = 8.dp,\n   contentHorizontalPadding = 4.dp,\n   contentVerticalPadding = 2.dp,\n   contentBuilder = { value-\u003e\n      \"%.1f\".format(value)+\"Million\"\n   }\n)\n```\n\n\u003chr/\u003e\n\n## Todos:\n1. [ ] Add Candle Stick Chart\n2. [ ] Add Circle Progress Chart\n3. [x] MultiPlatform Support\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fehsannarmani%2FComposeCharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fehsannarmani%2FComposeCharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fehsannarmani%2FComposeCharts/lists"}