Axes Styling

Let's take a look at our Axes system now. By default, any Cartesian Type Chart will draw the Cartesian X & Y Axes. To style our axes, we will use the chartStylingData property which provides us the axisStyle property.

CartesianAxisStyle

Code Sample

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

Result

You may be intrigued before with the lack of minXValue and minYValue properties in ChartStructureData property before. This is because the chart auto shifts the origin points to present Negative Axes if Negative values are found.

Code Sample

...
BarChart(
  height: 400,
  chartStructureData: const CartesianChartStructureData(
    xUnitValue: 2,
    yUnitValue: 2,
    maxYValue: 10,
  ),
  chartStylingData: CartesianChartStylingData(
    axisStyle: CartesianAxisStyle(
      axisWidth: 3.0,
      axisColor: Colors.white,
    ),
    gridStyle: CartesianGridStyle(
      show: true,
      gridLineWidth: 1.0,
      gridLineColor: Colors.white,
    ),
  ),
  data: BarSeries(
    barData: [
      SimpleBar(
        xValue: 1,
        yValue: const BarData(yValue: 2.3),
      ),
      SimpleBar(
        xValue: 2,
        yValue: const BarData(yValue: 7.2),
      ),
      SimpleBar(
        xValue: 3,
        yValue: const BarData(yValue: -4.8), // Negative Data
      ),
    ],
  ),
),

Result

We can also add interval ticks along the axes. By default, ticks are not visible, and can be enabled individually with the default constructor or with the showTicks property of AxisTickConfig.forAllAxis constructor.

For Individual Axes

...
BarChart(
  ...
  chartStylingData: CartesianChartStylingData(
    axisStyle: CartesianAxisStyle(
      axisWidth: 3.0,
      axisColor: Colors.white,
      tickConfig: AxisTickConfig(
        showTicks: true,
        tickLength: 15.0,
        tickWidth: 1.0,
        tickColor: Colors.white,
        showTickOnLeftAxis: true,
        showTickOnBottomAxis: true,
      ),
    ),
    ...
  ),
  ...
),

For All Axes

...
BarChart(
  ...
  chartStylingData: CartesianChartStylingData(
    axisStyle: CartesianAxisStyle(
      axisWidth: 3.0,
      axisColor: Colors.white,
      tickConfig: AxisTickConfig.forAllAxis(
        showTicks: true,
        tickLength: 15.0,
        tickWidth: 1.0,
        tickColor: Colors.white,
      ),
    ),
    ...
  ),
  ...
),

Result

CartesianAxisStyle Class Properties

Name	Type	Required	Default Value
axisWidth	double	false	2.0
axisColor	Color	false	Colors.black45
tickConfig	AxisTickConfig	false	Class Defaults

AxisTickConfig Class Properties

Common Properties

Name	Type	Required	Default Value
tickLength	double	false	15.0
tickWidth	double	false	1.0
tickColor	Color	false	Colors.black45

Primary Constructor

Name	Type	Required	Default Value
showTickOnLeftAxis	bool	false	false
showTickOnTopAxis	bool	false	false
showTickOnBottomAxis	bool	false	false
showTickOnRightAxis	bool	false	false

forAllAxis

Name	Type	Required	Default Value
showTicks	bool	false	false