> For the complete documentation index, see [llms.txt](https://flutter.wednesday.is/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flutter.wednesday.is/charts/guides/cartesian-charts/chart-structuring/grid-styling.md).

# 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="/files/kNYhZGh6FG9XqQBp8zMB" 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` |