Giter Club home page Giter Club logo

charty's Introduction

Charty : Elementary Chart library for Compose

Charty

Chart Library built using Jetpack Compose and is highly customizable. Made with โค๏ธ for Android Developers by Himanshu

Github Followers Twitter Follow AndroidWeekly GitHub issues GitHub Repository size GitHub forks GitHub Repo stars Charty Charty Static Check

Implementation

Gradle setup

In build.gradle of app module, include this dependency

dependencies {
  implementation("com.himanshoe:charty:{version}")
}

Integrating it in your project

You can find the detail implementation of the following:

Charts Preview
BarChart
CandleStickChart
BubbleChart
StackedBarChart
GroupedBarChart
CircleChart
PointChart
LineChart
CurveLineChart
AreaChart
GaugeChart
PieChart

Contribution

Please feel free to fork it and open a PR.

License

Copyright 2023 Charty Contributors

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.

charty's People

Contributors

hi-manshu avatar pakka-papad avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

charty's Issues

Add demo APK link

Add demo apk link in readme file and that should be updated on each release.

Add support for compose-jb

Thanks to all contributors for this library, which is very useful. If you can add support for compose-jb on the desktop, that will be nice.

When I added Charty dependence in desktop compose-jb.
implementation("com.himanshoe:charty:1.0.1")

showing this error
`Could not resolve all files for configuration ':runtimeClasspath'.

Could not resolve com.himanshoe:charty:1.0.1.
Required by:
project :
No matching variant of com.himanshoe:charty:1.0.1 was found. The consumer was configured to find a runtime of a library compatible with Java 18, packaged as a jar, preferably optimized for standard JVMs, and its dependencies declared externally, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'jvm' but:
- Variant 'releaseVariantReleaseApiPublication' capability com.himanshoe:charty:1.0.1 declares a library, and its dependencies declared externally:
- Incompatible because this component declares an API of a component, with the library elements 'aar' and the consumer needed a runtime of a component, packaged as a jar
- Other compatible attributes:
- Doesn't say anything about its target Java environment (preferred optimized for standard JVMs)
- Doesn't say anything about its target Java version (required compatibility with Java 18)
- Doesn't say anything about org.jetbrains.kotlin.platform.type (required 'jvm')
- Variant 'releaseVariantReleaseRuntimePublication' capability com.himanshoe:charty:1.0.1 declares a runtime of a library, and its dependencies declared externally:
- Incompatible because this component declares a component, with the library elements 'aar' and the consumer needed a component, packaged as a jar
- Other compatible attributes:
- Doesn't say anything about its target Java environment (preferred optimized for standard JVMs)
- Doesn't say anything about its target Java version (required compatibility with Java 18)
- Doesn't say anything about org.jetbrains.kotlin.platform.type (required 'jvm')`

My build.gradle.kts
`
import org.jetbrains.compose.desktop.application.dsl.TargetFormat
import org.jetbrains.kotlin.gradle.tasks.KotlinCompile

plugins {
kotlin("jvm")
id("org.jetbrains.compose")
}

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

dependencies {
testImplementation(kotlin("test"))
implementation(compose.desktop.currentOs)
implementation("com.himanshoe:charty:1.0.1")
}

tasks.test {
useJUnitPlatform()
}

tasks.withType {
kotlinOptions.jvmTarget = JavaVersion.VERSION_18.toString()
}

compose.desktop {
application {
mainClass = "MainKt"
nativeDistributions {
includeAllModules = true
targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
packageName = projectName
packageVersion = projectVersion
}
}
}

`

Mix of positive and negative values in HorizontalBarChart?

Does charty support a mix of positive and negative integer values in a HorizontalBarChart? I tried a simple horizontal bar chart with a mix of positive and negative y-axis values and the negative values were clipped in the resulting chart. Before I try any further, wanted to confirm if this is indeed a supported usecase?

Line drawn out of bounds on dataset update

Using a LineChart, when the dataset is updated with a large value, the recomposition results in a line being drawn out of bounds.

LineChart(
            lineData = pagesReadData,
            color = MaterialTheme.colors.primaryVariant,
            modifier = modifier
                .height(250.dp)
                .fillMaxWidth()
                .padding(32.dp),
            axisConfig = AxisConfig(
                showAxis = true,
                isAxisDashed = false,
                showUnitLabels = true,
                showXLabels = true,
                xAxisColor = MaterialTheme.colors.onSurface,
                yAxisColor = MaterialTheme.colors.onSurface,
            )
        )

Resultant:
Screenshot_20220923_195016

ScreenCap:
Out of bounds.webm

Please let me know if any other data is needed.

Scroll ability in x-axis

Add ability to scroll in x-axis when there's a lot of entry to work with. Else it's everything at a place, all jam-packed.

