Grid Styling

Now that we have learned how to construct our Grid System. Now it's time to style it. For this we will use the chartStylingData property which contains the property gridStyle.

CartesianGridStyle

Code Sample

...
BarChart(
  height: 400,
  chartStructureData: const CartesianChartStructureData(
    xUnitValue: 2,
    yUnitValue: 2,
    maxXValue: 10,
    maxYValue: 10,
  ),
  chartStylingData: CartesianChartStylingData(
    gridStyle: CartesianGridStyle(
      show: true,
      gridLineWidth: 3.0,
      gridLineColor: Colors.white,
    ),
  ),
  data: BarSeries(
    barData: [
      SimpleBar(
        xValue: 1,
        yValue: const BarData(yValue: 2.3),
      ),
    ],
  ),
),

Result

Class Properties

Name	Type	Required	Default Value
show	bool	false	true
gridLineWidth	double	false	0.5
gridLineColor	Color	false	Colors.black45