How to create custom cartesian graph like below screenshot with gradient background?
Hi Team,
I have been trying the build a graph like below using the sync fusion sfcartesian package. but not able to bring the exact style. can you please help with the same?
you can find my code below.
hi thanks for the reply. i tried with the area series.
still have few questions.
how do we start the area grap from start of the interval axis like in above screenshot?
right now it starts with center of the each interval.
how do we bring double line label for the x axis? like in the above screenshot?
How do we make the y axis label as const from 0 to 100 % as my data will always be less than 100 and i want to show the labels till 100. ?
thanks.
Hi Sabarinathan,
Query 1: how do we start the area gap from start of the interval axis like in above screenshot?
You can set the labelPlacement property as LabelPlacement.onTicks in the primaryXAxis property to render the Area Series and x-axis labels from start of the interval axis as mentioned.
Shared the User Guide documentation and Sample Browser links below regarding the LabelPlacement of the Category Axis for your reference.
UG: https://help.syncfusion.com/flutter/cartesian-charts/axis-types#placing-labels-between-the-ticks.
SB: https://flutter.syncfusion.com/#/cartesian-charts/axis-types/category/label-placement.
Query 2: how do we bring double line label for the x axis? like in the above screenshot?
We have given the newline symbol ‘/n’ to the data values of the x axis to render the labels in next line. However, you can also use the axisLabelFormatter callback to modify and customize the axis labels according to your needs.
Shared the User Guide documentation link below regarding the axisLabelFormatter callback for your reference.
UG: https://help.syncfusion.com/flutter/cartesian-charts/callbacks#axislabelformatter.
Query 3: How do we make the y axis label as const from 0 to 100 % as my data will always be less than 100 and I want to show the labels till 100?
You can use the visibleMaximum and interval properties of the primaryYAxis to achieve the mentioned requirement. Here, we have set visibleMaximum property and interval property as 100 and 25 respectively, to achieve the output as mentioned in the provided snapshot.
Kindly refer the code snippet below:
|
class _MainAppState extends State<MainApp> { late List<GoalHistoryData> _chartData;
@override void initState() { _chartData = [ GoalHistoryData('Jul \n 11 - 17', 75), GoalHistoryData('Jul \n 18 - 14', 55), GoalHistoryData('Jul \n 25 - 31', 75), GoalHistoryData('Aug \n 01 - 07', 50), GoalHistoryData('Aug \n 08 - 14', 75), GoalHistoryData('Aug \n 15 - 20', 45), GoalHistoryData('Aug \n 21 - 38', 100), ]; super.initState(); }
@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Padding( padding: const EdgeInsets.all(10.0), child: SfCartesianChart( primaryXAxis: CategoryAxis( labelPlacement: LabelPlacement.onTicks, majorGridLines: const MajorGridLines( color: Color(0xFF364254), ), ), primaryYAxis: NumericAxis( interval: 25, visibleMaximum: 100, labelFormat: '{value}%', majorGridLines: const MajorGridLines( color: Color(0xFF364254), ), ), series: <CartesianSeries<GoalHistoryData, String>>[ AreaSeries<GoalHistoryData, String>( dataSource: _chartData, markerSettings: const MarkerSettings( isVisible: true, borderColor: Color.fromRGBO(07, 177, 165, 100), height: 10, width: 10, ), xValueMapper: (GoalHistoryData data, _) => data.dateRange, yValueMapper: (GoalHistoryData data, _) => data.percentage, borderColor: const Color.fromRGBO(07, 177, 165, 100), gradient: const LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ Color.fromRGBO(25, 97, 102, 90), Color.fromRGBO(29, 82, 90, 50), Color.fromRGBO(37, 48, 62, 05), ], stops: [0.5, 0.75, 1], ), borderWidth: 3, borderDrawMode: BorderDrawMode.top, ), ], ), )), ); } } |
Snapshot:
If you have further queries, please get back to us.
Regards,
Hari Hara Sudhan. K.
Hi Sabarinathan,
You can achieve the mentioned requirement using the onMarkerRender callback by setting the height and width of the marker as zero only when the y values are equal to zero. If the y values are not zero, then marker will render based on the height and width of the marker given in the markerSettings property.
Kindly refer the code snippet below:
|
class _MainAppState extends State<MainApp> { late List<GoalHistoryData> _chartData;
@override void initState() { _chartData = [ GoalHistoryData('Jul \n 11 - 17', 75), GoalHistoryData('Jul \n 18 - 14', 00), GoalHistoryData('Jul \n 25 - 31', 75), GoalHistoryData('Aug \n 01 - 07', 50), GoalHistoryData('Aug \n 08 - 14', 75), GoalHistoryData('Aug \n 15 - 20', 00), GoalHistoryData('Aug \n 21 - 38', 100), ];
super.initState(); }
@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Padding( padding: const EdgeInsets.all(10.0), child: SfCartesianChart( onMarkerRender: (markerArgs) { if (_chartData[markerArgs.pointIndex!].percentage == 0) { markerArgs.markerHeight = 0; markerArgs.markerWidth = 0; } }, primaryXAxis: CategoryAxis( labelPlacement: LabelPlacement.onTicks, majorGridLines: const MajorGridLines( color: Color(0xFF364254), ), ), primaryYAxis: NumericAxis( interval: 25, visibleMaximum: 100, labelFormat: '{value}%', majorGridLines: const MajorGridLines( color: Color(0xFF364254), ), ), series: <CartesianSeries<GoalHistoryData, String>>[ AreaSeries<GoalHistoryData, String>( dataSource: _chartData, markerSettings: const MarkerSettings( isVisible: true, borderColor: Color.fromRGBO(07, 177, 165, 100), height: 10, width: 10, ), xValueMapper: (GoalHistoryData data, _) => data.dateRange, yValueMapper: (GoalHistoryData data, _) => data.percentage, borderColor: const Color.fromRGBO(07, 177, 165, 100), gradient: const LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ Color.fromRGBO(25, 97, 102, 90), Color.fromRGBO(29, 82, 90, 50), Color.fromRGBO(37, 48, 62, 05), ], stops: [0.5, 0.75, 1], ), borderWidth: 3, borderDrawMode: BorderDrawMode.top, ), ], ), ), ), ); } }
class GoalHistoryData { GoalHistoryData(this.dateRange, this.percentage); final String dateRange; final double percentage; } |
Snapshot:
You can modify the shared code snippet according to your needs and if you have further queries, please get back to us.
Regards,
Hari Hara Sudhan. K.
