# Bar

Bar charts display raw data as horizontal bars.

# Usage

To visualize your data with bar chart, change the type prop to 'bar'

<charts-css
    type="bar"
    ...
/>

1
2
3
4

To control the chart dimensions you can use regular CSS. You can use media queries to set different dimensions for smaller devices.

#my-chart .charts-css.bar {
  height: 200px;
  max-width: 300px;
  margin: 0 auto;
}

1
2
3
4
5

You can also pass this as a prop

<charts-css
    ...
    height="300px"
    ...
/>

1
2
3
4
5