Main page
Colors
Page list
Page add
Simple page
Alert Window
Pagination
Validation
Animation
Accordion
Autocomplete
Dialogue
Charts

Available сharts

Column Chart

 

<table id="column-example-4" class="charts-css column datasets-spacing-46">
<tbody>
<tr>
    <td style="--size: 0.2; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 0.4; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 0.6; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 0.8; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 1; --color: #1B9BDE;"></td>
</tr>
</tbody>
</table>

Bar Chart

 

<table id="column-example-4" class="charts-css column datasets-spacing-46">
<tbody>
<tr>
    <td style="--size: 0.2; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 0.4; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 0.6; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 0.8; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 1; --color: #1B9BDE;"></td>
</tr>
</tbody>
</table>

Stacked Columns

Continent #1 #2 #3 #4
America 50$ 50$ 30$ 20$
Asia 30$ 30$ 30$ 30$
Europe 40$ 25$ 45$ 30$
Africa 20$ 20$ 20$ 20$ 

<table id="column-example-4" class="charts-css column datasets-spacing-46">
<tbody>
<tr>
    <td style="--size: 0.2; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 0.4; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 0.6; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 0.8; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 1; --color: #1B9BDE;"></td>
</tr>
</tbody>
</table>

Line Chart

$ 40K
$ 20K
$ 60K
$ 40K
$ 80K
$ 60K
$ 100K 

<table id="column-example-4" class="charts-css column datasets-spacing-46">
<tbody>
<tr>
    <td style="--size: 0.2; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 0.4; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 0.6; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 0.8; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 1; --color: #1B9BDE;"></td>
</tr>
</tbody>
</table>

Multi-Dataset Line Chart

30 40 70 100
10 60 90 70
30 40 80 90
10 60 80 90
30 40 100 70 

<table id="column-example-4" class="charts-css column datasets-spacing-46">
<tbody>
<tr>
    <td style="--size: 0.2; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 0.4; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 0.6; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 0.8; --color: #1B9BDE;"></td>
</tr>
<tr>
    <td style="--size: 1; --color: #1B9BDE;"></td>
</tr>
</tbody>
</table>