Simple Android compose charts.

Taras Koshkin

Last update: Dec 31, 2022

Related tags

Overview

Compose Charts

This is an exploratory playground library to figure out how to Draw and animate using Android Jetpack Compose library. Currently this is using 1.0.1 library.

[] (https://jitpack.io/#tehras/charts)

How it looks:

How to use Pie Chart:

@Composable
fun MyChartParent() {
    PieChart(
        pieChartData = PieChartData(listOf(Slice(...), Slice(...),....)),
        // Optional properties.
        modifier = Modifier.fillMaxSize(),
        animation = simpleChartAnimation(),
        sliceDrawer = SimpleSliceDrawer()
    )
}

How to use Bar Chart:

@Composable
fun MyBarChartParent() {
    fun BarChart(
        barChartData = BarChartData(bars = listOf(Bar(label = "Bar Label", value = 100f, color = Color.Red)),
        // Optional properties.
        modifier = Modifier.fillMaxSize(),
        animation = simpleChartAnimation(),
        barDrawer = SimpleBarDrawer(),
        xAxisDrawer = SimpleXAxisDrawer(),
        yAxisDrawer = SimpleYAxisDrawer(),
        labelDrawer = SimpleValueDrawer()
    ) 
}

How to use Line Chart:

@Composable
fun MyLineChartParent() {
    LineChart(
        lineChartData = LineChartData(points = listOf(LineChartData.Point(1f,"Label 1"), ...)),
        // Optional properties.
        modifier = Modifier.fillMaxSize(),
        animation = simpleChartAnimation(),
        pointDrawer = FilledCircularPointDrawer(),
        lineDrawer = SolidLineDrawer(),
        xAxisDrawer = SimpleXAxisDrawer(),
        yAxisDrawer = SimpleYAxisDrawer(),
        horizontalOffset = 5f
    )
}

License

Copyright 2020 Taras Koshkin.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Comments

compose chart for desktop in intelliJ IDEA

Please help me for add implementation for compose chart desktop in my project intelliJ. I want to add charts(bar & pie) to compose desktop project.

opened by momeni1367 2

Unable to integrate this library in my Compose Desktop project

Hello,

I am looking for a library to display graphics in my Compose Desktop application. I came across yours, so I tried to integrate it as shown here.

But when I run the gradle runDistributable task, I get this error:

Execution failed for task ':compileKotlin'.
> Could not resolve all files for configuration ':compileClasspath'.
   > Could not find com.github.tehras:charts:Tag.
     Searched in the following locations:
       - https://repo.maven.apache.org/maven2/com/github/tehras/charts/Tag/charts-Tag.pom
       - https://maven.pkg.jetbrains.space/public/p/compose/dev/com/github/tehras/charts/Tag/charts-Tag.pom
       - https://jitpack.io/com/github/tehras/charts/Tag/charts-Tag.pom
       - https://dl.google.com/dl/android/maven2/com/github/tehras/charts/Tag/charts-Tag.pom
     Required by:
         project :

Possible solution:
 - Declare repository providing the artifact, see the documentation at https://docs.gradle.org/current/userguide/declaring_repositories.html

Here is my build.gradle.kts:

import org.jetbrains.compose.compose
import org.jetbrains.compose.desktop.application.dsl.TargetFormat
import org.jetbrains.kotlin.gradle.tasks.KotlinCompile

plugins {
    kotlin("jvm") version "1.5.21"
    id("org.jetbrains.compose") version "1.0.0-alpha4-build310"
}

group = "fr.genie23"
version = "1.0.0"

repositories {
    mavenCentral()
    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
    maven("https://jitpack.io")
    google()
}

dependencies {
    implementation("org.jetbrains.kotlin:kotlin-reflect:1.5.21")
    implementation(compose.desktop.currentOs)
    implementation("com.github.tehras:charts:Tag")
    implementation("org.apache.pdfbox:pdfbox:2.0.24")
    implementation("org.apache.pdfbox:fontbox:2.0.24")
    implementation("org.apache.pdfbox:jempbox:1.8.16")
    implementation("org.apache.pdfbox:xmpbox:2.0.24")
    implementation("org.apache.pdfbox:preflight:2.0.24")
    implementation("org.apache.pdfbox:pdfbox-tools:2.0.24")
    implementation("org.bouncycastle:bcprov-jdk15on:1.69")
    implementation("org.bouncycastle:bcmail-jdk15on:1.69")
    implementation("org.bouncycastle:bcpkix-jdk15on:1.69")
}

tasks.withType<KotlinCompile> {
    kotlinOptions.jvmTarget = "11"
}

tasks.withType<KotlinCompile>().configureEach {
    kotlinOptions.freeCompilerArgs += "-Xopt-in=kotlin.RequiresOptIn"
}

tasks.register<Copy>("copyRelease") {
    group = "compose desktop"
    description = "Copy release builded executable into out folder."
    duplicatesStrategy = DuplicatesStrategy.INCLUDE
    from(
        "build/compose/binaries/main/deb",
        "build/compose/binaries/main/dmg",
        "build/compose/binaries/main/exe",
        "build/compose/binaries/main/rpm"
    )
    into("out")
}

compose.desktop {
    application {
        mainClass = "MainKt"
        nativeDistributions {
            packageName = "Free CoManagement"
            description = "Logiciel de fusion de documents PDF"
            targetFormats(TargetFormat.Dmg, TargetFormat.Exe, TargetFormat.Deb, TargetFormat.Rpm)
            windows {
                iconFile.set(project.file("src/main/resources/icons/logo.64x64.ico"))
                dirChooser = true
                menuGroup = "Genie23.fr"
            }
            macOS {
                iconFile.set(project.file("src/main/resources/icons/logo.64x64.icns"))
            }
            linux {
                iconFile.set(project.file("src/main/resources/icons/logo.64x64.png"))
                menuGroup = "Genie23.fr"
            }
        }
    }
}

opened by Genie23 2

Update to Compose 1.0.0-alpha03 and Kotlin 1.4.10

This brings the repo up to date with the latest Compose version.

The app runs on the emulator and looks just like how it did before upgrading so I think this is ok.

opened by chadmorrow 2
Not able to add this library to project

I have been trying to add this library to my project and getting below error at the time of syncing the library. My project's Compose version is 1.0.0 and tehra's charts version used in my project is alpha-0.12.0

org.gradle.internal.resolve.ModuleVersionNotFoundException: Cannot resolve external dependency org.jetbrains.kotlin:kotlin-scripting-compiler-embeddable:1.5.10 because no repositories are defined.

opened by anilreddy-insert 1
Filled line charts

Just an idea. I was trying to make my own charts in compose and took some inspiration from this library. I actually implemented a Line chart with a custom fill color/gradient. Is that something you have planned? Or I can try working on this with your library. This is how my chart looks (custom gradient fill with a dashed line):-

Though note that I am not allowing an x offset (only y offset within the lines) in my chart. So I am not sure how to handle the fill with an x offset (as you have in your example).

opened by yashovardhan99 1
Update compose to 1.0.0-alpha11

I've also updated Koltin version to 1.4.21-2 as this is required for 1.0.0-alpha11. I've also replaced the occurrences of onCommit, which is now deprecated, with DisposableEffect where appropriate. The Image composeable also now requires a contentDescription so I've added a basic description for all of them.

opened by vanpra 1

Offset is unspecified exception

java.lang.IllegalStateException: Offset is unspecified
at androidx.compose.ui.geometry.Offset.getX-impl(Offset.kt:67)
at com.github.tehras.charts.line.LineChartUtils$calculateLinePath$1$1$1.invoke(LineChartUtils.kt:127)
at com.github.tehras.charts.line.LineChartUtils$calculateLinePath$1$1$1.invoke(LineChartUtils.kt:114)
at com.github.tehras.charts.line.LineChartUtils.withProgress(LineChartUtils.kt:103)
at com.github.tehras.charts.line.LineChartUtils.calculateLinePath(LineChartUtils.kt:114)
at com.github.tehras.charts.line.LineChartKt.drawLine(LineChart.kt:152)
at com.github.tehras.charts.line.LineChartKt.access$drawLine(LineChart.kt:1)
at com.github.tehras.charts.line.LineChartKt$LineChart$6.invoke(LineChart.kt:124)
at com.github.tehras.charts.line.LineChartKt$LineChart$6.invoke(LineChart.kt:71)
at androidx.compose.ui.draw.DrawBackgroundModifier.draw(DrawModifier.kt:104)
at androidx.compose.ui.node.BackwardsCompatNode.draw(BackwardsCompatNode.kt:381)
at androidx.compose.ui.node.LayoutNodeDrawScope.draw-x_KDEd0$ui_release(LayoutNodeDrawScope.kt:92)
at androidx.compose.ui.node.NodeCoordinator.drawContainedDrawModifiers(NodeCoordinator.kt:371)
at androidx.compose.ui.node.NodeCoordinator.draw(NodeCoordinator.kt:360)
at androidx.compose.ui.node.LayoutModifierNodeCoordinator.performDraw(LayoutModifierNodeCoordinator.kt:236)
at androidx.compose.ui.node.NodeCoordinator.drawContainedDrawModifiers(NodeCoordinator.kt:368)
at androidx.compose.ui.node.NodeCoordinator.draw(NodeCoordinator.kt:360)
at androidx.compose.ui.node.LayoutModifierNodeCoordinator.performDraw(LayoutModifierNodeCoordinator.kt:236)
at androidx.compose.ui.node.NodeCoordinator.drawContainedDrawModifiers(NodeCoordinator.kt:368)
at androidx.compose.ui.node.NodeCoordinator.draw(NodeCoordinator.kt:360)
at androidx.compose.ui.node.LayoutModifierNodeCoordinator.performDraw(LayoutModifierNodeCoordinator.kt:236)
at androidx.compose.ui.node.NodeCoordinator.drawContainedDrawModifiers(NodeCoordinator.kt:368)
at androidx.compose.ui.node.NodeCoordinator.draw(NodeCoordinator.kt:360)
at androidx.compose.ui.node.LayoutModifierNodeCoordinator.performDraw(LayoutModifierNodeCoordinator.kt:236)
at androidx.compose.ui.node.NodeCoordinator.drawContainedDrawModifiers(NodeCoordinator.kt:368)
at androidx.compose.ui.node.NodeCoordinator.draw(NodeCoordinator.kt:360)
at androidx.compose.ui.node.LayoutNode.draw$ui_release(LayoutNode.kt:840)
at androidx.compose.ui.node.InnerNodeCoordinator.performDraw(InnerNodeCoordinator.kt:151)
at androidx.compose.ui.node.NodeCoordinator.drawContainedDrawModifiers(NodeCoordinator.kt:368)
at androidx.compose.ui.node.NodeCoordinator.draw(NodeCoordinator.kt:360)
at androidx.compose.ui.node.LayoutNode.draw$ui_release(LayoutNode.kt:840)
at androidx.compose.ui.node.InnerNodeCoordinator.performDraw(InnerNodeCoordinator.kt:151)
at androidx.compose.ui.node.NodeCoordinator.drawContainedDrawModifiers(NodeCoordinator.kt:368)
at androidx.compose.ui.node.NodeCoordinator.access$drawContainedDrawModifiers(NodeCoordinator.kt:58)
at androidx.compose.ui.node.NodeCoordinator$invoke$1.invoke(NodeCoordinator.kt:397)
at androidx.compose.ui.node.NodeCoordinator$invoke$1.invoke(NodeCoordinator.kt:396)
at androidx.compose.runtime.snapshots.Snapshot$Companion.observe(Snapshot.kt:2139)
at androidx.compose.runtime.snapshots.SnapshotStateObserver$observeReads$1$1.invoke(SnapshotStateObserver.kt:130)
at androidx.compose.runtime.snapshots.SnapshotStateObserver$observeReads$1$1.invoke(SnapshotStateObserver.kt:126)
at androidx.compose.runtime.SnapshotStateKt__DerivedStateKt.observeDerivedStateRecalculations(DerivedState.kt:341)
at androidx.compose.runtime.SnapshotStateKt.observeDerivedStateRecalculations(Unknown Source:1)
at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:126)

opened by GabrielGircenko 0

Applied Abraham's PRs, updated README and fixed few issues

@tehras please add me as a maintainer and I will help you update this repository. If this PR is open when other's see it, go to my fork because I enabled it as a dependency and will continue to maintain it for everyone to use it.

opened by GabrielGircenko 0
App: Fix hardcoded colors

Some buttons used hardcoded black borders. I've replaced them with ButtonDefaults.outlinedBorder, which uses colors.onSurface. The stroke is less thick and opaque but I think it's better this way because it adheres to material design.

This doesn't fix the hardcoded graph axis colors, which are declared in the library.

Before:

After:

opened by noahjutz 0
Added LineShader for filling a line graph
Added computation of fill path

Added interface - LineShader

Added 3 different implementations of Line Shader:-

NoLineShader - For no line fill

SolidLineShader - For filling the line graph with a single color

GradientLineShader - For filling the line graph with a vertical gradient.

This closes #14
opened by yashovardhan99 0
onCommit is deprecated

I get this warning: Line 47: onCommit(V1, CommitScope.() -> Unit): Unit' is deprecated. DisposableEffect should be used instead. https://github.com/tehras/charts/blob/master/lib/line/src/main/java/com/github/tehras/charts/line/LineChart.kt

opened by dbaroncelli 0
java.lang.NoSuchMethodError: No interface method startRestartGroup(ILjava/lang/String;)Landroidx/compose/runtime/Composer; in class Landroidx/compose/runtime/Composer;

I am having this error when I want to display a Bar Chart. Here it is my code using this repository:

@Composable fun MyBarChartParent() { BarChart( barChartData = BarChartData( bars = listOf(BarChartData.Bar(label = "Bar Label", value = 100f, color = Color.Red)) ), // Optional properties. modifier = Modifier.fillMaxSize(), animation = simpleChartAnimation(), barDrawer = SimpleBarDrawer() ) }

I have just used the sample BarChart code of the ReadME file
bug good first issue

opened by ociler 0
java.lang.NoSuchFieldError: No field Fill of type Landroidx/compose/ui/graphics/PaintingStyle

App compiles, but crashes when tries to show the LineChart. I updated Compose version to 1.0.4, and still get it.

java.lang.NoSuchFieldError: No field Stroke of type Landroidx/compose/ui/graphics/PaintingStyle; in class Landroidx/compose/ui/graphics/PaintingStyle; or its superclasses (declaration of 'androidx.compose.ui.graphics.PaintingStyle' appears in /data/app/~~1IClg3K24qqTN_iqrjdXRg==/es.jnsoft.whatweath-pLHYJOTf4GaonKm_ukZsTg==/base.apk) at com.github.tehras.charts.line.renderer.line.SolidLineDrawer.(SolidLineDrawer.kt:14) at com.github.tehras.charts.line.renderer.line.SolidLineDrawer.(Unknown Source:0) at com.github.tehras.charts.line.renderer.line.SolidLineDrawer.(SolidLineDrawer.kt:8)

Edited:

I meant, my project was using Compose 1.0.1, and had the same issue.
bug good first issue

opened by Javicompi 6
Support for theming?

Hi there, I think it'd be very helpful if the app could support theming, maybe just adding a default parameter to each chart type with the colors used inside?
enhancement good first issue

opened by aballano 0
LineChart values column doesn't show exact values

Hi there, thank you for the work in this lib, I've been using it for a bit and I noticed that the chart doesn't show the exact values for the points, at least with the ranges I'm using:

I created a LineChart with default params as an example with 2 points: Data0 - 5500 and Data1 - 6000

As you can see the leyend on the left shows a range between 5400 and 6100, which is fine, but then for some reason, the values are unrounded.

I'm not sure how's done at the moment, but it might need a bit of tweaking. I didn't have time to look into the source code, but if that would help please let me know where I can find the calculation for that so I might open a PR at some moment.

opened by aballano 0
Bar chart animation starts from 0 when bar.value is updated

I have a bar chart with a bar set with bar.value = 100. Then when I update this value to 150 the following happens:

From 100 it jumps to 0 and then animates back to 150.

I'm looking for a way so that instead of jumping to 0 and then animating to 150 it animates from 100 to the next new value which in this case is 150.

Is there a way to do this?

opened by jcardama 2