It would be great if you also add some functionality to programmatically focus on a particular entry. e.g.: there's 100 entries and the last nth entry is focused on the startup and the user also has the ability to scroll the x-axis.

IllegalArgumentException with CurveLineChart

I am using CurveLineChart to display some data.

Here is the code that displays the chart

CurveLineChart(
    modifier = Modifier
        .fillMaxWidth()
        .padding(vertical = 10.dp),
    lineData = lineData,
    chartColors = listOf(
        MaterialTheme.colors.secondary,
        MaterialTheme.colors.secondary
    ),
    lineColors = listOf(
        MaterialTheme.colors.primary,
        MaterialTheme.colors.primary
    )
)
// Where lineData is
// [LineData(xValue=Oct 27, 2022, yValue=0.0), LineData(xValue=Oct 28, 2022, yValue=0.0), ......]
// the other values have yValue equals to 0

When I run the app, I have the following stacktrace

E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.ola.myapp, PID: 7867
    java.lang.IllegalArgumentException
        at android.graphics.LinearGradient.nativeCreate(Native Method)
        at android.graphics.LinearGradient.createNativeInstance(LinearGradient.java:158)
        at android.graphics.Shader.getNativeInstance(Shader.java:191)
        at android.graphics.Paint.getNativeInstance(Paint.java:726)
        at android.graphics.BaseRecordingCanvas.drawPath(BaseRecordingCanvas.java:292)
        at androidx.compose.ui.graphics.AndroidCanvas.drawPath(AndroidCanvas.android.kt:242)
        at androidx.compose.ui.graphics.drawscope.CanvasDrawScope.drawPath-GBMwjPU(CanvasDrawScope.kt:473)
        at androidx.compose.ui.node.LayoutNodeDrawScope.drawPath-GBMwjPU(Unknown Source:26)
        at androidx.compose.ui.graphics.drawscope.DrawScope.drawPath-GBMwjPU$default(DrawScope.kt:800)
        at com.himanshoe.charty.line.CurveLineChartKt$CurveLineChart$5.invoke(CurveLineChart.kt:187)
        at com.himanshoe.charty.line.CurveLineChartKt$CurveLineChart$5.invoke(CurveLineChart.kt:112)
        at androidx.compose.ui.draw.DrawBackgroundModifier.draw(DrawModifier.kt:104)
        at androidx.compose.ui.node.DrawEntity.draw(DrawEntity.kt:98)
        at androidx.compose.ui.node.LayoutNodeDrawScope.drawContent(LayoutNodeDrawScope.kt:46)
        at androidx.compose.ui.draw.DrawBackgroundModifier.draw(DrawModifier.kt:105)
        at androidx.compose.ui.node.DrawEntity.draw(DrawEntity.kt:98)
        at androidx.compose.ui.node.LayoutNodeWrapper.drawContainedDrawModifiers(LayoutNodeWrapper.kt:316)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:306)
        at androidx.compose.ui.node.ModifiedLayoutNode.performDraw(ModifiedLayoutNode.kt:139)
        at androidx.compose.ui.node.LayoutNodeWrapper.drawContainedDrawModifiers(LayoutNodeWrapper.kt:314)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:306)
        at androidx.compose.ui.node.ModifiedLayoutNode.performDraw(ModifiedLayoutNode.kt:139)
        at androidx.compose.ui.node.LayoutNodeWrapper.drawContainedDrawModifiers(LayoutNodeWrapper.kt:314)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:306)
        at androidx.compose.ui.node.ModifiedLayoutNode.performDraw(ModifiedLayoutNode.kt:139)
        at androidx.compose.ui.node.LayoutNodeWrapper.drawContainedDrawModifiers(LayoutNodeWrapper.kt:314)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:306)
        at androidx.compose.ui.node.ModifiedLayoutNode.performDraw(ModifiedLayoutNode.kt:139)
        at androidx.compose.ui.node.LayoutNodeWrapper.drawContainedDrawModifiers(LayoutNodeWrapper.kt:314)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:306)
        at androidx.compose.ui.node.ModifiedLayoutNode.performDraw(ModifiedLayoutNode.kt:139)
        at androidx.compose.ui.node.LayoutNodeWrapper.drawContainedDrawModifiers(LayoutNodeWrapper.kt:314)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:306)
        at androidx.compose.ui.node.LayoutNode.draw$ui_release(LayoutNode.kt:839)
        at androidx.compose.ui.node.InnerPlaceable.performDraw(InnerPlaceable.kt:90)
        at androidx.compose.ui.node.LayoutNodeWrapper.drawContainedDrawModifiers(LayoutNodeWrapper.kt:314)
        at androidx.compose.ui.node.LayoutNodeWrapper.access$drawContainedDrawModifiers(LayoutNodeWrapper.kt:60)
        at androidx.compose.ui.node.LayoutNodeWrapper$invoke$1.invoke(LayoutNodeWrapper.kt:336)
        at androidx.compose.ui.node.LayoutNodeWrapper$invoke$1.invoke(LayoutNodeWrapper.kt:335)
        at androidx.compose.runtime.snapshots.Snapshot$Companion.observe(Snapshot.kt:2101)
        at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:110)
        at androidx.compose.ui.node.OwnerSnapshotObserver.observeReads$ui_release(OwnerSnapshotObserver.kt:78)
        at androidx.compose.ui.node.LayoutNodeWrapper.invoke(LayoutNodeWrapper.kt:335)
        at androidx.compose.ui.node.LayoutNodeWrapper.invoke(LayoutNodeWrapper.kt:60)
        at androidx.compose.ui.platform.RenderNodeApi29.record(RenderNodeApi29.android.kt:180)

