[Bug]: Charts displaying wrong with Svelte in production

[lion-artiste]

Application/Team

Independent

What happened?

Hello ! I don't write bug reports often, but I'm trying carbon-charts for the administration of my SvelteKit project, and while the charts in dev look like this :

They look completely off in preview and production :

I've tried clearing cache, disabling ssr for this page, checking if css is loaded in the browser, checking that I have the last version of the plugin... Nothing seems wrong !

Here is my code for this exact page, without the buttons on top and the div wrappers (I removed them to check, and the problem is still present) :

`

    <AreaChart data={data.gamesStartedByDay} options = {{
        axes: {
            bottom: {
                mapsTo: "date",
                scaleType: ScaleTypes.TIME,
            },
            left: {
                title: "",
                mapsTo: "count"
            }
        },
        height: "300px",
        theme: "white",
        toolbar: {
            enabled: false
        },
        legend: {
            enabled: false
        }
        /*zoomBar: {
            top: {
                enabled: true
            }
        }*/
    }}/>
    <DonutChart data={[
        {
            group: "Anonymous",
            value: data.gamesStartedAnonymous
        },
        {
            group: "Users",
            value: data.gamesStartedUsers
        },
    ]} options={{
        donut : {
            center : {
                label : `Games played last ${data.daysAnalysis} days`
            }
        },
        height: "300px",
        legend: {
            position: "right",
        },
        toolbar: {
            enabled: false
        },
    }}/>`

I hope I'm not doing something stupid ! My vite.config.ts looks like this :

import { sveltekit } from '@sveltejs/kit/vite'; import { defineConfig } from 'vitest/config'; //import { defineConfig } from 'vite'; import { purgeCss } from 'vite-plugin-tailwind-purgecss';

export default defineConfig({ plugins: [sveltekit(), purgeCss()], test: { include: ['src/*/.{test,spec}.{js,ts}'] }, ssr: { noExternal: process.env.NODE_ENV === 'production' ? ['@carbon/charts'] : [] } });

Thank you for your help !

Version

@carbon/charts-svelte v1.15.1

Data & options used

No response

Relevant log output

No response

StackBlitz example

No response

What priority level would this be in your opinion?

P0

[obelisk-services]

Hi,

The problem is that you are using purgueCSS and it is skipping some classes while making the build. If you add the styles.css classes to the safelist, it will do the trick. I send you my vite.config.ts (I used "cds-" as pattern in the safelist, but maybe there is a better one, i'm not an expert in this library)

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { purgeCss } from 'vite-plugin-tailwind-purgecss';

export default defineConfig({
    plugins: [
        sveltekit(),
        purgeCss({
        safelist: {
            greedy: [/^cds-/],
        },
    })]
});

[nstuyvesant]

@theiliad - ok to close this issue - problem was purgeCss.

[geshl]

@nstuyvesant did adding purgeCss safelist fixed the problem? im facing the same issue right now

[obelisk-services]

At least in my case, it worked. I send you a capture of one of our apps in production (after build). Without safelist, I was facing the same issue.

[nstuyvesant]

Hi @geshl - did not use purgeCss myself but looks like @obelisk-services was successful with a safelist.

Using cds- as the string to exclude is a very safe route (stands for "Carbon Design System"). All classes start with cds--cc or cds--chart.

Note that it is possible to use sass to create a smaller CSS file for charts (the SCSS is only in the @carbon/charts package. Check out https://github.com/carbon-design-system/carbon-charts/blob/master/packages/core/scss/index.scss. In place of @use 'graphs';, you could load only scss files for graphs you use. You could do the same for @use 'components'; but you have to be well-versed in which components you are using and which ones you don't need (probably don't need diagrams and perhaps not the toolbar).