fl_chart
fl_chart copied to clipboard
imaNNeo
LineChart with line color varying with absolute values
Is it possible to define the line chart bar color depending on absolute values?
E.g. if FlSpot.y > 25-> yellow else if FlSpot.y < 25-> green
But keep it like this all the time.
I tried to do it with the gradient but noticed that the stops value are a percentage of what is currently shown on the chart. I wanted to show a "sliding live window" for a temperature chart, based on your example in line_chart_sample10
But the thing is the gradient applies to what is currently being displayed, so running a 5min window, if it happens to show temperatures between 20 and 25 and ones in the 25s will get the "hotter" colors, but moving along, and the temperature rises to something between 25 and 30, the 25s that previously got the hotter colors, will have the cooler colors as there are new maximums in the chart.
This is easily reproducible in that example if you reduce the limitCount to 20 and change the gradient to a vertical one.
I think that #285 was already requesting something like I want. Don't know if there has been any changes to the situation.
Hey guys you can add this kind of step gradient it will gives you absolute color
if we say our 0 is in the center and you want to show negative red and positive blue
gradient: LinearGradient( colors: [Colors.blue, Colors.blue, Colors.red, Colors.red,], stops: [0,0.5,0.5,1], begin: Alignment.topCenter, end: Alignment.bottomCenter ),
Did @sepehr13494's solution work for you?
Yes as you can see the image it's working
Did @sepehr13494's solution work for you?
Unfortunately for me, it didn't
So what's the problem?
I would love to have something along the line of the RangeAnnotations that apply to the line color rather than putting a box on the background
@sepehr13494 could you elaborate a little on how those colors work? I can't quite figure out how the values you give correspond to the line graph and colors im seeing
Is it possible to have the line color match certain ranges. Sort of like range annotations, but we dont want the extra annotation on the graph.
eg:
if 0 >= y-value <= 10, line color is red if 10 < y-value <= 20, line color is blue if 20 < y-value, line color is green here is a chart to illustrate (the values dont match the ranges I mentioned above, but it should demonstrate the idea)
Exactly this!
On Mon, May 1, 2023, 10:29 Zayin Krige @.***> wrote:
Is it possible to have the line color match certain ranges. Sort of like range annotations, but we dont want the extra annotation on the graph.
eg:
if 0 >= y-value <= 10, line color is red if 10 < y-value <= 20, line color is blue if 20 < y-value, line color is green here is a chart to illustrate (the values dont match the ranges I mentioned above, but it should demonstrate the idea)
https://user-images.githubusercontent.com/968412/232765222-33f9f979-c3a3-45dc-b34d-04a7fba70eac.png
— Reply to this email directly, view it on GitHub https://github.com/imaNNeo/fl_chart/issues/1044#issuecomment-1529519489, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABCPDQ637S2RJTWK7VUZ4Z3XD5673ANCNFSM5XV5JO3A . You are receiving this because you authored the thread.Message ID: @.***>
Is it possible to have the line color match certain ranges. Sort of like range annotations, but we dont want the extra annotation on the graph.
eg:
if 0 >= y-value <= 10, line color is red if 10 < y-value <= 20, line color is blue if 20 < y-value, line color is green here is a chart to illustrate (the values dont match the ranges I mentioned above, but it should demonstrate the idea)
@imaNNeo what is the best way out for this? in the line Paint only accepts one color, would that make it unfeasible?
At this time we do not support his feature, stay tuned for the next updates
In the more general related ticket, I posted my solution to the gradient problem: https://github.com/imaNNeo/fl_chart/issues/285#issuecomment-1553507717
That solution would probably work well here by using that solution together with a gradient with step values like sepehr13494 suggested.
2023 att in your line chart exists two parameters
**belowBarData**: ... ,
**aboveBarData**: BarAreaData(
spotsLine: BarAreaSpotsLine(
applyCutOffY: true,
checkToShowSpotLine: (spot) => spot.y < 0,
),
show: true,
applyCutOffY: true,
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: gradient
? [AppColors.chart_color, AppColors.color_15]
.map((color) => color.withOpacity(0.3))
.toList()
: [Colors.transparent, Colors.transparent],
),
),
In the more general related ticket, I posted my solution to the gradient problem: https://github.com/imaNNeo/fl_chart/issues/285#issuecomment-1553507717
That solution would probably work well here by using that solution together with a gradient with step values like sepehr13494 suggested.
Dose it support curved line?
