# 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

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

<pre class="language-dart"><code class="lang-dart">...
BarChart(
  height: 400,
  chartStructureData: const CartesianChartStructureData(
    xUnitValue: 2,
    yUnitValue: 2,
    maxXValue: 10,
    maxYValue: 10,
  ),
<strong>  chartStylingData: CartesianChartStylingData(
</strong><strong>    gridStyle: CartesianGridStyle(
</strong><strong>      show: true,
</strong><strong>      gridLineWidth: 3.0,
</strong><strong>      gridLineColor: Colors.white,
</strong><strong>    ),
</strong><strong>  ),
</strong>  data: BarSeries(
    barData: [
      SimpleBar(
        xValue: 1,
        yValue: const BarData(yValue: 2.3),
      ),
    ],
  ),
),
</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%2FfX5MDekcDN2MCwr6RkqE%2FScreenshot%202023-08-08%20at%201.30.08%20PM.png?alt=media&#x26;token=717ea17b-cdd2-4382-ae0f-3c651ec7745f" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Class Properties

| Name          | Type     | Required                               | Default Value    |
| ------------- | -------- | -------------------------------------- | ---------------- |
| show          | `bool`   | <mark style="color:blue;">false</mark> | `true`           |
| gridLineWidth | `double` | <mark style="color:blue;">false</mark> | `0.5`            |
| gridLineColor | `Color`  | <mark style="color:blue;">false</mark> | `Colors.black45` |