Implement the Chartist library in Laravel

When i was working on a certain project, i needed charts for various visualisations. The charts were quite simple, but at the time i could only find several more complicated and feature-rich libraries. I started out with charts.js which is excellent, but felt kind of sluggish and overkill for the intended charts.

Since my frontend skills are quite outdated (but definitely existent), i was looking for a way to integrate it into Laravel and Tailwind. After some Googling i could not find a very clear solution. I'm not an avid LLM/ChatGPT user, so figuring it out was needed.

The solution ended up quite simple, but needs a little explanation. First of all, add the library from your project directory. It will add the library to your node_modules.

yarn add chartist

or:

npm install chartist

After some fiddling, i quickly found out importing is goes like this in your bootstrap.js file:

import * as Chartist from 'chartist'
window.Chartist = Chartist;

You can replace the asterisk * with a more minimal set of components to reduce buildsize.

To import the SASS files included in the chartist package and to apply styles from Tailwind, you'll need to install additional modules.

yarn add sass-embedded

And add postcss-import/tailwindcss/nesting to your postcss.config.js

export default {
    plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': {},
        tailwindcss: {},
        autoprefixer: {},
    },
};

Since Laravel uses Vite to compile assets, some additional information needs to be added there as well. I've added the import path part, created an alias for chartist and added some options to not show deprecation warnings for imported SASS files. Remember, hiding warnings does not fix them... ;-)

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~chartist': path.resolve(__dirname, 'node_modules/chartist'),
        }
    },
    // Fixes scss deprecation warnings
    css: {
        preprocessorOptions: {
            scss: {
                quietDeps: true,
                silenceDeprecations: ['legacy-js-api', 'global-builtin', 'import'],
            }
        },
    },
});

The available deprecation message types can be seen here: https://sass-lang.com/documentation/js-api/interfaces/deprecations/#import

Finally you need to import the styles from chartist for some default styling and possibly adding styles from Tailwind. Add this to the top of your stylesheet (app.css).

@import "~chartist/dist/index.scss";

You should now be able to enrich styles with Tailwind classes by applying them like so:

@media (prefers-color-scheme: dark) {
    .ct-grid {
        @apply !stroke-slate-600;
    }
    .ct-label {
        @apply !text-white;
    }
    .ct-chart-pie {
        .ct-label {
            @apply !fill-white;
        }
    }
}

.ct-series-a {
    .ct-slice-pie {
        @apply fill-sky-500;
    }
    .ct-bar {
        @apply stroke-sky-500;
    }
    .ct-line, .ct-point {
        @apply stroke-sky-500;
    }
}

You can now use Chartist in your blade templates like this (for example):

<script>
new window.Chartist.LineChart('.ct-chart-line', {
	labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
	series: [
		[12, 9, 7, 8, 5, 14, 1],
		[2, 1, 3.5, 7, 3, 15, 2],
		[1, 3, 4, 5, 6, 1, 18]
	]
	}, {
	fullWidth: true,
	chartPadding: {
		right: 0
	}
});
</script>

Your charts should look like this:

I'm currently working on a Livewire implementation. I'll update this article when it's finished.

Check out the documentation for more information. It should get you started well! Happy Charting!