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
height double - YES Chart component height
type XelaChartType - YES Chart type (LINE, BAR, PIE, DOUGHNUT)
labels List<String>? null NO Bottom labels for LINE and BAR Charts
datasetsLineChart List<XelaLineChartDataset>? null NO Datasets for LINE Chart
datasetsBarChart List<XelaBarChartDataset>? null NO Datasets for BAR Chart
datasetPieChart XelaPieChartDataset? 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 double 10 NO Step for side labels
doughnutStrokeWidth double 12 NO DOUGHNUT chart stroke width
dataLabelFormat intl.NumberFormat? intl.NumberFormat("0", "en") NO Format for side labels in LINE and BAR Chart
beforeData String NO Before side label string in LINE and BAR Chart
afterData String NO After side label string in LINE and BAR Chart

Usage

line chart

Line Chart Usage

XelaChart(
  height: 400,
  type: XelaChartType.LINE,
  labels: const ["Label", "Label", "Label", "Label", "Label"],
  datasetsLineChart: [
    XelaLineChartDataset(label: "First", data: [9, 15, 18, 5, 20], lineColor: XelaColor.Pink3, fillColor: Colors.transparent, pointColor: Colors.transparent, tension: 0.5),
    XelaLineChartDataset(label: "Second", data: [6, 7, 2, 14, 1], lineColor: XelaColor.Blue3, fillColor: Colors.transparent, pointColor: Colors.transparent, tension: 0.5),
    XelaLineChartDataset(label: "Third", data: [4, 9, 20, 12, 5], lineColor: XelaColor.Green3, fillColor: Colors.transparent, pointColor: Colors.transparent, tension: 0.5),
    XelaLineChartDataset(label: "Fourth", data: [12, 3, 22, 8, 18], lineColor: XelaColor.Purple3, fillColor: Colors.transparent, pointColor: Colors.transparent, tension: 0.5),
  ],
  dataStep: 5,
  labelsColor: XelaColor.Gray6,
  chartBorderColor: XelaColor.Gray12,
)

Properties XelaLineDataset

Name Type Default Value Required Description
label String - YES Label for dataset
data List<double> - YES Array double 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 Colors.transparent 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 Colors.white NO Point background color for chart data

bar chart

Bar Chart Usage

XelaChart(
  height: 400,
  dataStep: 5,
  type: XelaChartType.BAR,
  datasetsBarChart: [
    XelaBarChartDataset(label: "First", data: [20,30,40,10,20], fillColor: XelaColor.Blue3),
    XelaBarChartDataset(label: "Second", data: [10,25,37,18,28], fillColor: XelaColor.Pink3),
    XelaBarChartDataset(label: "Third", data: [8,20,32,25,38], fillColor: XelaColor.Green3),
  ],
  labels: ["Label", "Label", "Label", "Label", "Label"],
  labelsColor: XelaColor.Gray6,
  chartBorderColor: XelaColor.Gray12,
)

Properties XelaBarDataset

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

pie chart

Pie Chart Usage

XelaChart(
  height: 300,
  type: XelaChartType.PIE,
  pieBackgroundColor: XelaColor.Gray12,
  datasetPieChart: 
    XelaPieChartDataset(
        label: "Today", 
        data: [20, 30, 30, 10], 
        fillColors: [XelaColor.Blue3, XelaColor.Pink3, XelaColor.Green3, XelaColor.Orange3]
    ),
)

Properties XelaPieDataset

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

doughnut chart

Doughnut Chart Usage

XelaChart(
  height: 300,
  doughnutStrokeWidth: 12,
  type: XelaChartType.DOUGHNUT,
  datasetsDoughnutChart: [
    XelaDoughnutDataset(label: "First", data: [80, 20], fillColors: [XelaColor.Green2, _isDark ? XelaColor.Gray3 : XelaColor.Gray11]),
    XelaDoughnutDataset(label: "Second", data: [70, 30], fillColors: [XelaColor.Purple3, _isDark ? XelaColor.Gray3 : XelaColor.Gray11]),
    XelaDoughnutDataset(label: "Third", data: [60, 40], fillColors: [XelaColor.Orange3, _isDark ? XelaColor.Gray3 : XelaColor.Gray11]),
    XelaDoughnutDataset(label: "Fourth", data: [30, 70], fillColors: [XelaColor.Blue3, _isDark ? XelaColor.Gray3 : XelaColor.Gray11]),
  ],
)

Properties XelaDoughnutDataset

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