Skip to content

Custom bar chart 📊 shows a tooltip when user click on the bar 😍

License

Notifications You must be signed in to change notification settings

JustinGeorgeJoseph/PopupBarChart

Repository files navigation

PopupBarChart 📊


PopupBarChart 📊 can shows a tooltip when user click on the bar 😍🤩

License License API


Including in your project

Gradle

allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

And add a dependency code to your module's build.gradle file.

dependencies {
	        implementation 'com.github.JustinGeorgeJoseph:PopupBarChart:Tag'
	}

Usage

PopupBarChart in xml layout

We can use PopupBarChart without any customized attributes.
Initally there won't be any content you have add those contents dynamically.

<com.justin.popupbarchart.PopupBarChart
        android:id="@+id/customBarchart"
        android:layout_width="match_parent"
        android:background="@color/chart_bg"
        android:layout_height="300dp"

        app:chart_bar_round_corner="true"
        app:chart_bar_size="@dimen/bar_size"
        app:chart_bar_start_color="@color/green_start"
        app:chart_bar_end_color="@color/green_end"
        app:chart_bar_secondary_color="@color/grey_secondary"

        app:chart_bar_text_color="@color/white"
        app:chart_bar_text_family="@font/roboto_medium"
        app:chart_bar_text_size="14sp"

        app:chart_bar_tooltip_bg_color="@android:color/black"

        app:chart_bar_tooltip_subtitle_text_color="@color/white"
        app:chart_bar_tooltip_subtitle_text_family="@font/rubik_medium"
        app:chart_bar_tooltip_subtitle_text_size="10sp"

        app:chart_bar_tooltip_title_text_color="@color/white"
        app:chart_bar_tooltip_title_text_family="@font/rubik_medium"
        app:chart_bar_tooltip_title_text_size="12sp"

        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Attribute descriptions

app:chart_bar_round_corner="true" // [true,false] - sets whether bar need round edges or not.
app:chart_bar_size="16dp" //[Integer] - sets the width of each bars.
app:chart_bar_start_color="@color/green_start" //[Color]
app:chart_bar_end_color="@color/green_end" //[Color] - sets the color of the bar char, start and end colors are 
                                                      used to support the gradient colors. If you need only 
                                                      one color set same color as start and end color.
app:chart_bar_secondary_color="@color/grey_secondary" //[Color] - Use secondary color as background 
                                                                  color of progress bar
app:chart_bar_text_color="@color/white"//[color] - color code for text in the bar chart
app:chart_bar_text_size="14sp" //[dimen] - size of text in the bar chart
app:chart_bar_text_family="@font/roboto_medium" //[Font] - font family for the text in bar chart
app:chart_bar_tooltip_bg_color="@android:color/black" //[color] -  Tooltip's background color(default will be black)
app:chart_bar_tooltip_subtitle_text_color="@color/white" //[color] - Tooltip's subtitle text color
app:chart_bar_tooltip_subtitle_text_size="10sp" //[dimen] - Tooltip's subtitle text size
app:chart_bar_tooltip_subtitle_text_family="@font/rubik_medium" //[Font] - Tooltip's subtitle font family
app:chart_bar_tooltip_title_text_size="12sp" //[dimen] - tooltip title text size
app:chart_bar_tooltip_title_text_color="@color/white" //[color] - tooltip title text color
app:chart_bar_tooltip_title_text_family="@font/rubik_medium" //[Font] - tooltip title font family

Set graph values

findViewById<PopupBarChart>(R.id.customBarchart).apply {
            setGraphValues(
                arrayListOf(
                    GraphValue(
                        day = 1,
                        id = 1,
                        progress = 30,
                        isToday = false,
                        showToolTip = false
                    ),
                    GraphValue(
                        day = 2,
                        id = 2,
                        progress = 70,
                        isToday = false,
                        showToolTip = false
                    ),
                    GraphValue(
                        day = 3,
                        id = 3,
                        progress = 100,
                        isToday = false,
                        showToolTip = false
                    ),
                    GraphValue(
                        day = 4,
                        id = 4,
                        progress = 0,
                        isToday = false,
                        showToolTip = false
                    ),
                    GraphValue(
                        day = 5,
                        id = 5,
                        progress = 50,
                        isToday = false,
                        showToolTip = false
                    ),
                    GraphValue(
                        day = 6,
                        id = 6,
                        progress = 50,
                        isToday = false,
                        showToolTip = false
                    ),
                    GraphValue(
                        day = 7,
                        id = 7,
                        progress = 25,
                        isToday = false,
                        showToolTip = false
                    ),
                )
            )
        }

License

Copyright 2022 JustinGeorgeJoseph (Justin George)

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.