I am using FLChart in my app to display some charts. That is working just fine. However I would like to be able to draw some vertical dotted lines into my graph like this:
As you can see, some of them should also have Numbers on top of them. Ive searched for quite some time now but could not find anything like this.
I found somehting similar looking on their example :
But it is not quite the same. The lines should be independent from any dots. Is that possible?
If I understand your goal correctly, you simply want to get the result of the given example except for the dots for each data point.
You can get rid of the points by changing the FlDotData passed to the TouchedSpotIndicatorData. Going back to the example code you linked, you could replace:
FlDotData(
show: true,
getDotPainter: (spot, percent, barData, index) =>
FlDotCirclePainter(
radius: 8,
color: lerpGradient(
barData.colors,
barData.colorStops!,
percent / 100,
),
strokeWidth: 2,
strokeColor: Colors.black,
),
),
with:
FlDotData(
show: false,
)
You can draw vertical dotted line with this code snippet. Line chart data has property named extraLinesData. You can use it like below.
return LineChartData(
extraLinesData: ExtraLinesData(verticalLines: <VerticalLine>[
VerticalLine(x: 2, color: Constants.PRIMARY_COLOR_1, dashArray: [4,4]),
],) ...,
Related
I want to be able to have a vertical line from the x-axis to the height of the y value, which is dynamic as it is being taken from a database.
example: for the data point 1 Jan, I want to have a plotband associatedAxisEnd of 45 , 2 Jan associatedAxisEnd of 65 etc...
I'm only able to create a constant associatedAxisEnd height currently, is there a way to be able to loop through the chart data and set the associatedAxisEnd height dynamically?
primaryXAxis: CategoryAxis(
axisLine: const AxisLine(width: 3),
majorGridLines: const MajorGridLines(width: 0,
color: Colors.transparent),
plotBands:
<PlotBand>[
PlotBand(
isVisible: true,
isRepeatable: true,
repeatEvery: 2,
size: 1,
borderWidth: 1,
repeatUntil: 6,
associatedAxisEnd: 50, // is it possible to have a loop on this line?
borderColor: Colors.grey,
dashArray : const <double>[5, 5]
),
]
)
You cannot have a loop when setting values for the PlotBand’s associatedAxisEnd property. However, you can achieve your requirement by adding individual plot band lines for the chart data points as per required.
We have created a simple sample in which we have added plot band lines for the chart data points by lopping through the chart data and attached the sample below for reference. Also appended the user guide documentation link for plot line rendering below for reference.
https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#plot-line
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/i404038-1323531402
I am using the google_maps_flutter: ^2.1.3 package in my Flutter project that I am currently developing and I want to show active regions on the map in the application. I tried to show the active regions on the map using polygons, but I couldn't paint the part outside of these regions a different color. Actually, exactly what I want on the map, everywhere will be gray (to be clear that it is not active), but some areas will be white (to be clear that it is active) surrounded by borders. You can understand exactly what I want by looking at the image below. In this way, there will be more than one active region on the map.
Note: As I mentioned before, I can get this image using polygons, but I cannot make the outside of the polygons gray.
Polygon has a holes parameter which accepts a list of List<LatLng>. What you want to do is create one big polygon that covers the world (or viewport) and set that to be the background color. Then put your actual polygon(s) that you want to draw in the holes section to create a cutout:
Polygon maskedArea = new Polygon(
fillColor: Colors.black.withOpacity(0.5),
polygonId: new PolygonId('test'),
holes: [<LatLng>[new LatLng(10, 10), new LatLng(40, 10), new LatLng(40, 40), new LatLng(10, 40)]],
points: <LatLng>[new LatLng(0, 0), new LatLng(50, 0), new LatLng(50, 50), new LatLng(0, 50)]
);
If you're open to using plugins, there is also syncfusion_flutter_maps which seems to use a custom vector drawing solution to achieve a more robust result through the MapPolygonLayer.inverted constructor (I have not used this plugin myself but have used others from the developer and would anticipate no issues here).
Based on Matt's answer, I came up with the exact solution. First, I couldn't draw a polygon that would cover the entire world, and instead I increased the polygon count to 2. I drew 2 polygons covering the whole world, from 0 to east and from 0 to west. I set the strokeWidth values to 0 so that these polygons do not draw lines from the north pole to the south pole. Later, I showed the active areas in holes, but because my strokeWidth value was 0, the border line did not occur. To avoid this event, I created a new polygon with the fillColor value Colors.transparent and the same coordinates, and set the strokeWidth value to 2.
My sample codes are as follows:
polygon.add(
Polygon(
fillColor: Colors.black.withOpacity(0.5),
polygonId: const PolygonId('test'),
holes: [if (pointsFromService.length != 0) pointsFromService],
points: const [
LatLng(-89, 0),
LatLng(89, 0),
LatLng(89, 179.999),
LatLng(-89, 179.999),
],
visible: true,
geodesic: false,
strokeWidth: 0,
),
);
polygon.add(
Polygon(
fillColor: Colors.black.withOpacity(0.5),
polygonId: const PolygonId('test2'),
points: const [
LatLng(-89.9, 0),
LatLng(89.9, 0),
LatLng(89.9, -179.999),
LatLng(-89.9, -179.999),
],
visible: true,
geodesic: false,
strokeWidth: 0,
),
);
if (pointsFromService.length != 0) {
polygon.add(
Polygon(
fillColor: Colors.transparent,
strokeColor: primaryColor,
polygonId: const PolygonId('test3'),
points: pointsFromService,
visible: true,
geodesic: false,
strokeWidth: 2,
),
);
}
}
The result is as follows:
(Note that the gray area covers the whole world)
I'm using this library to show charts in my app.
With my data, the x-axis is always a DateTime
All I want to do is explicitly set the x-axis labels to show and WHERE to show them if possible, e.g.
Show 2 or 4 labels evenly spaced, beginning (so centred under the y-axis) and at end of the x-axis
Like this:
or this:
Here's what I have so far which doesn't quite work, but I'm not sure why:
return DateTimeAxis(
dateFormat: (showXAxisAsName) ? DateFormat("MMM") : DateFormat("dd/MM"),
majorGridLines: MajorGridLines(width: 0),
majorTickLines: MajorTickLines(width: 0),
axisLine: AxisLine(
width: 1,
color: (axesColour != null) ? axesColour : GTColors.lightGrey,
),
labelStyle: GTTextStyle.caption2.copyWith(
color: (axesColour != null) ? axesColour : GTColors.lightGrey,
),
minimum: (hasData) ? DateTime(first.year, first.month) : null,
maximum: (hasData) ? DateTime(last.year, last.month) : null,
intervalType: DateTimeIntervalType.months,
);
We suggest you the axisLabelFormatter to customize the axis label style and text based on your requirement,if you want to show only the first and last label then you can return the empty string in this callback except for the first and last label. In another way you have to set the interval property in the axis it defines the interval between the data points, so set the interval value based on your requirement.
UG:
• https://help.syncfusion.com/flutter/cartesian-charts/callbacks#axislabelformatter
• https://help.syncfusion.com/flutter/cartesian-charts/axis-types#customizing-interval
I'm trying to get my TextButtons smaller to make more room on the Row.
TextButton( // Reply button
child: Text('Reply'),
style: ButtonStyle(
padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.fromLTRB(0, 0, 0, 0)),
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
)
)
Here's what it looks like in the Inspector
Is there any way to get the buttons and the icon up close and personal with each other and get rid of those yellow lines? I must be missing something. Is there a margin property I'm missing?
Any help would be greatly appreciated.
Wrap your text button inside an sized box . It will reduce its size.Give dimensions of sized box according to your requirements.
I need the legends of Google chart to get wrapped (comes in new line) automatically if it exceeds container area.
I don't want scroll button as it is not enough convenient.
With available customization options, seems it cannot be done.
Any other way?
Use the maxLines property for the legend.
i.e.:
options.legend = {position: 'top', maxLines: 5};
Note that this undocumented property only works if the legend is positioned at the top and there is enough vertical space to render both the chart and multi-line legend.
with the maxLines property for the legends, chartArea with specific set of values can help in rendering the display.
legend: { position: "top", alignment: "start", maxLines: 2 },
chartArea: {top:50,bottom:30,right:0,left:50, 'width': '100%' }
I did a lot of testing of this and it seems that you need to have chartArea width and height set to 'auto'. Still not perfect but sort of OK.