It looks like this error is related to the gradient but I get the same error even if I pass one color to the chart when using lineColor and chartColor

To have multiple lines in single Line Chart

For now we are able to create line charts with single line representing the data in it.
Something like this ->

single line graph image

It would be really beneficial to have multiple lines in a single line graph. Most mobile apps require this in order to display a comparative analysis of data to the user.

Example graph ->

image
(this image is taken from internet just to demonstrate the requirement)

Optional drawXLabel and zero-based first and last line

charty

LineChart:
Please make the call to drawXLabel configurable as well as the first and last line from and back to zero, that does not correspond to any of my LineData (moveTo(0f, size.height) and path.lineTo(size.width, size.height)).

Thank you for the library.

Cleanup non issue

When my account was compromised a spam issue was created in this repo. I sincerely apologize. Cleaning up such issues via script.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

  • Update dependency io.gitlab.arturbosch.detekt:detekt-gradle-plugin to v1.23.6
  • Update dependency androidx.appcompat:appcompat to v1.7.0
  • Update dependency com.google.android.material:material to v1.12.0
  • Update dependency com.slack.lint.compose:compose-lint-checks to v1.3.1
  • Update dependency org.jetbrains.dokka:android-documentation-plugin to v1.9.20
  • Update dependency org.jetbrains.kotlinx:kotlinx-datetime to v0.6.0
  • Update plugin com.vanniktech.maven.publish to v0.29.0
  • Update plugin org.jetbrains.dokka to v1.9.20
  • Update actions/checkout action to v4
  • Update actions/setup-java action to v4
  • Update dependency androidx.compose:compose-bom to v2024
  • Update peaceiris/actions-gh-pages action to v4
  • Update plugin org.jetbrains.kotlin.android to v2
  • ๐Ÿ” Create all rate-limited PRs at once ๐Ÿ”

Warning

Renovate failed to look up the following dependencies: Failed to look up maven package org.jlleitschuh.gradle:ktlint-gradle.

Files affected: build.gradle


Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/deploy-documentation.yml
  • actions/checkout v3
  • actions/setup-java v3
  • peaceiris/actions-gh-pages v3
.github/workflows/static-check.yml
  • actions/checkout v3
  • actions/setup-java v3
gradle
gradle.properties
settings.gradle
build.gradle
  • io.gitlab.arturbosch.detekt:detekt-gradle-plugin 1.23.0
  • org.jlleitschuh.gradle:ktlint-gradle 11.3.2
  • com.android.application 8.0.0
  • com.android.library 8.0.0
  • org.jetbrains.kotlin.android 1.8.21
  • org.jetbrains.dokka 1.8.20
app/build.gradle
  • composeOptions 1.4.7
  • androidx.core:core-ktx 1.8.0
  • androidx.lifecycle:lifecycle-runtime-ktx 2.3.1
  • androidx.activity:activity-compose 1.5.1
  • androidx.compose:compose-bom 2022.10.00
  • junit:junit 4.13.2
  • androidx.test.ext:junit 1.1.5
  • androidx.test.espresso:espresso-core 3.5.1
  • androidx.compose:compose-bom 2022.10.00
charty/gradle.properties
charty/build.gradle
  • com.vanniktech.maven.publish 0.25.3
  • composeOptions 1.4.7
  • composeOptions 1.4.7
  • androidx.core:core-ktx 1.10.1
  • androidx.appcompat:appcompat 1.6.1
  • com.google.android.material:material 1.9.0
  • androidx.compose:compose-bom 2023.05.01
  • org.jetbrains.kotlinx:kotlinx-datetime 0.4.0
  • com.slack.lint.compose:compose-lint-checks 1.2.0
  • junit:junit 4.13.2
  • androidx.test.ext:junit 1.1.5
  • androidx.test.espresso:espresso-core 3.5.1
  • org.jetbrains.dokka:android-documentation-plugin 1.8.20
