Charts

charts

Charts provide a perfect way to visualize data on your mobile App. Choose from a variety of charts. Configure an extensive set of options to perfectly match the look and best fit for your data on your App.

Properties XelaChart

Name Type Default Value Required Description
type XelaChartType - YES Chart type (LINE, BAR, PIE, DOUGHNUT)
labels List<String> arrayListOf() NO Bottom labels for LINE and BAR Charts
datasetsLineChart List<XelaLineDataset>? null NO Datasets for LINE Chart
datasetsBarChart List<XelaBarDataset>? null NO Datasets for BAR Chart
datasetPieChart XelaPieDataset? null NO Dataset for PIE Chart
datasetsDoughnutChart List<XelaDoughnutDataset>? null NO Datasets for DOUGHNUT Chart
labelsColor Color XelaColor.Gray6 NO Foreground color for chart labels
chartBorderColor Color XelaColor.Gray12 NO Chart borders and lines color
pieBackgroundColor Color XelaColor.Gray11 NO Pie chart background color
dataStep Float 10f NO Step for side labels
doughnutStrokeWidth Dp 12.dp NO DOUGHNUT chart stroke width
labelsFormat String %.0f NO Format for side labels in LINE and BAR Chart
beforeLabel String NO Before side label string in LINE and BAR Chart
afterLabel String NO After side label string in LINE and BAR Chart

Usage

line chart

Line Chart Usage

val datasets = arrayListOf(
    XelaLineChartDataset("First", arrayListOf(9f, 15f, 18f, 5f, 20f), lineColor = XelaColor.Pink3, pointColor = Color.Transparent, fillColor = Color.Transparent, tension = 0.5f, pointColorBackground = Color.Transparent),
    XelaLineChartDataset("Second", arrayListOf(6f, 7f, 2f, 14f, 1f), lineColor = XelaColor.Blue3, pointColor = Color.Transparent, fillColor = Color.Transparent, tension = 0.5f, pointColorBackground = Color.Transparent),
    XelaLineChartDataset("Third", arrayListOf(4f, 9f, 20f, 12f, 5f), lineColor = XelaColor.Green3, pointColor = Color.Transparent, fillColor = Color.Transparent, tension = 0.5f, pointColorBackground = Color.Transparent),
    XelaLineChartDataset("Fourth", arrayListOf(12f, 3f, 22f, 8f, 18f), lineColor = XelaColor.Purple3, pointColor = Color.Transparent, fillColor = Color.Transparent, tension = 0.5f, pointColorBackground = Color.Transparent)
)

Box(modifier = Modifier
    .height(300.dp)
    .padding(16.dp)
) {
    XelaChart(
        type = XelaChartType.LINE,
        arrayListOf("Label", "Label", "Label", "Label", "Label"),
        datasetsLineChart = datasets,
        labelsColor = XelaColor.Gray8,
        chartBorderColor = XelaColor.Gray12,
        labelsFormat = "%.0f",
        beforeLabel = "",
        afterLabel = "k",
        dataStep = 5f
    )
}

Properties XelaLineDataset

Name Type Default Value Required Description
label String - YES Label for dataset
data List<Float> - YES Array Float data for chart
lineColor Color XelaColor.Gray11 NO Line color for chart data, set Color.Transparent for remove line
pointColor Color XelaColor.Gray11 NO Point color for chart data, set Color.Transparent for remove points
fillColor Color Color.clear NO Fill color for chart data, set Color.Transparent for remove fill
tension Float 0.1 NO Bezier curve tension of the line. Set to 0 to draw straightlines. Value from 0.0 to 1.0
pointColorBackground Color Color.White NO Point background color for chart data

bar chart

Bar Chart Usage

val datasets = arrayListOf(
    XelaBarChartDataset("First", arrayListOf(20f,30f,40f,10f,20f), XelaColor.Blue3),
    XelaBarChartDataset("Second", arrayListOf(10f,25f,37f,18f,28f), XelaColor.Pink3),
    XelaBarChartDataset("Third", arrayListOf(10f,25f,37f,18f,28f), XelaColor.Green3),
)

Box(modifier = Modifier
    .height(300.dp)
    .padding(16.dp)
) {
    XelaChart(
        type = XelaChartType.BAR,
        arrayListOf("Label", "Label", "Label", "Label", "Label"),
        datasetsBarChart = datasets,
        labelsColor = XelaColor.Gray8,
        chartBorderColor = XelaColor.Gray12,
        labelsFormat = "%.0f",
        beforeLabel = "",
        afterLabel = "k",
        dataStep = 5f
    )
}

Properties XelaBarDataset

Name Type Default Value Required Description
label String - YES Label for dataset
data List <Float> - YES Array Float data for chart
fillColor Color XelaColor.Blue3 NO Fill color for chart data

pie chart

Pie Chart Usage

val dataset = XelaPieChartDataset(
    "First",
    arrayListOf(20f,30f,30f,10f),
    arrayListOf(XelaColor.Blue3, XelaColor.Pink3, XelaColor.Green3, XelaColor.Orange3, XelaColor.Yellow3)
)

Box(modifier = Modifier
    .width(300.dp)
    .height(300.dp)
    .padding(16.dp)
) {
    XelaChart(
        type = XelaChartType.PIE,
        datasetPieChart = dataset
    )
}

Properties XelaPieDataset

Name Type Default Value Required Description
label String - YES Label for dataset
data List <Float> - YES Array Float data for chart
fillColors List <Color> - YES Fill color for chart data

doughnut chart

Doughnut Chart Usage

val datasets = arrayListOf(
    XelaDoughnutDataset("First", arrayListOf(80f, 20f), arrayListOf(XelaColor.Green2, XelaColor.Gray12)),
    XelaDoughnutDataset("Second", arrayListOf(70f, 30f), arrayListOf(XelaColor.Purple3, XelaColor.Gray12)),
    XelaDoughnutDataset("Third", arrayListOf(55f, 45f), arrayListOf(XelaColor.Orange3, XelaColor.Gray12)),
    XelaDoughnutDataset("Fourth", arrayListOf(25f, 75f), arrayListOf(XelaColor.Blue3, XelaColor.Gray12))
)

Box(modifier = Modifier
    .width(300.dp)
    .height(290.dp)
    .padding(16.dp)
) {
    XelaChart(
        type = XelaChartType.DOUGHNUT,
        datasetsDoughnutChart = datasets,
        doughnutStrokeWidth = 10.dp
    )
}

Properties XelaDoughnutDataset

Name Type Default Value Required Description
label String - YES Label for dataset
data List <Float> - YES Array Float data for chart
fillColors List <Color> - YES Fill color for chart data