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(),
),
);
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 am using charts_flutter to draw a scatter plot.
So far, this is the relevant code I wrote:
class _VennState extends State<VennDiagramWidget> {
List<charts.Series<VennCircle, int>> circlesList;
static List<charts.Series<VennCircle, int>> _createRandomCircles() {
final circles = [
VennCircle('red', 1, 50, 0.8, 'Venn1', 15, 35),
VennCircle('black', 2, 150, 0.5, 'Venn2', 18, 20),
VennCircle('green', 3, 200, 1, 'Venn3', 25, 25),
];
return [
new charts.Series(
id: 'circles',
data: circles,
domainFn: (VennCircle venn, _) => venn.x_value,
measureFn: (VennCircle venn, _) => venn.y_value,
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,
domainUpperBoundFn: (VennCircle venn, _) => 50,
domainLowerBoundFn: (VennCircle venn, _) => 0,
measureUpperBoundFn: (VennCircle venn, _) => 50,
measureLowerBoundFn: (VennCircle venn, _) => 0,
),
];
}
scatterPlot() {
return new charts.ScatterPlotChart(
circlesList,
animate: true,
primaryMeasureAxis: new charts.NumericAxisSpec(
showAxisLine: false,
renderSpec: new charts.NoneRenderSpec(),
),
domainAxis: new charts.NumericAxisSpec(
showAxisLine: false,
renderSpec: new charts.NoneRenderSpec(),
),
);
}
I couldn't find a way to change the opacity of each circle. (each circle can have a different opacity)
I came across this Opacity widget but I wasn't able to apply it - probably because it should be used on a widget.
On that note, how can I define VennCircle as widget and not an object?
EDIT: I was able to do that simply by modifying the colorFn function:
colorFn: (VennCircle venn, _) {
if (venn.circleColor == 'red') {
return charts.Color.fromOther(
color: charts.ColorUtil.fromDartColor(
Color.fromARGB(100, 255, 0, 0)));
} else if (venn.circleColor == 'black') {
return charts.ColorUtil.fromDartColor(Color.fromARGB(95, 0, 0, 0));
}
return charts.ColorUtil.fromDartColor(Color.fromARGB(95, 0, 255, 0));
},
Working on Flutter Chart, the domainFn lists the days in a month, 1...31, but they are overlapping, I would like to set the label in a scale of 5 i.e 5, 10, 15, 20, 25, 30.
List<charts.Series<EventChart, String>> _createChart(
List<EventChart> eventChart) {
return [
charts.Series<EventChart, String>(
id: widget.activity,
domainFn: (EventChart eventChart, _) => eventChart.label,
measureFn: (EventChart eventChart, _) => eventChart.count,
data: eventChart,
measureUpperBoundFn: (EventChart eventChart, _) =>
eventChart.count < 4 ? eventChart.count + 4 : eventChart.count,
measureLowerBoundFn: (EventChart eventChart, _) => 0,
fillColorFn: (EventChart eventChart, _) {
return charts.MaterialPalette.blue.shadeDefault;
},
)
];
}
);
BARCHART WIDGET:
Flexible(
child: charts.BarChart(
_createChart(pro.eventChart(widget.activity)
),
animate: true,
behaviors: [
charts.LinePointHighlighter(
drawFollowLinesAcrossChart: true,
showHorizontalFollowLine:
charts.LinePointHighlighterFollowLineType.all
)
],
),
You can select the ticks to be displayed by providing a tickProviderSpec in the domainAxis:
#override
Widget build(BuildContext context) {
return new charts.BarChart(
seriesList,
animate: animate,
domainAxis: new charts.OrdinalAxisSpec(
tickProviderSpec: charts.StaticOrdinalTickProviderSpec(
[
charts.TickSpec('10'),
charts.TickSpec('15'),
charts.TickSpec('20'),
...
]
)),
);
}
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)
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),
],
),
),