# 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="https://672051664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JD7NLiao8wvvuzkAjT9%2Fuploads%2FT2aAhkFfcZPvJnxtYybd%2FScreenshot%202023-04-26%20at%2012.29.00%20PM.png?alt=media&#x26;token=4c43e9d2-91a8-4f1b-889e-cc6c6f960010" 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="https://672051664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JD7NLiao8wvvuzkAjT9%2Fuploads%2Ffsdy4Z6SpNi9YnrsFd91%2FScreenshot%202023-04-26%20at%2012.33.31%20PM.png?alt=media&#x26;token=b09c0138-9e1d-48b6-86b2-3e0dbbbd16fa" 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="https://672051664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JD7NLiao8wvvuzkAjT9%2Fuploads%2F7EJaIDBB1OJSZAf72dRi%2FScreenshot%202023-04-26%20at%2012.35.21%20PM.png?alt=media&#x26;token=bfb65903-958a-4a1b-8aa5-a5eecfaa4f2e" 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="https://672051664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JD7NLiao8wvvuzkAjT9%2Fuploads%2FF6tWWKhVFApgStx1MbrK%2FScreenshot%202023-04-26%20at%2012.38.21%20PM.png?alt=media&#x26;token=fd8f6e71-0241-4a2c-9f06-0bff2463bc1f" 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`        |