# Styling

All styling in the `BarChart` and other chart widgets are **Hierarchical** from Top to Bottom. This means that the *Bottom/Child* level styling will **override** the *Top/Parent* level styling.

The class `BarDataStyle` provides the styling options for the `BarChart`.

Let's take an example to see how it works.

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

```dart
...
import 'package:chart_it/chart_it.dart';

class TestBarCharts extends StatefulWidget {
  const TestBarCharts({Key? key}) : super(key: key);

  @override
  State<TestBarCharts> createState() => _TestBarChartsState();
}

class _TestBarChartsState extends State<TestBarCharts> {
  @override
  Widget build(BuildContext context) {
    return BarChart(
      ... // any chart configs
      data: BarSeries(
        barData: <BarGroup>[
          SimpleBar(
            xValue: 1,
            yValue: BarData(yValue: 37),
          ),
          MultiBar(
            spacing: 10.0,
            xValue: 2,
            yValues: [
              BarData(yValue: 18),
              BarData(yValue: 27),
            ],
          ),
          SimpleBar(
            xValue: 3,
            yValue: BarData(yValue: 30),
          ),
          MultiBar(
            spacing: 10.0,
            xValue: 4,
            yValues: [
              BarData(yValue: 46),
              BarData(yValue: 24),
            ],
          ),
        ],
      ),
    );
  }
}
```

{% endtab %}

{% tab title="Result" %}

<figure><img src="/files/bqKoDrEmbLuk4uGQDJUz" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Above example will draw a collection of Single and MultiGroup Bars. Now let's add styling to our bars in this example.

### Series Styling

To provide uniform styling for **All the Bars** in the `BarChart`, we provide the styling at *Series* Level to the `seriesStyle` property of the `BarSeries` class.

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

<pre class="language-dart"><code class="lang-dart">...
import 'package:chart_it/chart_it.dart';

class TestBarCharts extends StatefulWidget {
  const TestBarCharts({Key? key}) : super(key: key);

  @override
  State&#x3C;TestBarCharts> createState() => _TestBarChartsState();
}

class _TestBarChartsState extends State&#x3C;TestBarCharts> {
  @override
  Widget build(BuildContext context) {
    return BarChart(
      ... // any chart configs
      data: BarSeries(
<strong>        seriesStyle: BarDataStyle(
</strong><strong>          barColor: Colors.cyan,
</strong><strong>          strokeWidth: 3.0,
</strong><strong>          strokeColor: Color(0xFF1A535C),
</strong><strong>          cornerRadius: BorderRadius.only(
</strong><strong>            topLeft: Radius.circular(10.0),
</strong><strong>            topRight: Radius.circular(10.0),
</strong><strong>          ),
</strong><strong>        ),
</strong>        barData: &#x3C;BarGroup>[
          SimpleBar(
            xValue: 1,
            yValue: BarData(yValue: 37),
          ),
          MultiBar(
            spacing: 10.0,
            xValue: 2,
            yValues: [
              BarData(yValue: 18),
              BarData(yValue: 27),
            ],
          ),
          SimpleBar(
            xValue: 3,
            yValue: BarData(yValue: 30),
          ),
          MultiBar(
            spacing: 10.0,
            xValue: 4,
            yValues: [
              BarData(yValue: 46),
              BarData(yValue: 24),
            ],
          ),
        ],
      ),
    );
  }
}
</code></pre>

{% endtab %}

{% tab title="Result" %}

<figure><img src="/files/LgCW333ngoFXyKN4Isz0" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Group Styling

If you wish to provide a specific uniform styling for all the bars **in a group**, you can provide styling at *Group* Level to the `groupStyle` property for any `BarGroup`.

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

<pre class="language-dart"><code class="lang-dart">...
import 'package:chart_it/chart_it.dart';

class TestBarCharts extends StatefulWidget {
  const TestBarCharts({Key? key}) : super(key: key);

  @override
  State&#x3C;TestBarCharts> createState() => _TestBarChartsState();
}

class _TestBarChartsState extends State&#x3C;TestBarCharts> {
  @override
  Widget build(BuildContext context) {
    return BarChart(
      ... // any chart configs
      data: BarSeries(
        seriesStyle: BarDataStyle(
          barColor: Colors.cyan,
          strokeWidth: 3.0,
          strokeColor: Color(0xFF1A535C),
          cornerRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0),
            topRight: Radius.circular(10.0),
          ),
        ),
        barData: &#x3C;BarGroup>[
          SimpleBar(
            xValue: 1,
            yValue: BarData(yValue: 37),
          ),
          MultiBar(
<strong>            groupStyle: BarDataStyle(
</strong><strong>              barColor: Color(0xFFD0FFD6),
</strong><strong>              strokeWidth: 3.0,
</strong><strong>              strokeColor: Colors.green,
</strong><strong>              cornerRadius: BorderRadius.only(
</strong><strong>                topLeft: Radius.circular(5.0),
</strong><strong>                topRight: Radius.circular(5.0),
</strong><strong>              ),
</strong><strong>            ),
</strong>            spacing: 10.0,
            xValue: 2,
            yValues: [
              BarData(yValue: 18),
              BarData(yValue: 27),
            ],
          ),
          SimpleBar(
            xValue: 3,
            yValue: BarData(yValue: 30),
          ),
          MultiBar(
            spacing: 10.0,
            xValue: 4,
            yValues: [
              BarData(yValue: 46),
              BarData(yValue: 24),
            ],
          ),
        ],
      ),
    );
  }
}
</code></pre>

