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	[String]	[]	NO	Bottom labels for .Line and .Bar Charts
datasetsLineChart	XelaLineDatasets?	nil	NO	Datasets for .Line Chart
datasetsBarChart	XelaBarDatasets?	nil	NO	Datasets for .Bar Chart
datasetPieChart	XelaPieDatasets?	nil	NO	Dataset for .Pie Chart
datasetsDoughnutChart	XelaDoughnutDatasets?	nil	NO	Datasets for .Doughnut Chart
labelsColor	Color	Color(xelaColor: .Gray6)	NO	Foreground color for chart labels
chartBorderColor	Color	Color(xelaColor: .Gray12)	NO	Chart borders and lines color
pieBackgroundColor	Color	Color(xelaColor: .Gray11)	NO	Pie chart background color
doughnutBackgroundColor	Color	Color(.white)	NO	Doughnut chart background color
doughnutEmptyColor	Color	Color(xelaColor: .Gray12)	NO	Doughnut chart empty data color
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 Usage

import SwiftUI

struct ExampleView: View {

    @StateObject var datasets1 = XelaLineDatasets(
        datasets: [
            XelaLineChartDataset(label: "First", data: [9, 15, 18, 5, 20], borderColor: Color(xelaColor: .Pink3), pointColor: Color.clear, fillColor: Color.clear, tension: 0.5),
            XelaLineChartDataset(label: "Second", data: [6, 7, 2, 14, 1], borderColor: Color(xelaColor: .Blue3), pointColor: Color.clear, fillColor: Color.clear, tension: 0.5),
            XelaLineChartDataset(label: "Third", data: [4, 9, 20, 12, 5], borderColor: Color(xelaColor: .Green3), pointColor: Color.clear, fillColor: Color.clear, tension: 0.5),
            XelaLineChartDataset(label: "Fourth", data: [12, 3, 22, 8, 18], borderColor: Color(xelaColor: .Purple3), pointColor: Color.clear, fillColor: Color.clear, tension: 0.5),
        ],
        dataStep: 5,
        beginAtZero: true
    )

    var body: some View {
        XelaChart(
            type: .Line,
            labels: ["Label", "Label", "Label", "Label", "Label"],
            datasetsLineChart: datasets1,
            labelsColor: Color(xelaColor: .Gray8),
            chartBorderColor: Color(xelaColor: .Gray12),
            labelsFormat: "%.0f",
            beforeLabel: "",
            afterLabel: "k"
        )
        .frame(height:300)
        .padding()
    }
}

Properties XelaLineDatasets

Name	Type	Default Value	Required	Description
datasets	[XelaLineChartDataset]	-	YES	Array Datasets for .Line Chart
dataStep	CGFloat	10	NO	Step for side labels
beginAtZero	Bool	false	NO	Set true if need side labels from zero

Properties XelaLineDataset

Name	Type	Default Value	Required	Description
label	String	-	YES	Label for dataset
data	[CGFloat]	-	YES	Array CGFloat data for chart
borderColor	Color	Color(xelaColor: .Gray11)	NO	Line color for chart data, set Color.clear for remove border line
pointColor	Color	Color(xelaColor: .Gray11)	NO	Point color for chart data, set Color.clear for remove points
fillColor	Color	Color.clear	NO	Fill color for chart data, set Color.clear for remove fill
tension	CGFloat	0.1	NO	Bezier curve tension of the line. Set to 0 to draw straightlines. Value from 0.0 to 1.0

Bar Chart Usage

import SwiftUI

struct ExampleView: View {

    @StateObject var bar2Datasets:XelaBarDatasets = XelaBarDatasets(
        datasets: [
            XelaBarChartDataset(label: "First Dataset", data: [20,30,40,10,20], fillColor: Color(xelaColor: .Blue3)),
            XelaBarChartDataset(label: "Second Dataset", data: [10,25,37,18,28], fillColor: Color(xelaColor: .Pink3)),
            XelaBarChartDataset(label: "Second Dataset", data: [10,25,37,18,28], fillColor: Color(xelaColor: .Green3))
        ],
        dataStep: 5
    )

    var body: some View {
        XelaChart(
            type: .Bar,
            labels: ["Label", "Label", "Label", "Label", "Label"],
            datasetsBarChart: bar2Datasets,
            labelsColor: Color(xelaColor: .Gray8),
            chartBorderColor: Color(xelaColor: .Gray12),
            labelsFormat: "%.0f",
            beforeLabel: "",
            afterLabel: "k"
        )
        .frame(height:300)
        .padding()
    }
}

Properties XelaBarDatasets

Name	Type	Default Value	Required	Description
datasets	[XelaBarChartDataset]	-	YES	Array Datasets for .Bar Chart
dataStep	CGFloat	10	NO	Step for side labels

Properties XelaBarDataset

Name	Type	Default Value	Required	Description
label	String	-	YES	Label for dataset
data	[CGFloat]	-	YES	Array CGFloat data for chart
fillColor	Color	Color(xelaColor: .Blue3)	NO	Fill color for chart data

Pie Chart Usage

import SwiftUI

struct ExampleView: View {

    @StateObject var pieDataset = XelaPieDatasets(
        dataset: XelaPieChartDataset(label: "First Dataset", data: [20,30,30,10], fillColors: [Color(xelaColor: .Blue3), Color(xelaColor: .Pink3), Color(xelaColor: .Green3), Color(xelaColor: .Orange3), Color(xelaColor: .Yellow3)]),
        total: nil
    )

    var body: some View {
        XelaChart(type: .Pie, datasetPieChart: pieDataset)
            .frame(width:300, height:300)
    }
}

Properties XelaPieDatasets

Name	Type	Default Value	Required	Description
dataset	XelaPieChartDataset	-	YES	Dataset for .Pie Chart
total	CGFloat?	nil	NO	Total for .Pie Chart

Properties XelaPieDataset

Name	Type	Default Value	Required	Description
label	String	-	YES	Label for dataset
data	[CGFloat]	-	YES	Array CGFloat data for chart
fillColors	[Color]	-	YES	Fill color for chart data

Doughnut Chart Usage

import SwiftUI

struct ExampleView: View {

    @StateObject var doughnut1Datasets = XelaDoughnutDatasets(
        datasets: [
            XelaDoughnutChartDataset(label: "UI/UX Design", data: [80], fillColors: [Color(xelaColor: .Green2)]),
            XelaDoughnutChartDataset(label: "Graphic Design", data: [70], fillColors: [Color(xelaColor: .Purple3)]),
            XelaDoughnutChartDataset(label: "Logotypes", data: [55], fillColors: [Color(xelaColor: .Orange3)]),
            XelaDoughnutChartDataset(label: "Illustrations", data: [25], fillColors: [Color(xelaColor: .Blue3)])
        ],
        total: 100
    )

    var body: some View {
        XelaChart(type: .Doughnut, datasetsDoughnutChart: doughnut1Datasets)
            .frame(width:200, height: 200)
    }
}

Properties XelaDoughnutDatasets

Name	Type	Default Value	Required	Description
dataset	[XelaDoughnutChartDataset]	-	YES	Dataset for .Doughnut Chart
total	CGFloat	-	YES	Total for .Doughnut Chart

Properties XelaDoughnutDataset

Name	Type	Default Value	Required	Description
label	String	-	YES	Label for dataset
data	[CGFloat]	-	YES	Array CGFloat data for chart
fillColors	[Color]	-	YES	Fill color for chart data