# 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

{% tabs %}
{% tab title="Code Sample" %}

<pre class="language-dart"><code class="lang-dart">...
BarChart(
  height: 400,
  chartStructureData: const CartesianChartStructureData(
    xUnitValue: 1,
    yUnitValue: 2,
    maxYValue: 10,
  ),
  chartStylingData: CartesianChartStylingData(
<strong>    axisStyle: CartesianAxisStyle(
</strong><strong>      axisWidth: 3.0,
</strong><strong>      axisColor: Colors.white,
</strong><strong>    ),
</strong>    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),
      ),
    ],
  ),
),
</code></pre>

{% endtab %}

{% tab title="Result" %}

<figure><img src="https://672051664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JD7NLiao8wvvuzkAjT9%2Fuploads%2F2d5rXfni5gYnvRXMNtMT%2FScreenshot%202023-08-08%20at%203.28.51%20PM.png?alt=media&#x26;token=28ea654e-8dc5-407f-b7b0-512438239846" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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.

{% tabs %}
{% tab title="Code Sample" %}

<pre class="language-dart"><code class="lang-dart">...
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,
<strong>        yValue: const BarData(yValue: -4.8), // Negative Data
</strong>      ),
    ],
  ),
),
</code></pre>

{% endtab %}

{% tab title="Result" %}

<figure><img src="https://672051664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JD7NLiao8wvvuzkAjT9%2Fuploads%2F1x8g1cpfjMdzmZPA4Tzg%2FScreenshot%202023-08-08%20at%203.31.17%20PM.png?alt=media&#x26;token=290156f3-d28b-431c-b615-1e89b7997898" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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.

{% tabs %}
{% tab title="For Individual Axes" %}

<pre class="language-dart"><code class="lang-dart">...
BarChart(
  ...
  chartStylingData: CartesianChartStylingData(
    axisStyle: CartesianAxisStyle(
      axisWidth: 3.0,
      axisColor: Colors.white,
<strong>      tickConfig: AxisTickConfig(
</strong><strong>        showTicks: true,
</strong><strong>        tickLength: 15.0,
</strong><strong>        tickWidth: 1.0,
</strong><strong>        tickColor: Colors.white,
</strong><strong>        showTickOnLeftAxis: true,
</strong><strong>        showTickOnBottomAxis: true,
</strong>      ),
    ),
    ...
  ),
  ...
),
</code></pre>

{% endtab %}

{% tab title="For All Axes" %}

<pre class="language-dart"><code class="lang-dart">...
BarChart(
  ...
  chartStylingData: CartesianChartStylingData(
    axisStyle: CartesianAxisStyle(
      axisWidth: 3.0,
      axisColor: Colors.white,
<strong>      tickConfig: AxisTickConfig.forAllAxis(
</strong><strong>        showTicks: true,
</strong><strong>        tickLength: 15.0,
</strong><strong>        tickWidth: 1.0,
</strong><strong>        tickColor: Colors.white,
</strong><strong>      ),
</strong>    ),
    ...
  ),
  ...
),
</code></pre>

{% endtab %}

{% tab title="Result" %}

<figure><img src="https://672051664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JD7NLiao8wvvuzkAjT9%2Fuploads%2FA6nk3nfpXKIKuYb7UbWw%2FScreenshot%202023-08-08%20at%204.01.48%20PM.png?alt=media&#x26;token=c024bc3d-a98c-401c-bb2e-549f05f7a1e2" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### CartesianAxisStyle Class Properties

| Name       | Type             | Required                               | Default Value    |
| ---------- | ---------------- | -------------------------------------- | ---------------- |
| axisWidth  | `double`         | <mark style="color:blue;">false</mark> | `2.0`            |
| axisColor  | `Color`          | <mark style="color:blue;">false</mark> | `Colors.black45` |
| tickConfig | `AxisTickConfig` | <mark style="color:blue;">false</mark> | Class Defaults   |

### AxisTickConfig Class Properties

{% tabs %}
{% tab title="Common Properties" %}

| Name         | Type     | Required                               | Default Value    |
| ------------ | -------- | -------------------------------------- | ---------------- |
| tickLength   | `double` | <mark style="color:blue;">false</mark> | 15`.0`           |
| tickWidth    | `double` | <mark style="color:blue;">false</mark> | `1.0`            |
| tickColor    | `Color`  | <mark style="color:blue;">false</mark> | `Colors.black45` |
| {% endtab %} |          |                                        |                  |

{% tab title="Primary Constructor" %}

<table><thead><tr><th width="237">Name</th><th width="152">Type</th><th width="151">Required</th><th>Default Value</th></tr></thead><tbody><tr><td>showTickOnLeftAxis</td><td><code>bool</code></td><td><mark style="color:blue;">false</mark></td><td><code>false</code></td></tr><tr><td>showTickOnTopAxis</td><td><code>bool</code></td><td><mark style="color:blue;">false</mark></td><td><code>false</code></td></tr><tr><td>showTickOnBottomAxis</td><td><code>bool</code></td><td><mark style="color:blue;">false</mark></td><td><code>false</code></td></tr><tr><td>showTickOnRightAxis</td><td><code>bool</code></td><td><mark style="color:blue;">false</mark></td><td><code>false</code></td></tr></tbody></table>
{% endtab %}

{% tab title="forAllAxis" %}

| Name          | Type   | Required                               | Default Value |
| ------------- | ------ | -------------------------------------- | ------------- |
| showTicks     | `bool` | <mark style="color:blue;">false</mark> | `false`       |
| {% endtab %}  |        |                                        |               |
| {% endtabs %} |        |                                        |               |