..  include:: ../../../Includes.txt

..  _screenShootsCharts:

=========
Charts.js
=========

Examples for the `Charts.js` library using the Fluid parser are available in
`Resources/Private/Templates/ChartsExamples/FluidParser`.

Examples for the `Charts.js` library using the XML parser are available in
`Resources/Private/Templates/ChartsExamples`.

The following screenshots were obtained
with the provided basic templates. Charts.js offers 
many other features (see `Charts.js Samples
<https://www.chartjs.org/docs/latest/samples/information.html>`_).

Bar Charts 
==========
    
..  figure:: ../../../Images/ScreenShots/Charts/barChart.png
    :width: 50%

Bubble Charts
=============

..  figure:: ../../../Images/ScreenShots/Charts/bubbleChart.png
    :width: 50%        

Doughnut Charts
===============

..  figure:: ../../../Images/ScreenShots/Charts/doughnutChart.png
    :width: 50%         

Horizontal Bar Charts
=====================

..  figure:: ../../../Images/ScreenShots/Charts/horizontalStackedBarChart.png
    :width: 50%         

Horizontal Stacked Bar Charts
=============================

..  figure:: ../../../Images/ScreenShots/Charts/horizontalStackedBarChart.png
    :width: 50%   
            
Line Charts
===========

..  figure:: ../../../Images/ScreenShots/Charts/lineChart.png
    :width: 50% 
   
Pie Charts
==========
    
..  figure:: ../../../Images/ScreenShots/Charts/pieChart.png
    :width: 50% 
                
Polar Area Charts
=================
    
..  figure:: ../../../Images/ScreenShots/Charts/polarAreaChart.png
    :width: 50% 
                
Radar Charts
============
    
..  figure:: ../../../Images/ScreenShots/Charts/radarChart.png
    :width: 50%         
    
Scatter Charts
==============
    
..  figure:: ../../../Images/ScreenShots/Charts/scatterChart.png
    :width: 50% 
                
Stacked Bar Charts
==================
    
..  figure:: ../../../Images/ScreenShots/Charts/stackedBarChart.png
    :width: 50%         
        
Combo Charts
============

Charts can also be combined 
(Combo charts), e.g. a bar chart 
with a line chart.

..  figure:: ../../../Images/ScreenShots/Charts/comboChart.png
    :width: 50%