keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Chartist

Chartist

Chartist.js was created by a community frustrated with the limitations of other charting libraries, offering more flexibility and customization. Click here

Advanced Smil Animation


<div id="chartistSmilAnimations" class="ct-chart ct-golden-section"></div>

Simple line chart


<div id="chartistSimpleLineChart" class="ct-chart ct-golden-section"></div>

Line Scatter Diagram


<div id="chartistSimpleLineChart" class="ct-chart ct-golden-section"></div>

Line chart with tooltips


<div id="chartistLineChartTooltips" class="ct-chart ct-golden-section"></div>

Line chart with area


<div id="chartistChartWithArea" class="ct-chart ct-golden-section"></div>

Bi-polar Line chart with area only


<div id="chartistBiPolarLine" class="ct-chart ct-golden-section"></div>

SVG Path animation


<div id="chartistSvgAnimation" class="ct-chart ct-golden-section"></div>

Line Interpolation / Smoothing


<div id="chartistLineSmoothing" class="ct-chart ct-golden-section"></div>

Different configuration for different series


<div id="chartistDifferentSeries" class="ct-chart ct-golden-section"></div>

SVG Animations chart


<div id="chartistSvgDotAnimation" class="ct-chart ct-golden-section"></div>

Bi-polar bar chart


<div id="chartistBiPolarBar" class="ct-chart ct-golden-section"></div>

Overlapping bars on mobile

  • 40% Tickets
  • 35% Events
  • 25% Other

<div class="check-point-area">
  <div id="chartistOverlappingBars" class="ct-chart ct-golden-section chartlist-chart"></div>
</div>
<ul class="chart-point-list">
  <li><i class="fa fa-circle text-primary me-1"></i> 40% Tickets</li>
  <li><i class="fa fa-circle text-success me-1"></i> 35% Events</li>
  <li><i class="fa fa-circle text-warning me-1"></i> 25% Other</li>
</ul>

Multi-line labels


<div id="chartistMultiLineChart" class="ct-chart ct-golden-section"></div>

Stacked bar chart


<div id="chartistStackedBarChart" class="ct-chart ct-golden-section"></div>

Horizontal bar chart


<div id="chartistHorizontalBarChart" class="ct-chart ct-golden-section"></div>

Extreme responsive configuration


<div id="chartistExtremeChart" class="ct-chart ct-golden-section"></div>

Label placement


<div id="chartistLabelPlacementChart" class="ct-chart ct-golden-section"></div>

Animating a Donut with Svg.animate


<div id="chartistAnimatingDonut" class="ct-chart ct-golden-section"></div>

Simple pie chart


<div id="chartistSimplePie" class="ct-chart ct-golden-section"></div>

Pie chart with custom labels


<div id="chartistPieChart" class="ct-chart ct-golden-section"></div>

Gauge chart


<div id="chartistGaugeChart" class="ct-chart ct-golden-section"></div>