quality/static-check.gradle
gradle-wrapper
gradle/wrapper/gradle-wrapper.properties
  • gradle 8.0

  • Check this box to trigger a request for Renovate to run again on this repository

Bar data represented incorrectly on server data update

Hello there, i discovered a bug similar to the one in the line data where the recomposition of the bar chart will display fresh data incorrectly. Here is my data displayed monthly before i update it using a filter to show data yearly :

Screenshot_20221211_231409_Pspot

listOf(
     BarData(xValue=1, yValue=0.0), 
     BarData(xValue=2, yValue=0.0), 
     BarData(xValue=3, yValue=0.0), 
     BarData(xValue=4, yValue=0.0), 
     BarData(xValue=5, yValue=0.0), 
     BarData(xValue=6, yValue=0.0), 
     BarData(xValue=7, yValue=120.0), 
     BarData(xValue=8, yValue=0.0), 
     BarData(xValue=9, yValue=120.0), 
     BarData(xValue=10, yValue=0.0), 
     BarData(xValue=11, yValue=240.0), 
     BarData(xValue=12, yValue=0.0), 
     BarData(xValue=13, yValue=0.0), 
     BarData(xValue=14, yValue=0.0), 
     BarData(xValue=15, yValue=0.0), 
     BarData(xValue=16, yValue=0.0), 
     BarData(xValue=17, yValue=0.0), 
     BarData(xValue=18, yValue=0.0), 
     BarData(xValue=19, yValue=0.0), 
     BarData(xValue=20, yValue=0.0), 
     BarData(xValue=21, yValue=240.0), 
     BarData(xValue=22, yValue=0.0), 
     BarData(xValue=23, yValue=0.0), 
     BarData(xValue=24, yValue=0.0), 
     BarData(xValue=25, yValue=480.0), 
     BarData(xValue=26, yValue=0.0), 
     BarData(xValue=27, yValue=0.0), 
     BarData(xValue=28, yValue=0.0), 
     BarData(xValue=29, yValue=0.0), 
     BarData(xValue=30, yValue=0.0), 
     BarData(xValue=31, yValue=0.0)
)

And this is my data after updating it to display yearly :
Screenshot_20221211_231420_Pspot

listOf(
   BarData(xValue=1, yValue=0.0), 
   BarData(xValue=2, yValue=0.0), 
   BarData(xValue=3, yValue=0.0), 
   BarData(xValue=4, yValue=0.0), 
   BarData(xValue=5, yValue=0.0), 
   BarData(xValue=6, yValue=0.0), 
   BarData(xValue=7, yValue=0.0), 
   BarData(xValue=8, yValue=0.0), 
   BarData(xValue=9, yValue=0.0), 
   BarData(xValue=10, yValue=600.0), 
   BarData(xValue=11, yValue=120.0), 
   BarData(xValue=12, yValue=1200.0)
)

I would love to know if this is a usage error from my part or is it a bug in the library itself

Labels not visible on dark mode

Using a LineChart, the x and y-axis labels aren't legible on dark mode since they are in black color. The axis config colors aren't applied to them.

LineChart(
            lineData = minutesReadData,
            color = MaterialTheme.colors.primaryVariant,
            modifier = modifier
                .height(250.dp)
                .fillMaxWidth()
                .padding(vertical = 32.dp, horizontal = 32.dp),
            axisConfig = AxisConfig(
                showAxis = true,
                isAxisDashed = false,
                showUnitLabels = true,
                showXLabels = true,
                xAxisColor = Color.White,
                yAxisColor = Color.White,
            ),
        )

On Light Mode:
image

On Dark Mode:
image

Offset in axis

The point with max yValue is always at the top edge of the graph. Which clips the circle. It would really help a lot if you could add the functionality to set offsets (as paddings in other views) to the graph.

Thanks!

x-axis labels.

The x-axis does not display labels of any data type from text to numbers.

Pie chart size is incorrect when using Modifier.fillMaxSize(.#f)

When not giving a direct size with Modifier.size(Some.dp), and using Modifier.fillMaxSize(.#f) or Modifier.fillMaxWidth(.#f) the chart looks fine, however the background size does not wrap the object. Here are some pictures to compare

PieChart(
                   modifier = Modifier
                       .scale(1f)
                       .fillMaxWidth(.4f)
                       .background(color = Color.White),
                   pieData = pieData,
               )

image

PieChart(
                    modifier = Modifier
                        .scale(1f)
                        .background(color = Color.White)
                        .size(size.dp),
                    pieData = pieData, config = PieConfig(isDonut = true, expandDonutOnClick = false),
                )

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.