{"id":20878904,"url":"https://github.com/codeandtheory/kmm-ycharts","last_synced_at":"2026-03-05T12:32:36.050Z","repository":{"id":184171765,"uuid":"665836682","full_name":"codeandtheory/kmm-ycharts","owner":"codeandtheory","description":"Cross platform repository","archived":false,"fork":false,"pushed_at":"2023-08-08T09:40:19.000Z","size":34367,"stargazers_count":7,"open_issues_count":1,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-05T14:42:27.752Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/codeandtheory.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":"CODEOWNERS","security":null,"support":null,"governance":null}},"created_at":"2023-07-13T05:47:33.000Z","updated_at":"2025-05-06T15:20:59.000Z","dependencies_parsed_at":"2023-07-27T10:59:19.888Z","dependency_job_id":"5c9c97c0-84d2-4e22-b05a-674e391e90af","html_url":"https://github.com/codeandtheory/kmm-ycharts","commit_stats":null,"previous_names":["yml-org/kmm-ycharts","codeandtheory/kmm-ycharts"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codeandtheory/kmm-ycharts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeandtheory%2Fkmm-ycharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeandtheory%2Fkmm-ycharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeandtheory%2Fkmm-ycharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeandtheory%2Fkmm-ycharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codeandtheory","download_url":"https://codeload.github.com/codeandtheory/kmm-ycharts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeandtheory%2Fkmm-ycharts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30124468,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T11:11:57.947Z","status":"ssl_error","status_checked_at":"2026-03-05T11:11:29.001Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-11-18T07:14:35.525Z","updated_at":"2026-03-05T12:32:36.032Z","avatar_url":"https://github.com/codeandtheory.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# KMM-YCharts\n\nYCharts is a light and extensible chart library for Jetpack Compose system. It comprises two main modules:\n\n-   `YChartslib` (Chart components for Jetpack Compose)\n-   `app` (sample app to showcase chart components)\n\n## Adding YCharts to your project:\n\nYou can add automatically the library via Maven:\n\n\n\n## Modules\n\nThe following table outlines the modules included in this library:\n\n| Artifact         | Description                                                                                            |\n|------------------|--------------------------------------------------------------------------------------------------------|\n| `axis`           | Includes the horizontal and vertical axis components along with the math engines.                      |\n| `charts`         | Includes the all the chart components i.e: Line, Bar, Combined, Pie \u0026 Donut etc. also the math engines |\n| `chartcontainer` | Provides the base container to draw any chart inside it with scroll tap feature etc out of the box.    |\n| `piechart`       | Includes all the 360' chart components i.e Pie, Donut charts etc.                                      |\n\n## Sample app\n\nIncluded in this repository is a [sample app](https://github.com/yml-org/YCharts/tree/main/app) with multiple charts with different styling in each section. Studying the source code of the app will give you a deep understanding of how to use YCharts, including customizing and styling the charts. All of the charts i.e line, bar, groupedBar, pie \u0026 donut are implemented in the sample app.\n\n## Basic example\n\nLet's see how we can use the chart components and style them with available customization options.\n\n1. **Line Chart:**\n   * Create list of points with x \u0026 y co-ordinates using `Point` data class.\n   ```\n   val pointsData: List\u003cPoint\u003e =\n        listOf(Point(0f, 40f), Point(1f, 90f), Point(2f, 0f), Point(3f, 60f), Point(4f, 10f))\n   ```\n   * Initialize X and Y Axis builders using the `AxisData` data class.\n   ```\n      val xAxisData = AxisData.Builder()\n        .axisStepSize(100.dp)\n        .steps(pointsData.size - 1)\n        .labelData { i -\u003e i.toString() }\n        .labelAndAxisLinePadding(15.dp)\n        .build()\n      \n     val yAxisData = AxisData.Builder()\n        .steps(steps)\n        .labelAndAxisLinePadding(20.dp)\n        .labelData { i -\u003e\n            val yScale = 100 / steps\n            (i * yScale).formatToSinglePrecision()\n        }.build()\n   ```\n   * Initialize the Line chart data with axis and other line related styling using `LineChartData` data class.\n   ```\n   val lineChartData = LineChartData(\n        linePlotData = LinePlotData(\n            lines = listOf(\n                Line(\n                    dataPoints = pointsData,\n                    LineStyle(),\n                    IntersectionPoint(),\n                    SelectionHighlightPoint(),\n                    ShadowUnderLine(),\n                    SelectionHighlightPopUp()\n                )\n            ),\n        ),\n        xAxisData = xAxisData,\n        yAxisData = yAxisData,\n        gridLines = GridLines()\n    )\n   ```\n   * Finally use the _**`LineChart`**_ Component to render the line chart with the above input\n     params.\n   ``` \n   LineChart(\n        modifier = Modifier\n            .fillMaxWidth()\n            .height(300.dp),\n        lineChartData = lineChartData\n    )\n   ```\n   \u003cfigure\u003e\n   \u003cdiv align = \"center\"\u003e\n    \u003cimg width=317 src=\"https://user-images.githubusercontent.com/107846675/189699724-c8064338-8894-45e2-b60b-3d830123e813.png\" /\u003e\n    \u003cp\u003e Line chart looks like this!\u003c/p\u003e\n    \u003c/div\u003e\n    \u003c/figure\u003e\n\n2. **Bar Chart:**\n   * Create list of barChartData using the random generator extension and  `BarData` data class\n\n     ```\n     val barChartData = DataUtils.getBarChartData(barChartListSize, maxRange)\n     ```\n\n   * Initialize X and Y Axis builders using the `AxisData` data class.\n   ```\n        val xAxisData = AxisData.Builder()\n        .axisStepSize(30.dp)\n        .steps(barChartData.size - 1)\n        .bottomPadding(40.dp)\n        .axisLabelAngle(20f)\n        .labelData { index -\u003e barData[index].label }\n        .build()\n      \n     val yAxisData = AxisData.Builder()\n        .steps(yStepSize)\n        .labelAndAxisLinePadding(20.dp)\n        .axisOffset(20.dp)\n        .labelData { index -\u003e (index * (maxRange / yStepSize)).toString() }\n        .build()\n   ```\n   * Initialize the Bar chart data with axis and other line related styling using `BarChartData`\n     data class.\n   ```\n    val barChartData = BarChartData(\n        chartData = barChartData,\n        xAxisData = xAxisData,\n        yAxisData = yAxisData,\n        paddingBetweenBars = 20.dp,\n        barWidth = 25.dp\n    )\n   ```\n   * Last, use the _**`BarChart`**_ Component to render the bar chart with the above input params.\n   ``` \n   BarChart(modifier = Modifier.height(350.dp), barChartData = barChartData)\n   ```\n   \u003cfigure\u003e\n   \u003cdiv align = \"center\"\u003e\n    \u003cimg width=347 src=\"https://user-images.githubusercontent.com/107846675/189836621-eeac8181-f7de-491e-8fd8-7e1276e2fb9f.png\" /\u003e\n    \u003cp\u003e Bar chart looks like this!\u003c/p\u003e\n    \u003c/div\u003e\n    \u003c/figure\u003e\n\n3. **Grouped Bar Chart:**\n   * Create list of grouped combinations of bar chart data using the random generator extension\n     and  `BarPlotData` data class\n\n     ```\n        val groupBarPlotData = BarPlotData(\n                        groupBarList = DataUtils.getGroupBarChartData(\n                            barChartListSize,\n                            maxRange,\n                            eachGroupBarSize\n                        ),\n                        barColorPaletteList = getColorPaletteList(barSize)\n                    )\n     ```\n\n   * Initialize X and Y Axis builders using the `AxisData` data class.\n   ```\n           val xAxisData = AxisData.Builder()\n               .axisStepSize(30.dp)\n               .steps(groupBarData.size - 1)\n               .bottomPadding(40.dp)\n               .labelData { index -\u003e groupBarData[index].label }\n               .build()\n      \n    val yAxisData = AxisData.Builder()\n               .steps(yStepSize)\n               .labelAndAxisLinePadding(20.dp)\n               .axisOffset(20.dp)\n               .labelData { index -\u003e (index * (maxRange / yStepSize)).toString() }\n               .build()\n   ```\n   * Initialize the group bar chart data with axis and other line related styling\n     using `GroupBarChartData`\n     data class.\n   ```\n      val groupBarChartData = GroupBarChartData(\n                        barPlotData = groupBarPlotData,\n                        xAxisData = xAxisData,\n                        yAxisData = yAxisData\n                    )\n   ```\n   * Use the _**`GroupBarChart`**_ Component to render the bar chart with the above input params.\n   ``` \n   GroupBarChart(modifier = Modifier.height(300.dp), groupBarChartData = groupBarChartData)\n   ```\n   \u003cfigure\u003e\n   \u003cdiv align = \"center\"\u003e\n    \u003cimg width=338 src=\"https://user-images.githubusercontent.com/107846675/189845009-6ef2ccc6-3c75-446e-9273-fe1b1e1e94d0.png\" /\u003e\n    \u003cp\u003e Grouped Bar chart looks like this!\u003c/p\u003e\n    \u003c/div\u003e\n    \u003c/figure\u003e\n\n4. **Pie Chart:**\n   * Create list of slices using the `PieChartData` data class.\n\n    ```\n       val pieChartData = PieChartData(\n        slices = listOf(\n            PieChartData.Slice(\"SciFi\", 65f, Color(0xFF333333)),\n            PieChartData.Slice(\"Comedy\", 35f, Color(0xFF666a86)),\n            PieChartData.Slice(\"Drama\", 10f, Color(0xFF95B8D1)),\n            PieChartData.Slice(\"Romance\", 40f, Color(0xFFF53844))\n        )\n      )\n     ```\n\n   * Initialize the pie chart config with `PieChartConfig` data class inorder to achieve styling and\n     configurations related to pie chart\n    ```\n      val pieChartConfig = PieChartConfig(\n        percentVisible = true,\n        isAnimationEnable = true,\n        showSliceLabels = false,\n        animationDuration = 1500\n    )\n   ```\n   * Finally, use the _**`PieChart`**_ component to render the chart.\n   ```  \n   PieChart(modifier = Modifier\n            .width(400.dp)\n            .height(400.dp),\n        pieChartData,\n        pieChartConfig\n    ) \n   ```\n     \u003cfigure\u003e\n   \u003cdiv align = \"center\"\u003e\n    \u003cimg width=238 src=\"https://user-images.githubusercontent.com/107846675/189865767-377f3b12-1568-46c9-a248-6454ed9bb96e.png\" /\u003e\n    \u003cp\u003e  Pie chart looks like this!\u003c/p\u003e\n    \u003c/div\u003e\n    \u003c/figure\u003e\n\n5. **Donut Chart:**\n   * Similar to pie chart here we need create list of slices using the `PieChartData` data class.\n\n    ```\n        val donutChartData = PieChartData(\n        slices = listOf(\n            PieChartData.Slice(\"HP\", 15f, Color(0xFF5F0A87)),\n            PieChartData.Slice(\"Dell\", 30f, Color(0xFF20BF55)),\n            PieChartData.Slice(\"Lenovo\", 40f,  Color(0xFFEC9F05)),\n            PieChartData.Slice(\"Asus\", 10f, Color(0xFFF53844))\n        )\n      )\n     ```\n   * Initialize the pie chart config with `PieChartConfig` data class inorder to achieve styling and\n     configurations related to pie chart\n    ```\n    val donutChartConfig = PieChartConfig(\n        percentVisible = true,\n        percentageFontSize = 42.sp,\n        strokeWidth = 120f,\n        percentColor = Color.Black,\n        activeSliceAlpha = .9f,\n        isAnimationEnable = true\n    )\n   ```\n   * Finally, use the _**`DonutPieChart`**_ component to render the chart.\n   ```  \n   DonutPieChart( modifier = Modifier\n            .fillMaxWidth()\n            .height(500.dp),\n        donutChartData,\n        donutChartConfig\n    ) \n   ```\n     \u003cfigure\u003e\n   \u003cdiv align = \"center\"\u003e\n    \u003cimg width=233 src=\"https://user-images.githubusercontent.com/107846675/189868490-cbaecf87-2beb-4788-ba8e-f57b667cbf10.png\" /\u003e\n    \u003cp\u003e  Donut chart looks like this!\u003c/p\u003e\n    \u003c/div\u003e\n    \u003c/figure\u003e    \n    \n6. **Combined Chart:**\n\n   * Similar to line and bar chart we can combine both entities in one chart, just need  to initialize the line and bar plot data using the random generator extension and add styling related to individual component.\n\n    ```\n      val linePlotData = LinePlotData(\n          lines = listOf(\n            Line(\n                DataUtils.getLineChartData(listSize, maxRange = 100),\n                lineStyle = LineStyle(color = Color.Blue),\n                intersectionPoint = IntersectionPoint(),\n                selectionHighlightPoint = SelectionHighlightPoint(),\n                selectionHighlightPopUp = SelectionHighlightPopUp()\n            ),\n            Line(\n                DataUtils.getLineChartData(listSize, maxRange),\n                lineStyle = LineStyle(color = Color.Black),\n                intersectionPoint = IntersectionPoint(),\n                selectionHighlightPoint = SelectionHighlightPoint(),\n                selectionHighlightPopUp = SelectionHighlightPopUp()\n            )\n        )\n    )\n    \n    val barPlotData = BarPlotData(\n        groupBarList = DataUtils.getGroupBarChartData(listSize, maxValueRange, barSize),\n        barStyle = BarStyle(barWidth = 35.dp),\n        barColorPaletteList = colorPaletteList\n     )\n    ```\n\n * Initialize X and Y Axis builders using the `AxisData` data class.\n\n     ```\n    val xAxisData = AxisData.Builder()\n       .axisStepSize(30.dp)\n       .steps(maxOf(barChartData.size - 1, lineChartData.size - 1))\n       .bottomPadding(40.dp)\n       .labelData { index -\u003e index.toString() }\n       .build()\n   val yAxisData = AxisData.Builder()\n       .steps(yStepSize)\n       .labelAndAxisLinePadding(20.dp)\n       .axisOffset(20.dp)\n       .labelData { index -\u003e (index * (maxRange / yStepSize)).toString() }\n       .build()\n       \n     ```\n     \n   * Initialize the combined chart config data with `CombinedChartData` data class inorder to achieve styling and configurations related to same.\n       ```\n  val combinedChartData = CombinedChartData(\n        combinedPlotDataList = listOf(barPlotData, linePlotData),\n        xAxisData = xAxisData,\n        yAxisData = yAxisData\n    )\n     ```\n   * Finally, use the _**`CombinedChart`**_ component to render the chart.\n      ```  \n     CombinedChart(\n            modifier = Modifier.height(400.dp),\n            combinedCharthData = combinedChartData\n        )\n     ```\n    _Note_ : To show legends infomartion related to bar, `Legends` component can be used.\n   \u003cfigure\u003e\n  \u003cdiv align = \"center\"\u003e\n   \u003cimg width=292 src=\"https://user-images.githubusercontent.com/107846675/192773924-74421edd-7314-4b44-bdb1-13aaf3598796.png\" /\u003e\n   \u003cp\u003e  Combined bar with line chart looks like this!\u003c/p\u003e\n   \u003c/div\u003e\n   \u003c/figure\u003e\n\u003cbr\u003e\n\n## Accessibility Support\nTo interact with your device with touch and spoken feedback, you can turn on the TalkBack screen reader. TalkBack describes the graphs/charts when tapped on the graph container.\nCompose views by deafult supports accessibility services, but for views drawn using canvas has no straight forward approach as of now, hence all our graph components supports an accessibility popup out of the box that will be shown over the graph with tapped on the container, with all the values described in an order to support accessibility services. User will be able to scroll the popup and find all the points, bars, slices or combined values in a descriptive manner, where user can tap and talkback would read it out loud.\n\n\n\u003cfigure\u003e\n\u003cdiv align = \"center\"\u003e\n   \u003cspan align = \"center\" style  = \"display:inline-block\"\u003e\n    \u003cimg width=250 src=\"https://user-images.githubusercontent.com/107846675/195833801-24e17e52-d3cd-45e1-9d3e-1d9bab4b0e22.png\" /\u003e\n    \u003cp\u003e fig (a)\u003c/p\u003e\n    \u003c/span\u003e\n    \u003cspan align = \"center\"  style = \"display:inline-block; padding-left:30px\"\u003e\n      \u003cimg width= 250 src=\"https://user-images.githubusercontent.com/107846675/195833551-28f21bdb-a035-4858-832c-a9a0c4dc9927.png\" /\u003e\n    \u003cp\u003e fig (b)\u003c/p\u003e\n    \u003c/span\u003e\n    \u003c/div\u003e\n\u003c/figure\u003e\nHere fig(a) represents the line graph with the container being highlighted \u0026 fig(b) represents the accessibility sheet with all values laid out in detail so that talkback can describe the graph values.\u003cbr\u003e\u003cbr\u003e\n*Note*: All the descriptions that are visible in the accessibility popup can be customized to the required string.\n\n## License\n\n```\n    Copyright 2022 YCharts\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n        http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeandtheory%2Fkmm-ycharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeandtheory%2Fkmm-ycharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeandtheory%2Fkmm-ycharts/lists"}