Chart.js icon indicating copy to clipboard operation
Chart.js copied to clipboard

The "line" graphic appears when the page loads, but not when I come from another page

Open MelvinNau opened this issue 3 years ago • 0 comments

Expected behavior

Hi,

I have specific problem for "line" chart, I don't have this bug with other (like "doughut" and "bar") in Rails project

When I just reload the page, all the chart are present without problem. But when I go to an another page, to simulate my user comportement, and come back to my chart page, the "line" chart is the only one not to be displayed.

I've no error in console, but the canvas get some style by default: "[...] height: 0px; width: 0px;" while I have specified a height and width by default in the previous div. i already try to fix some size with important style etc, without effect.

Here the code of my chart

var labels = ["TEST" , "TEST2", "TEST3"];
            var data3 = {
              labels: labels,
              datasets: [
                {
                  label: 'Solde intermédiaire comptes cumulés',
                  data: [1,2, 12],
                  yAxisID: 'y',
                  borderColor: '#00B38F',
                  backgroundColor: '#00B38F'
                },
                {
                  label: 'Incidents cumulés',
                  data:  [3,4],
                  yAxisID: 'y1',
                  borderColor: '#285AC8',
                  backgroundColor: '#285AC8'
                },
                {
                  label: 'Jeux d’argent cumulés',
                  data:  [5,6],
                  yAxisID: 'y',
                  borderColor: '#F04438',
                  backgroundColor: '#F04438'
                }
              ]
            };

            var config3 = {
              type: 'line',
              data: data3,
              options: {
                maintainAspectRatio: false,
                interaction: {
                  mode: 'index',
                  intersect: false,
                },
                stacked: false,
                plugins: {
                  title: {
                    display: false,
                    text: ''
                  },
                  legend: {
                    position : 'bottom',
                    labels: {
                      fontSize: 8,
                    }
                  }
                },
                scales: {
                  y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    title: {
                      display: true,
                      text: "Montant en euro €",
                      color: '#667085',
                      font: {
                        family: 'Karla',
                        size: 12,
                        lineHeight: 1.2
                      },
                      ticks: {
                        font: {
                          size: 8,
                          lineHeight: 1.2
                        },
                      }
                    }
                  },
                  y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    // grid line settings
                    grid: {
                      drawOnChartArea: false,
                      color: '#F2F4F7' // only want the grid lines for one axis to show up
                    },
                    title: {
                      display: true,
                      text: "Nombre d'incidents cumulés",
                      color: '#667085',
                      font: {
                        size: 12,
                        lineHeight: 1.2
                      },
                      ticks: {
                        font: {
                          size: 8,
                          lineHeight: 1.2
                        },
                      }
                    }
                  },
                  x: {
                    grid: {
                      display: false
                    }
                  }
                }
              },
            };

 
            var ctx = document.getElementById('myChart3');
            var myChart3 = new Chart(ctx, config3);

I've just one install in my project, and again, all the other chart work fine.

Any idea ? Am I missing something?

Thanks =)

Current behavior

The "line" chart does not appear after going to other pages and come back

Reproducible sample

can't

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v3.8.0

Browser name and version

No response

Link to your project

No response

MelvinNau avatar Jul 22 '22 07:07 MelvinNau