opensourcepos/app/Views/reports/graphs/line.php

<?php
/**
 * @var array $labels_1
 * @var string $yaxis_title
 * @var array $series_data_1
 * @var bool $show_currency
 * @var string $xaxis_title
 * @var array $config
 */
?>

<script type="text/javascript">
    // Labels and data series
    const data = {
        labels: <?= json_encode(esc($labels_1, 'js')) ?>,
        series: [{
            name: '<?= esc($yaxis_title, 'js') ?>',
            data: <?= json_encode(esc($series_data_1, 'js')) ?>
        }]
    };

    // We are setting a few options for our chart and override the defaults
    const options = {

        // Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
        width: '100%',

        // Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
        height: '100%',

        // Draw the line chart points
        showPoint: true,

        // Disable line smoothing
        lineSmooth: false,

        // Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
        chartPadding: {
            top: 20,
            bottom: 120
        },

        // X-Axis specific configuration
        axisX: {
            // Lets offset the chart a bit from the labels
            offset: 120,
            position: 'end',
            // Offset the labels a bit from the axis to avoid overlaps
            labelOffset: {
                x: 0,
                y: 20
            }
        },

        // Y-Axis specific configuration
        axisY: {
            // Lets offset the chart a bit from the labels
            offset: 80,
            // Offset the labels a bit from the axis to avoid overlaps
            labelOffset: {
                x: -20,
                y: 0
            },
            // The label interpolation function enables you to modify the values
            // used for the labels on each axis.
            <?php
                $currency_symbol = esc($config['currency_symbol'], 'js');
                $currency_prefix = '';
                $currency_suffix = '';

                if ($show_currency) {
                    if (is_right_side_currency_symbol()) {
                        $currency_suffix = $currency_symbol;
                    } else {
                        $currency_prefix = $currency_symbol;
                    }
                }
            ?>

            labelInterpolationFnc: function(value) {
                return '<?= $currency_prefix ?>' + value + '<?= $currency_suffix ?>';
            }
        },

        // Plugin configuration
        plugins: [
            Chartist.plugins.ctAxisTitle({
                axisX: {
                    axisTitle: '<?= esc($xaxis_title, 'js') ?>',
                    axisClass: 'ct-axis-title',
                    offset: {
                        x: -100,
                        y: 100
                    },
                    textAnchor: 'middle'
                },
                axisY: {
                    axisTitle: '<?= esc($yaxis_title, 'js') ?>',
                    axisClass: 'ct-axis-title',
                    offset: {
                        x: 0,
                        y: 0
                    },
                    textAnchor: 'middle',
                    flipTitle: false
                }
            }),

            <?php
                $currency_symbol = esc($config['currency_symbol'], 'js');
                $currency_prefix = '';
                $currency_suffix = '';

                if ($show_currency) {
                    if (is_right_side_currency_symbol()) {
                        $currency_suffix = $currency_symbol;
                    } else {
                        $currency_prefix = $currency_symbol;
                    }
                }
            ?>

            Chartist.plugins.ctPointLabels({
                textAnchor: 'middle',
                labelInterpolationFnc: function(value) {
                    return '<?= $currency_prefix ?>' + value + '<?= $currency_suffix ?>';
                }
            }),

            <?php
                $currency_symbol = esc($config['currency_symbol'], 'js');
                $currency_prefix = '';
                $currency_suffix = '';

                if ($show_currency) {
                    if (is_right_side_currency_symbol()) {
                        $currency_suffix = $currency_symbol;
                    } else {
                        $currency_prefix = $currency_symbol;
                    }
                }
            ?>

            Chartist.plugins.tooltip({
                pointClass: 'ct-tooltip-point',
                transformTooltipTextFnc: function(value) {
                    return '<?= $currency_prefix ?>' + value + '<?= $currency_suffix ?>';
                }
            })
        ]
    };

    const responsiveOptions = [
        ['screen and (min-width: 640px)', {
            height: '80%',
            chartPadding: {
                top: 20,
                bottom: 0
            },
        }]
        /* ,
         * ['screen and (min-width: 1024px)', {
         *     labelOffset: 80,
         *     chartPadding: 20
         * }]
         */
    ];

    chart = new Chartist.Line('#chart1', data, options, responsiveOptions);

    chart.on('draw', function(data) {
        // If the draw event was triggered from drawing a point on the line chart
        if (data.type === 'point') {
            // We are creating a new path SVG element that draws a triangle around the point coordinates
            const circle = new Chartist.Svg('circle', {
                cx: [data.x],
                cy: [data.y],
                r: [5],
                'ct:value': data.value.y,
                'ct:meta': data.meta,
                class: 'ct-tooltip-point',
            }, 'ct-area');

            // With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle
            data.element.replace(circle);
        }
    });
</script>