This is a question for Flutter development using charts_flutter. Is there a parameter to fix the maximum value on the measure axis? I'm currently using desiredTickCount as a hack but I ideally only want 3 tickers (0,5,10) for a range of 0-10 on the measure axis.
Code snippet:
Widget _createChart() {
return new charts.BarChart(
_createSampleData(),
animate: true,
vertical: false,
primaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec: new charts.BasicNumericTickProviderSpec(
desiredTickCount: 11,
),
),
barRendererDecorator: new charts.BarLabelDecorator(),
// Hide domain axis.
domainAxis:
new charts.OrdinalAxisSpec(renderSpec: new charts.NoneRenderSpec()),
);
}
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [
new OrdinalSales('Liver', 8),
new OrdinalSales('Heart', 4),
new OrdinalSales('Spleen', 5),
new OrdinalSales('Lung', 1),
new OrdinalSales('Kidney', 2),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Sales',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: data,
// Set a label accessor to control the text of the bar label.
labelAccessorFn: (OrdinalSales sales, _) => '${sales.year}',
),
];
}
}
class OrdinalSales {
final String year;
final int sales;
OrdinalSales(this.year, this.sales);
}
If you really just want 0, 5 and 10 try using a StaticNumericTickProviderSpec
primaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec: new charts.StaticNumericTickProviderSpec(
<charts.TickSpec<num>>[
charts.TickSpec<num>(0),
charts.TickSpec<num>(5),
charts.TickSpec<num>(10),
],
),
),
Related
I want to show data when i clicked dot plot chats
like this (for example i use SfCircularChart but i want to use Scatter it's not free for SfCircularChart ,So I had to build it myself):
My code result this:
I want this:
this is my code:
class SimpleScatterPlotChart extends StatelessWidget {
List<charts.Series<_HeartRateData, num>> seriesList;
final bool animate;
SimpleScatterPlotChart({required this.seriesList, this.animate = false});
factory SimpleScatterPlotChart.withSampleData() {
return new SimpleScatterPlotChart(
seriesList: _createSampleData(),
animate: false,
);
}
#override
Widget build(BuildContext context) {
return Container(
height: 250,
width: 350,
child: new charts.ScatterPlotChart(
seriesList,
animate: animate,
primaryMeasureAxis: new charts.NumericAxisSpec(
renderSpec: new charts.GridlineRendererSpec(
labelStyle: new charts.TextStyleSpec(
color: charts.Color.fromHex(code: '#7A7A7A')
),
)
),
//primaryMeasureAxis: new charts.NumericAxisSpec(renderSpec: new charts.NoneRenderSpec()),
domainAxis: charts.NumericAxisSpec(
showAxisLine: false,
renderSpec: charts.NoneRenderSpec(),
),
),
);
}
/// Create one series with sample hard coded data.
static List<charts.Series<_HeartRateData, num>> _createSampleData() {
return [
new charts.Series<_HeartRateData, num>(
id: 'Sales',
colorFn: (_HeartRateData sales, _) {
//final bucket = sales.heartRate / maxMeasure;
if (sales.heartRate < 61) {
return charts.Color.fromHex(code: '#F8D277');
} else if (sales.heartRate < 100) {
return charts.Color.fromHex(code: '#61D2A4');
} else {
return charts.Color.fromHex(code: '#DD5571');
}
},
domainFn: (_HeartRateData sales, _) => sales.date,
measureFn: (_HeartRateData sales, _) => sales.heartRate,
radiusPxFn: (_HeartRateData sales, _) => sales.radius,
data: apiData,
),
];
}
}
i'm using charts_flutter: ^0.12.0 to implement bar chart with fixed time like 6,8,10,12,14,16,18,22 hours of the day in x axis, but with no success, tried the example but i get only two label's on the x axis 6 and 18 corresponding to the data, kindly help me with implementing the same. Trying to achieve as shown in the pic
The code sample i have tried is
class ChartsDaily extends StatelessWidget {
List<charts.Series<dynamic, DateTime>> seriesList = _createSampleData();
bool animate = false;
//ChartsDaily(this.seriesList, {this.animate = false});
ChartsDaily({Key? key}) : super(key: key);
/// Creates a [TimeSeriesChart] with sample data and no transition.
factory ChartsDaily.withSampleData() {
return ChartsDaily();
}
#override
Widget build(BuildContext context) {
return charts.TimeSeriesChart(
seriesList,
defaultRenderer: charts.BarRendererConfig<DateTime>(
barRendererDecorator:
charts.BarLabelDecorator<DateTime>() // charts.BarLabelDecorator
),
animate: animate,
// Optionally pass in a [DateTimeFactory] used by the chart. The factory
// should create the same type of [DateTime] as the data provided. If none
// specified, the default creates local date time.
// dateTimeFactory: const charts.LocalDateTimeFactory(),
domainAxis: charts.DateTimeAxisSpec(
tickProviderSpec: charts.DayTickProviderSpec(increments: [1]),
tickFormatterSpec: charts.AutoDateTimeTickFormatterSpec(
day: charts.TimeFormatterSpec(
format: 'HH:mm', transitionFormat: 'HH:mm')),
),
secondaryMeasureAxis: charts.NumericAxisSpec(
renderSpec: charts.GridlineRendererSpec(
lineStyle: charts.LineStyleSpec(
dashPattern: [4, 4],
color: charts.ColorUtil.fromDartColor(Colors.grey.shade300))),
tickProviderSpec: charts.BasicNumericTickProviderSpec(
desiredMinTickCount: 5,
desiredTickCount: 5,
dataIsInWholeNumbers: true,
zeroBound: true,
)),
// domainAxis: charts.DateTimeAxisSpec(
// tickProviderSpec: charts.DateTimeEndPointsTickProviderSpec(),
// tickFormatterSpec: charts.AutoDateTimeTickFormatterSpec(
// day: charts.TimeFormatterSpec(
// format: 'HH:mm', transitionFormat: 'HH:mm', noonFormat: 'HH:mm'),
// // hour: charts.TimeFormatterSpec(format: 'Hm', transitionFormat: 'Hm'),
// ),
// showAxisLine: false,
// viewport: charts.DateTimeExtents(
// start: DateTime(2022, 05, 04, 06), end: DateTime(2022, 05, 04, 22)),
// ),
);
}
/// Create one series with sample hard coded data.
static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
final data = [
TimeSeriesSales(DateTime(2022, 5, 4, 6, 0), 5),
TimeSeriesSales(DateTime(2022, 5, 4, 10, 30), 25),
TimeSeriesSales(DateTime(2022, 5, 4, 14, 0), 100),
TimeSeriesSales(DateTime(2022, 5, 4, 18, 0), 75),
];
return [
charts.Series<TimeSeriesSales, DateTime>(
id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (TimeSeriesSales sales, _) => sales.time,
measureFn: (TimeSeriesSales sales, _) => sales.sales,
data: data,
)
];
}
}
/// Sample time series data type.
class TimeSeriesSales {
final DateTime time;
final int sales;
TimeSeriesSales(this.time, this.sales);
}
Also need to have y axis values not starting from 0. TIA
I think you need the StaticNumericTickProviderSpec for the domainAxis of your chart.
This is the example from Google. I hope it can help you
How can I set the range in x axis in charts_flutter? My data sample is like (5000, 5.0),(5001, 25.2),(5002, 100.5),(5003, 75.8).
My code is
/// Example of a simple line chart.
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';
class SimpleLineChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
SimpleLineChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and no transition.
factory SimpleLineChart.withSampleData() {
return SimpleLineChart(
_createSampleData(),
// Disable animations for image tests.
animate: false,
);
}
#override
Widget build(BuildContext context) {
return Container(
height: 300,
// decoration: const BoxDecoration(color: Color(0xff232d37)),
width: double.infinity,
padding:
const EdgeInsets.only(right: 18.0, left: 12.0, top: 24, bottom: 12),
child: charts.LineChart(seriesList, animate: animate),
);
}
/// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [
LinearSales(5000, 5.0),
LinearSales(5001, 25.2),
LinearSales(5002, 100.5),
LinearSales(5003, 75.8),
];
return [
charts.Series<LinearSales, int>(
id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) {
return sales.year;
},
measureFn: (LinearSales sales, _) {
return sales.sales;
},
data: data,
domainLowerBoundFn: (s, _) => 5000,
domainUpperBoundFn: (s, _) => 5010,
)
];
}
}
/// Sample linear data type.
class LinearSales {
final int year;
final double sales;
LinearSales(this.year, this.sales);
}
The charts looks like
It shows a straight line but I want x axis to start at 5000 and end on 5010. I tried setting it in
domainLowerBoundFn and domainUpperBoundFn but it still starts at 0. How do I fix it?
Ref: Charts Flutter Gallery
You can set domainAxis.
How about this?
child: charts.LineChart(
seriesList,
animate: animate,
domainAxis: const charts.NumericAxisSpec(
tickProviderSpec:
charts.BasicNumericTickProviderSpec(zeroBound: false),
viewport: charts.NumericExtents(5000.0, 5005.0),
),
),
or this?
child: charts.LineChart(
seriesList,
animate: animate,
domainAxis: const charts.NumericAxisSpec(
tickProviderSpec:
charts.BasicNumericTickProviderSpec(zeroBound: false),
),
),
You can use the next code for Y-axis:
primaryMeasureAxis: charts.NumericAxisSpec(
tickProviderSpec:
charts.BasicNumericTickProviderSpec(desiredTickCount: 3)),
Full example looks like:
ScatterPlotChart(
[seriesDistorted],
animate: true,
domainAxis: const NumericAxisSpec(
tickProviderSpec: BasicNumericTickProviderSpec(
// Vertical axis every 2 ticks from 0 to 10
dataIsInWholeNumbers: true,
zeroBound: false,
desiredTickCount: 6),
),
primaryMeasureAxis: const NumericAxisSpec(
tickProviderSpec: BasicNumericTickProviderSpec(desiredTickCount: 6)),
);
I am using charts_flutter package and I can't find a way to hide\disable the grid and axis labels.
Relevant code:
class _VennState extends State<VennDiagramWidget> {
List<charts.Series<VennCircle, int>> circlesList;
static List<charts.Series<VennCircle, int>> _createRandomCircles() {
final circles = [
VennCircle('red', 1, 5, 0.8, 'Venn1'),
VennCircle('black', 2, 10, 0.5, 'Venn2'),
VennCircle('green', 3, 20, 1, 'Venn3'),
];
return [
new charts.Series(
id: 'circles',
data: circles,
domainFn: (VennCircle venn, _) => venn.circleSize,
measureFn: (VennCircle venn, _) => venn.opacity,
colorFn: (VennCircle venn, _) {
if (venn.circleColor == 'red') {
return charts.MaterialPalette.red.shadeDefault;
} else if (venn.circleColor == 'black') {
return charts.MaterialPalette.black;
}
return charts.MaterialPalette.green.shadeDefault;
},
radiusPxFn: (VennCircle venn, _) => venn.circleSize,
),
];
}
scatterPlot() {
return new charts.ScatterPlotChart(
circlesList,
animate: true,
);
}
Right now, that's how it looks
I wish to remove the values labels on both axis and the grid\ticks so I can see only the circles.
Try these options:
charts.ScatterPlotChart(
seriesList,
animate: animate,
primaryMeasureAxis:
new charts.NumericAxisSpec(
showAxisLine: true,
renderSpec: new charts.NoneRenderSpec(),
),
domainAxis:
new charts.NumericAxisSpec(
showAxisLine: true,
renderSpec: new charts.NoneRenderSpec(),
),
);
I'm currently trying to restyle a design layout. I got most of it through try and error. The only part which I can't figure out are:
1.) The black axis on the left and bottom. So that only those are black
2.) The light grey axis inside. How can I apply opacity on the color or use my own color? I can only use charts.MaterialPalette and I can't figure out how to define my own.
3.) Also how to add the light grey axis in the middle. I only got the vertical ones.
4.) Is there a way to add a corner radius for the lines?
This is what it looks like right now:
This is what I want to achieve:
Here's my code so far:
/// Example of a line chart rendered with dash patterns.
class DashPatternLineChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
DashPatternLineChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and no transition.
factory DashPatternLineChart.withSampleData() {
return new DashPatternLineChart(
_createSampleData(),
// Disable animations for image tests.
animate: false,
);
}
#override
Widget build(BuildContext context) {
return new charts.LineChart(seriesList,
animate: animate,
layoutConfig: charts.LayoutConfig(
leftMarginSpec: charts.MarginSpec.fixedPixel(0),
topMarginSpec: charts.MarginSpec.fixedPixel(75),
rightMarginSpec: charts.MarginSpec.fixedPixel(0),
bottomMarginSpec: charts.MarginSpec.fixedPixel(175)
),
flipVerticalAxis: false,
defaultInteractions: false,
domainAxis: new charts.NumericAxisSpec(
renderSpec: charts.GridlineRendererSpec(
lineStyle: charts.LineStyleSpec(
color: charts.MaterialPalette.white,
thickness: 1,
)
),
tickProviderSpec: new charts.StaticNumericTickProviderSpec(
// Create the ticks to be used the domain axis.
<charts.TickSpec<num>>[
new charts.TickSpec(0, label: '0', style: charts.TextStyleSpec(fontSize: 14)),
new charts.TickSpec(50, label: '50', style: charts.TextStyleSpec(fontSize: 14)),
new charts.TickSpec(100, label: '100', style: charts.TextStyleSpec(fontSize: 14)),
],
)),
primaryMeasureAxis: new charts.NumericAxisSpec(
renderSpec: charts.GridlineRendererSpec(
labelOffsetFromAxisPx: -20,
labelAnchor: charts.TickLabelAnchor.after,
lineStyle: charts.LineStyleSpec(
color: charts.MaterialPalette.transparent,
thickness: 0,
)
),
tickProviderSpec: new charts.StaticNumericTickProviderSpec(
// Create the ticks to be used the domain axis.
<charts.TickSpec<num>>[
new charts.TickSpec(100, label: '100%', style: charts.TextStyleSpec(fontSize: 14)),
],
)
));
}
/// Create three series with sample hard coded data.
/// Create three series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() {
final myFakeDesktopData = [
new LinearSales(0, 100),
new LinearSales(25, 85),
new LinearSales(30, 80),
new LinearSales(45, 60),
new LinearSales(30, 40),
new LinearSales(25, 20),
new LinearSales(0, 0),
];
return [
new charts.Series<LinearSales, int>(
id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.white,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
domainUpperBoundFn: (LinearSales sales, _) => sales.domainUpper,
domainLowerBoundFn: (LinearSales sales, _) => sales.domainLower,
measureUpperBoundFn: (LinearSales sales, _) => sales.measureUpper,
measureLowerBoundFn: (LinearSales sales, _) => sales.measureLower,
strokeWidthPxFn: (_, __) => 4,
data: myFakeDesktopData,
)
];
}
}
/// Sample linear data type.
class LinearSales {
final int year;
final int sales;
final int domainUpper = 100;
final int domainLower = 0;
final int measureUpper = 100;
final int measureLower = 0;
LinearSales(this.year, this.sales);
}
I don't have an answer for all your questions, but I was able to supply my own colors this way:
charts.Color.fromHex(code: "#ff0000")
or semitransparent like this:
charts.Color(r: 255, g: 0, b: 0, a: 128)