Is it possible to make graph grid like this?
Hi Syncfusion,
I want make grid lines with dash,
And it need shows only in the spline chart border and x-axis area. (image below)
Is it possible to make this?
Hi Viet Le,
We have analyzed your query and achieved the expected output by implementing a simple sample attached below. Here, to render the gridlines with dashes, you can use the dashArray property in the MajorGridLines using the majorGridLines property. In SfCartesianChart, the gridlines will be rendered fully based on the available plot area, and it is not possible to render the y axis gridlines within the series only. Instead, you can use plotBands property to render the dashed lines only within the series as required. To render the vertical dashed lines above the series, you can use the shouldRenderAboveSeries property inside the PlotBand.
We have customized the axis labels of the x axis using the axisLabelFormatter callback where we can customize the style and size of the axis labels in both x and y axis. You can use the borderDrawMode property as top to render the border only on the top side of the Spline Area Series and we can apply linear gradient using the gradient property in the Spline Area Series.
To avoid rendering the y axis as similar to the provided output, If the isVisible property of the YAxis is given as false, then the horizontal dashed grid lines also will not be rendered. So, to avoid this, we have given the width of the axis line and tick line as zero and given empty string to the axis labels using the axisLabelFormatter in the y axis to disable the y axis.
Used the trackball behavior to achieve the tooltip as shown in the given output. Here we have given the width of the trackball line as zero, so only the tooltip will be rendered. To apply gradient color to the trackball tooltip, used the builder property and customized the tooltip as required. Enabled the trackball marker using the markerVisibility property in the TrackballMarkerSettings to render the marker along with the tooltip.
Modify the below attached sample based
on your requirement.
Kindly refer the code snippet below:
|
class _MyHomePageState extends State<MyHomePage> { late List<ChartSampleData> _data; late TrackballBehavior _trackballBehavior; final TextStyle textStyle = const TextStyle( color: Colors.grey, fontSize: 14, fontWeight: FontWeight.w400, );
@override void initState() { _data = <ChartSampleData>[ ChartSampleData(x: 10, y: 18), ChartSampleData(x: 16, y: 19), ChartSampleData(x: 18, y: 20), ChartSampleData(x: 20, y: 22), ChartSampleData(x: 24, y: 23), ChartSampleData(x: 28, y: 24), ChartSampleData(x: 30, y: 26), ChartSampleData(x: 31, y: 27), ChartSampleData(x: 32, y: 27), ChartSampleData(x: 33, y: 28), ChartSampleData(x: 34, y: 28), ChartSampleData(x: 37, y: 30), ChartSampleData(x: 38, y: 30), ChartSampleData(x: 40, y: 31), ChartSampleData(x: 41, y: 31), ChartSampleData(x: 42, y: 31), ChartSampleData(x: 40, y: 31), ChartSampleData(x: 43, y: 31), ChartSampleData(x: 45, y: 31), ChartSampleData(x: 47, y: 31), ChartSampleData(x: 48, y: 31), ChartSampleData(x: 49, y: 31), ChartSampleData(x: 50, y: 32), ]; _trackballBehavior = TrackballBehavior( enable: true, lineWidth: 0, tooltipAlignment: ChartAlignment.far, markerSettings: const TrackballMarkerSettings( markerVisibility: TrackballVisibilityMode.visible, color: Colors.white, width: 10, borderColor: Colors.green, height: 10, borderWidth: 0.5, ), activationMode: ActivationMode.singleTap, tooltipDisplayMode: TrackballDisplayMode.nearestPoint, builder: (context, trackballDetails) { return Container( decoration: BoxDecoration( border: Border.all( color: Colors.lightGreen, width: 1, ), borderRadius: const BorderRadius.only( bottomRight: Radius.circular(5), topRight: Radius.circular(5), ), gradient: const LinearGradient( begin: Alignment.bottomLeft, end: Alignment.topRight, colors: [Colors.lightGreen, Colors.green], stops: [0.3, 0.7], ), ), width: 50, height: 25, child: Text( '+ ${_data[trackballDetails.pointIndex!].y}', textAlign: TextAlign.center, style: const TextStyle(color: Colors.white, fontSize: 14), ), ); }, tooltipSettings: const InteractiveTooltip( arrowWidth: 12.5, color: Colors.lightGreen, borderWidth: 0, borderColor: Colors.lightGreen, arrowLength: 8, ), ); super.initState(); }
@override Widget build(BuildContext context) { return Scaffold( body: SfCartesianChart( onMarkerRender: (markerArgs) { if (markerArgs.pointIndex != 1) { markerArgs.markerHeight = 0; markerArgs.markerWidth = 0; } }, primaryXAxis: NumericAxis( interval: 10, majorGridLines: const MajorGridLines( width: 0, dashArray: [5, 5], ), axisLine: const AxisLine( width: 0, dashArray: [5, 5], ), axisLabelFormatter: (axisLabelRenderArgs) { if (axisLabelRenderArgs.value == 10) { return ChartAxisLabel('T3', textStyle); } else if (axisLabelRenderArgs.value == 20) { return ChartAxisLabel('T4', textStyle); } else if (axisLabelRenderArgs.value == 30) { return ChartAxisLabel('T5', textStyle); } else if (axisLabelRenderArgs.value == 40) { return ChartAxisLabel('T6', textStyle); } else { return ChartAxisLabel('T7', textStyle); } }, plotBands: [ PlotBand( start: 20, end: 20, associatedAxisEnd: 22, dashArray: const [6, 6], borderWidth: 2, borderColor: Colors.green, shouldRenderAboveSeries: true, ), PlotBand( start: 30, end: 30, associatedAxisEnd: 26, dashArray: const [6, 6], borderWidth: 2, borderColor: Colors.green, shouldRenderAboveSeries: true, ), PlotBand( start: 40, end: 40, associatedAxisEnd: 31, dashArray: const [6, 6], borderWidth: 2, borderColor: Colors.green, shouldRenderAboveSeries: true, ), ], ), primaryYAxis: NumericAxis( isVisible: true, majorGridLines: const MajorGridLines( width: 1, dashArray: [5, 5], ), axisLine: const AxisLine( width: 0, ), majorTickLines: const MajorTickLines(width: 0), axisLabelFormatter: (axisLabelRenderArgs) { return ChartAxisLabel('', const TextStyle()); }, ), series: <CartesianSeries<ChartSampleData, num>>[ SplineAreaSeries<ChartSampleData, num>( dataSource: _data, xValueMapper: (ChartSampleData sales, int index) => sales.x, yValueMapper: (ChartSampleData sales, int index) => sales.y, name: 'Range Column', gradient: LinearGradient( begin: Alignment.bottomCenter, end: Alignment.topCenter, colors: [ Colors.white54, Colors.green.withOpacity(0.5), ], ), borderDrawMode: BorderDrawMode.top, borderColor: Colors.green, borderWidth: 0.5, ), ], trackballBehavior: _trackballBehavior, ), ); } } |
Snapshot:
If you have further queries, please get back to us.
Regards,
Hari Hara Sudhan. K.
Attachment: 183524_a4a25d3b.zip
