Chart

Description

The chart component is used to create vertical or horizontal bar charts. Just css is used to render de chart so, no one canvas is needed. The chart component is divided in 3 (three) parts: display, x-axis and y-axis. The display is the panel that will render the bars (values), and the axis is the place that the legends will be shown. These 3 parts must be put inside a chart container to be rendered. You can check some examples of chart in the Examples page.

Code Examples

These are some examples for component:

<!-- Vertical Chart -->
<div class="tui-chart-vertical" style="width: 500px; height: 200px;">
  <div class="tui-chart-display">
    <div class="tui-chart-value red-168" style="height: 80%;">80%</div>
    <div class="tui-chart-value green-168" style="height: 30%;">30%</div>
    <div class="tui-chart-value blue-168" style="height: 50%;">50%</div>
  </div>
  <div class="tui-chart-y-axis">
    <div class="tui-chart-legend">100%</div>
    <div class="tui-chart-legend">75%</div>
    <div class="tui-chart-legend">50%</div>
    <div class="tui-chart-legend">25%</div>
  </div>
  <div class="tui-chart-x-axis">
    <div class="tui-chart-legend">t1</div>
    <div class="tui-chart-legend">t2</div>
    <div class="tui-chart-legend">t3</div>
  </div>
</div>

<!-- Horizontal Chart -->
<div class="tui-chart-horizontal" style="width: 500px; height: 200px;">
  <div class="tui-chart-display">
    <div class="tui-chart-value red-168" style="width: 80%;">80%</div>
    <div class="tui-chart-value green-168" style="width: 60%;">60%</div>
    <div class="tui-chart-value blue-168" style="width: 100%;">100%</div>
  </div>
  <div class="tui-chart-y-axis">
    <div class="tui-chart-legend">2018</div>
    <div class="tui-chart-legend">2019</div>
    <div class="tui-chart-legend">2020</div>
  </div>
  <div class="tui-chart-x-axis">
    <div class="tui-chart-legend">25%</div>
    <div class="tui-chart-legend">50%</div>
    <div class="tui-chart-legend">75%</div>
    <div class="tui-chart-legend">100%</div>
  </div>
</div>

Component Classes

This is the table with available classes for this component.

Class	Description
.tui-chart-vertical	Container for a vertical chart
.tui-chart-horizontal	Container for an horizontal chart
.tui-chart-display	Place that the values (bars) will be rendered
.tui-chart-x-axis	Place that the x axis legends will be rendered
.tui-chart-y-axis	Place that the y axis legends will be rendered
.tui-chart-legend	The x or y axis legend style
.tui-chart-value	The bar style
.no-x-axis	Removes the place for x axis legends
.no-y-axis	Removes the place for y axis legends