PVR
GitHub
Docs
Taxi CRM 2026
Charts

Charts

The six bundled charting libraries, their demo pages and how to initialise them.

2 min read
Updated June 20, 2026

Six charting libraries are bundled, each with its own demo page and page script under assets/js/pages/charts/. Every page puts a container element in the HTML and initializes it from the page script. The kit exposes a shared themeColors palette (teal, etc.) that the demos reuse so charts match the theme.

LibraryPageScript
Chart.jschartJs.htmlassets/js/pages/charts/chartJs.js
Apache EChartsecharts.htmlassets/js/pages/charts/echarts.js
HighchartshighChart.htmlassets/js/pages/charts/highChart.js
amCharts 5amChart.htmlassets/js/pages/charts/amChart.js
FlotflotChart.htmlassets/js/pages/charts/flotChart.js
MorrismorrisChart.htmlassets/js/pages/charts/morrisChart.js

Chart.js — chartJs.html

↗ View live demo

<canvas id="lineChart"></canvas>
new Chart(document.getElementById('lineChart'), {
    type: 'line',
    data: {
        labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
        datasets: [{
            label: 'Bookings',
            data: [145,178,156,189,234,312,267],
            borderColor: themeColors.teal,
            backgroundColor: themeColors.teal + '20',
            borderWidth: 2, fill: false, tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { y: { beginAtZero: true } }
    }
});

ECharts — echarts.html

↗ View live demo

<div class="echart-container" id="lineChart"></div>
var chart = echarts.init(document.getElementById('lineChart'));
chart.setOption({
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] },
    yAxis: { type: 'value' },
    series: [{ name: 'Bookings', type: 'line', smooth: true,
               data: [145,178,156,189,234,312,267],
               itemStyle: { color: themeColors.teal } }]
});

ECharts containers need an explicit height. Resize with chart.resize() on window resize if the container is fluid.

Highcharts — highChart.html

↗ View live demo

<div class="highchart-container" id="lineChart"></div>
Highcharts.chart('lineChart', {
    chart: { type: 'line', backgroundColor: 'transparent' },
    title: { text: null },
    xAxis: { categories: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] },
    yAxis: { title: { text: null } },
    legend: { enabled: false },
    series: [{ name: 'Bookings', data: [145,178,156,189,234,312,267], color: themeColors.teal }]
});

amCharts 5 — amChart.html

↗ View live demo

<div class="amchart-container" id="lineChart"></div>
am5.ready(function () {
    var root  = am5.Root.new('lineChart');
    root.setThemes([am5themes_Animated.new(root)]);
    var chart = root.container.children.push(am5xy.XYChart.new(root, { panX: false, panY: false }));
    var series = chart.series.push(am5xy.LineSeries.new(root, {
        name: 'Bookings', xAxis: xAxis, yAxis: yAxis,
        valueYField: 'value', categoryXField: 'day', stroke: themeColors.teal
    }));
});

Flot — flotChart.html

↗ View live demo

<div class="chart-container" id="lineChart" style="height: 18.75rem;"></div>
var lineData = [{ label: 'Bookings',
    data: [[1,145],[2,178],[3,156],[4,189],[5,234],[6,312],[7,267]], color: themeColors.teal }];
 
$.plot('#lineChart', lineData, {
    series: { lines: { show: true, lineWidth: 2 }, points: { show: true, radius: 4 } },
    xaxis:  { ticks: [[1,'Mon'],[2,'Tue'],[3,'Wed'],[4,'Thu'],[5,'Fri'],[6,'Sat'],[7,'Sun']] },
    grid:   { borderWidth: 0, hoverable: true }
});

Morris — morrisChart.html

↗ View live demo

<div class="chart-container" id="lineChart" style="height: 18.75rem;"></div>
Morris.Line({
    element: 'lineChart',
    data: [
        { day: '2026-01-01', bookings: 145 },
        { day: '2026-01-02', bookings: 178 },
        { day: '2026-01-03', bookings: 156 }
    ],
    xkey: 'day', ykeys: ['bookings'], labels: ['Total Bookings'],
    lineColors: [themeColors.teal], parseTime: true, resize: true
});

Notes

  • Some libraries have dedicated stylesheets that are part of the bundle (e.g. 47-chartJs, 48-echarts, 49-amChart, 46-flotChart are merged into style.css).
  • The bundled libraries live under assets/plugins/ (chartjs, echarts, highcharts, amcharts5, flot, morris). Only include the chart library you actually use if you're trimming the bundle for production.
  • Replace the demo data/labels with your own values; keep the themeColors.* references (or your own colors) so charts stay on-brand.

Was this page helpful?