flutter – linechart & verticalbarchart library
linechart & verticalbarchart library for flutter, written in dart with flutter.
new in the current release
current release 0.1.8.
see <changelog.md> for the list of new features and bug fixes in this release.
as noted in the changelog, the two most important new features are:
- making the codebase dart 2 clean
- adding the “iterative auto layout” of labels.
labels auto layout is a sequence of steps, such as skipping some labels, tilting labels, or decreasing label font, that result in label ‘fit’ nicely, readably, without overflowing or running into each other.
illustration of the new “iterative auto layout” feature
this section illustrates how the auto layout behaves when less and less horizontal space is available to display the chart.
flutter chart library automatically checks for the x label overlap, and follows with rule-based iterative re-layout, to prevent labels running into each other.
to illustrate “stressed” horizontal space for the chart, we are gradually adding a text widget containing and increasing number of ‘<‘ signs on the right of the chart.
autolayout step 1
let’s say there are six labels on a chart, and sufficient space to display labels horizontally. the result may look like this:
we can see all x axis labels displayed it full, horizontally oriented.
autolayout step 2
next, let us make less available space by taking away some space on the right with a wider text label like this ‘<<<<<<‘
we can see the labels were automatically tilted by angle chartoptions labeltiltradians
for the labels to fit.
autolayout step 3
next, let us make even less available space by taking away some space on the right with a wider text label like this ‘<<<<<<<<<<<‘.
we can see that labels are not only tilted, but also automatically skipped (every 2nd) for labels not to overlap.
autolayout step 4
next, let us make even less available space some more compared to step 3, with even a wider text label like this ‘<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<‘.
we can see even more labels were skipped for labels to prevent overlap, the chart is showing evey 5th label
autolayout step 5
last, let us take away extreme amount of horizontal space by using ‘<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<‘,
here we can see the “default auto layout” finally gave up, and overlaps labels. also, the legend is now hidded, as there is not enough horizontal space.
how to include the flutter_charts library in your application
flutter charts is a charting library for flutter, written in flutter. currently, column chart and line chart are supported.
the package is published on pub for inclusion in your application’s pubspec.yaml
: the installing tab on https://pub.dartlang.org/packages/flutter_charts contains instructions on how to include the flutter_charts package in your application.
a chart created using flutter_charts – example application
there is an example application in flutter_charts: example/lib/main.dart
. it shows how a flutter chart can be included in a flutter application.
you can run the example application using one of the methods (6, 7) in the paragraph below.
this application is also used as a base to show several sample charts in the paragraphs below.
here we show just two simple sample outputs, a column chart and a line chart.
a sample vertical bar chart (column chart)
a sample point and line chart (line chart)
the output is generated from semi-random data. you can click the blue + button to rerun the chart with a different set of rows.
known packages, libraries and apps that use this this flutter_charts package
- michael r. fairhurst’s language reader app – see https://github.com/michaelrfairhurst/flutter-language-reader-app
flutter charts – an overview: data, options, classes
before we show several examples of charts, a few notes.
- the
chartdata
class: allows to define data – x labels, y values, (optional) y labels, each-datarow (series) legends, each-datarow (series) color. the list below provides a summary description of each item- x labels:
chartdata.xlabels
allow to define x labels. settingxlabels
is required, but client can set them to empty strings. - y values:
chartdata.datarows
allow to define y values in rows. assumption: size of each data row inchartdata.datarows
is the same, and each data row size ==chartdata.xlabels.size
- y labels (optional): normally, y labels are generated from data. the option
chartoptions.useuserprovidedylabels
(default true), asks flutter_charts to data-generate y labels. if this option is set to false, thenchartdata.ylabels
must be set. any number of such user-provided y labels is allowed. - each-datarow (each series) legends:
chartdata.datarowslegends
allow to define a legend for each data row inchartdata.datarows
. assumption:chartdata.datarows.size
==chartdata.datarowslegends.size
- each-datarow (each series) color:
chartdata.datarowscolors
allow to define a color for each data row inchartdata.datarows
. assumption:chartdata.datarows.size
==chartdata.datarowscolors.size
- x labels:
- the
chartoptions
class: allows to define options, by using it’s defaults, or setting some options to non default values. there are alsolinechartoptions
andverticalbarchartoptions
classes. - support for randomly generated data, colors, labels: flutter charts also provides randomly generated data, in the class
randomchartdata
. this class generates:- y values data,
- x labels,
- series colors,
- series legends
- currently the only purpose of
randomchartdata
is for use in the examples below. to be clear,randomchartdata
y values, series colors, and series legends are not completely random – they hardcode some demoable label, legends, color values, and data ranges (data random within the range).
flutter charts – examples: linechart and verticalbarchart. code and resulting charts
flutter charts code allow to define the following data elements:
*data (y values)* | user-provided or random |
*x labels* | user-provided or random |
*options including colors* | user-provided or random |
*data rows legends* | user-provided or random |
*y labels* | user-provided or data-generated |
the examples below show a few alternative code snippets (user-provided or random data, labels, option) and the resulting charts.
the chart images were obtained by substituting the code snippet to the file:example/lib/main.dart
code.
random data (y values), random x labels, random colors, random data rows legends, data-generated y labels.
this example shows that data-generated y labels is the default.
flutter charts support reasonably intelligently generated y labels from data, including dealing with negatives.
code in defineoptionsanddata()
:
void defineoptionsanddata() {
_linechartoptions = new linechartoptions();
_verticalbarchartoptions = new verticalbarchartoptions();
_chartdata = new randomchartdata(useuserprovidedylabels: _linechartoptions.useuserprovidedylabels);
}
result line chart:
result vertical bar chart:
user-provided data (y values), user-provided x labels, random colors, user-provided data rows legends, data-generated y labels,
code in defineoptionsanddata()
:
void defineoptionsanddata() {
_linechartoptions = new linechartoptions();
_verticalbarchartoptions = new verticalbarchartoptions();
_chartdata = new chartdata();
_chartdata.datarowslegends = [
"spring",
"summer",
"fall",
"winter"];
_chartdata.datarows = [
[10.0, 20.0, 5.0, 30.0, 5.0, 20.0, ],
[30.0, 60.0, 16.0, 100.0, 12.0, 120.0, ],
[25.0, 40.0, 20.0, 80.0, 12.0, 90.0, ],
[12.0, 30.0, 18.0, 40.0, 10.0, 30.0, ],
];
_chartdata.xlabels = ["wolf", "deer", "owl", "mouse", "hawk", "vole"];
_chartdata.assigndatarowsdefaultcolors();
// note: chartoptions.useuserprovidedylabels default is still used (false);
}
result line chart:
result vertical bar chart:
user-provided data (y values), user-provided x labels, random colors, user-provided data rows legends, user-provided y labels
this example show how to use the option useuserprovidedylabels
, and scaling of data to the y labels range.
code in defineoptionsanddata()
:
void defineoptionsanddata() {
// this example shows user defined y labels.
// when setting y labels by user, the datarows value scale
// is irrelevant. user can use for example interval <0, 1>,
// <0, 10>, or any other, even negative ranges. here we use <0-10>.
// the only thing that matters is the relative values in the data rows.
// note that current implementation sets
// the minimum of datarows range (1.0 in this example)
// on the level of the first y label ("ok" in this example),
// and the maximum of datarows range (10.0 in this example)
// on the level of the last y label ("high" in this example).
// this is not desirable, we need to add a userprovidedylabelsboundarymin/max.
_linechartoptions = new linechartoptions();
_verticalbarchartoptions = new verticalbarchartoptions();
_chartdata = new chartdata();
_chartdata.datarowslegends = [
"java",
"dart",
"python",
"newspeak"];
_chartdata.datarows = [
[9.0, 4.0, 3.0, 9.0, ],
[7.0, 6.0, 7.0, 6.0, ],
[4.0, 9.0, 6.0, 8.0, ],
[3.0, 9.0, 10.0, 1.0, ],
];
_chartdata.xlabels = ["fast", "readable", "novel", "use"];
_chartdata.datarowscolors = [
colors.blue,
colors.yellow,
colors.green,
colors.amber,
];
_linechartoptions.useuserprovidedylabels = true; // use the labels below on y axis
_chartdata.ylabels = [
"ok",
"higher",
"high",
];
}
result line chart:
result in vertical bar chart: here the y values should be numeric (if any) as manual labeling “ok”, “higher”, high” does not make sense for stacked type charts.
verticalbar chart – one more example, showing positive/negative stacks:
user-provided data (y values), user-provided x labels, user-provided colors, user-provided data rows legends, user-provided y labels
this example has again user defined y labels, with a bar chart, using the smart auto-layout of user defined y labels. the chart shows negative and positive values similar to %down/%up stock charts.
code in defineoptionsanddata()
:
void defineoptionsanddata() {
// this example shows user defined y labels with
// a bar chart, showing negative and positive values
// similar to %down/%up stock charts.
_linechartoptions = new linechartoptions();
_verticalbarchartoptions = new verticalbarchartoptions();
_chartdata = new chartdata();
_chartdata.datarowslegends = [
"-2%_0%",
"<-2%",
"0%_+2%",
">+2%"];
// each column absolute values should add to same number todo- 100 would make more sense, to represent 100% of stocks in each category
_chartdata.datarows = [
[-9.0, -8.0, -8.0, -5.0, -8.0, ],
[-1.0, -2.0, -4.0, -1.0, -1.0, ],
[7.0, 8.0, 7.0, 11.0, 9.0, ],
[3.0, 2.0, 1.0, 3.0, 3.0, ],
];
_chartdata.xlabels = ["energy", "health", "finance", "chips", "oil"];
_chartdata.datarowscolors = [
colors.grey,
colors.red,
colors.greenaccent,
colors.black,
];
_linechartoptions.useuserprovidedylabels = false; // use labels below
//_chartdata.ylabels = [
// "ok",
// "higher",
// "high",
//];
}
result vertical bar chart:
Comments are closed.