{% endtab %}

{% tab title="Result" %}

<figure><img src="/files/qNQ7FfuCcwqrtfT0NPx9" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

The `groupStyle` has overridden the styling at the `seriesStyle` for Group 2 Multi Bars. `groupStyle` property is available for every subclass that extends a BarGroup.&#x20;

Theoretically, you can also provide `groupStyle` to a `SimpleBar`, even tough you only have one bar.

### Bar Styling

Besides `seriesStyle` and `groupStyle`, you can can also customize **each individual bars** with the property **barStyle** for every `BarData`. This is the bottom most styling property and will override any of the parent group or series level styling.

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

<pre class="language-dart"><code class="lang-dart">...
import 'package:chart_it/chart_it.dart';

class TestBarCharts extends StatefulWidget {
  const TestBarCharts({Key? key}) : super(key: key);

  @override
  State&#x3C;TestBarCharts> createState() => _TestBarChartsState();
}

class _TestBarChartsState extends State&#x3C;TestBarCharts> {
  @override
  Widget build(BuildContext context) {
    return BarChart(
      ... // any chart configs
      data: BarSeries(
        seriesStyle: BarDataStyle(
          barColor: Colors.cyan,
          strokeWidth: 3.0,
          strokeColor: Color(0xFF1A535C),
          cornerRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0),
            topRight: Radius.circular(10.0),
          ),
        ),
        barData: &#x3C;BarGroup>[
          SimpleBar(
            xValue: 1,
            yValue: BarData(
              yValue: 37,
<strong>              barStyle: BarDataStyle(
</strong><strong>                barColor: Colors.orangeAccent,
</strong><strong>                strokeWidth: 3.0,
</strong><strong>                strokeColor: Colors.deepOrange,
</strong><strong>                cornerRadius: BorderRadius.only(
</strong><strong>                  topLeft: Radius.circular(5.0),
</strong><strong>                  topRight: Radius.circular(5.0),
</strong><strong>                ),
</strong><strong>              ),
</strong>            ),
          ),
          MultiBar(
            groupStyle: BarDataStyle(
              barColor: Color(0xFFD0FFD6),
              strokeWidth: 3.0,
              strokeColor: Colors.green,
              cornerRadius: BorderRadius.only(
                topLeft: Radius.circular(5.0),
                topRight: Radius.circular(5.0),
              ),
            ),
            spacing: 10.0,
            xValue: 2,
            yValues: [
              BarData(yValue: 18),
              BarData(yValue: 27),
            ],
          ),
          SimpleBar(
            xValue: 3,
            yValue: BarData(yValue: 30),
          ),
          MultiBar(
            spacing: 10.0,
            xValue: 4,
            yValues: [
              BarData(
                yValue: 46,
<strong>                barStyle: BarDataStyle(
</strong><strong>                  barColor: Color(0xFFFFC800),
</strong><strong>                  cornerRadius: BorderRadius.all(Radius.circular(100.0)),
</strong><strong>                ),
</strong>              ),
              BarData(
                yValue: 24,
<strong>                barStyle: BarDataStyle(
</strong><strong>                  barColor: Color(0xFFDA4167),
</strong><strong>                  cornerRadius: BorderRadius.only(
</strong><strong>                    topLeft: Radius.circular(5.0),
</strong><strong>                    topRight: Radius.circular(25.0),
</strong><strong>                    bottomLeft: Radius.circular(25.0),
</strong><strong>                    bottomRight: Radius.circular(5.0),
</strong><strong>                  ),
</strong><strong>                ),
</strong>              ),
            ],
          ),
        ],
      ),
    );
  }
}
</code></pre>

{% endtab %}

{% tab title="Result" %}

<figure><img src="/files/OxmPcERakw7z6kPm5zjc" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

The above example provides a clear picture of the **Hierarchical Structure** for styling across the widget tree classes.

### BarDataStyle Properties

| Name         | Type            | Required                               | Default Value |
| ------------ | --------------- | -------------------------------------- | ------------- |
| barColor     | `Color?`        | <mark style="color:blue;">false</mark> | `null`        |
| gradient     | `Gradient?`     | <mark style="color:blue;">false</mark> | `null`        |
| strokeWidth  | `double?`       | <mark style="color:blue;">false</mark> | `null`        |
| strokeColor  | `Color?`        | <mark style="color:blue;">false</mark> | `null`        |
| cornerRadius | `BorderRadius?` | <mark style="color:blue;">false</mark> | `null`        |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flutter.wednesday.is/charts/guides/cartesian-charts/charts/bar-chart/styling.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.