chartist

chartist copied to clipboard

Hello, I facing a problem while injecting chartist.js

While initializing chartist.js Im getting chart like this .

While resizing the page size or changing the window size, the chart rendered exactly .

Can anyone tell me whats the problem I'm facing ?

Mine workaround was to set a little timeout on initialize. But would like to hear a better approach.

either do what @tkuznyetsoff said, or define hard sizes in pixels for the container

Hello @ikismail 👋

Chartist has recently been updated to version 1.0 with some new exciting changes like ESM and TypeScript support. The migration guide can be found right here.

Please let me know if the issue is still relevant to you so we can further look into it!

IMHO, this is still relevant.

I suspect that when this occurs, maybe the page (or parent container) isn't fully rendered yet when the chart is being initialized.

I had the same issue as OP, however my chart instance is deep in some nested components. I don't know what the exact culprit is; I haven't investigated further. The chart occurs in an animated modal, so maybe I have to wait for that to finish before initiating the chart.

A test: When this issue occurs, as a test, try to nudge the browser viewport a little bit to invoke a re-paint. and observe what happens. Does the chart magically appear? This tells you something about containment, and I suspect a factor is SVG (in general) being sensitive to containment size.

Workaround(s): 1 - Wrap a timeout of x seconds 2 - Make sure to init the chart only when the page (or parent container) is finished rendering

Sample Vue code:

onMounted( () => {
    setTimeout(() => {
        new BarChart(...)
    }, 1000)
})