Chart render issues on Angular

[DuncanTLaw]

I have a chart that looks like as expected, nice and smooth, when it is first initialised:

But if I change to some other route, then change back to the route that contains the chart, the shape of the chart is all weird and jagged:

What could be the cause of this? I have tried the prototype methods on https://www.chartjs.org/docs/latest/developers/api.html, however, I am not sure what I've done wrong.

I am on Angular 10.1.3 and chart.js 2.9.3

Below are some relevant pieces of code:

ngOnInit(): void {
    this.createChart();
   }

createChart(): any {
  // some code that pushes in data
      parseOptions(Chart, chartOptions());
      this.chart = this.chartTemplate();
    });
  }

chartTemplate(): Chart {
    return new Chart(
      document.getElementById('bodyweightChart') as HTMLCanvasElement,
      { ..
      }
   )
}

[etimberg]

I'm guessing something isn't being cleaned up correctly, so when you navigate a bunch of chart configs merge together.

[kurkle]

I'd suspect chartTemplate or parseOptions.

[DuncanTLaw]

@kurkle does that mean I should run parseOptions again? Would it be useful if I post my chartTemplate and parseOptions code here?

[kurkle]

That would help on ruling out those as possible causes.

[DuncanTLaw]

@kurkle Here is parseOptions:

import {
  Chart,
  ChartOptions,
  ChartFontOptions,
  ChartTooltipOptions,
} from 'chart.js';

// Styles
const fonts = {
  base: 'open-sans',
};
const colors = {
  gray: {
    100: '#f6f9fc',
    200: '#e9ecef',
    300: '#dee2e6',
    400: '#ced4da',
    500: '#adb5bd',
    600: '#8898aa',
    700: '#525f7f',
    800: '#32325d',
    900: '#212529',
  },
  theme: {
    default: '#172b4d',
    primary: '#5e72e4',
    secondary: '#f4f5f7',
    info: '#11cdef',
    success: '#2dce89',
    danger: '#f5365c',
    warning: '#fb6340',
  },
  black: '#12263F',
  white: '#FFFFFF',
  transparent: 'transparent',
};

interface MyChartOptions {
  defaults: {
    global: ChartOptions &
      ChartFontOptions & {
        tooltips: ChartTooltipOptions;
      };
    [key: string]: any;
  };
  [anotherKey: string]: any;
}

// Initialisation
export function chartOptions(): MyChartOptions {
  // Options
  const options: MyChartOptions = {
    defaults: {
      global: {
        responsive: true,
        maintainAspectRatio: false,
        defaultFontColor: colors.gray[600],
        defaultFontFamily: fonts.base,
        defaultFontSize: 13,
        layout: {
          padding: {
            left: 0,
            right: 10,
            top: 0,
            bottom: 0
          }
        },
        legend: {
          display: false,
          position: 'bottom',
          labels: {
            usePointStyle: true,
            padding: 16,
          },
        },
        elements: {
          point: {
            radius: 0,
            backgroundColor: colors.theme.primary,
          },
          line: {
            tension: 0.4,
            borderWidth: 4,
            borderColor: colors.theme.primary,
            backgroundColor: colors.transparent,
            borderCapStyle: 'rounded',
          },
        },
        tooltips: {
          enabled: true,
          mode: 'index',
          intersect: false,
        },
      },
    },
  };

  // y-axis
  Chart.scaleService.updateScaleDefaults('linear', {
    gridLines: {
      borderDash: [2],
      borderDashOffset: 2,
      color: colors.gray[300],
      drawBorder: false,
      drawTicks: false,
      lineWidth: 0,
      zeroLineWidth: 0,
      zeroLineColor: colors.gray[300],
      zeroLineBorderDash: [2],
      zeroLineBorderDashOffset: 2,
    },
    ticks: {
      beginAtZero: true,
      padding: 10,
      callback: (value) => {
        if (!(+value % 10)) {
          return value;
        } else {
          return null;
        }
      },
    },
  });

  // x-axis
  Chart.scaleService.updateScaleDefaults('category', {
    gridLines: {
      drawBorder: false,
      drawOnChartArea: false,
      drawTicks: false,
    },
    ticks: {
      padding: 20,
    },
  });

  return options;
}

// Deep copies options into parent, but how can we type this? Stuck with explicit any for now.
export const parseOptions = (parent: any, options: any) => {
  for (const item in options) {
    if (typeof options[item] !== 'object') {
      parent[item] = options[item];
    } else {
      parseOptions(parent[item], options[item]);
    }
  }
};

Here is chartTemplate:

chartTemplate(): Chart {
    return new Chart(
      document.getElementById('bodyweightChart') as HTMLCanvasElement,
      {
        type: 'line',
        data: {
          datasets: [
            {
              label: 'Bodyweight',
              data: this.bodyweightData,
            },
          ],
        },
        options: {
          tooltips: {
            callbacks: {
              label(tooltipItems) {
                  return ' ' + tooltipItems.yLabel + ' kg';
              }
            }
          },
          scales: {
            xAxes: [{
              gridLines: {
                display: false
              },
              type: 'time',
              time: {
                tooltipFormat: 'D MMM YYYY'
              },
              distribution: 'linear',
              ticks: {
                display: false
              }
            }],
            yAxes: [
              {
                gridLines: {
                  color: '#e9ecef',
                  zeroLineColor: '#e9ecef',
                },
                ticks: {
                  min: Math.min(...this.bodyweightData.map(min => min.y)) - 10,
                  max: Math.max(...this.bodyweightData.map(max => max.y)) + 10
                },
              },
            ],
          },
        },
      }
    );
  }

[kurkle]

I'm not sure where it goes wrong, but I strongly suspect the replacement of Chart.defaults being the source of the error.

Personally I've used this kind of pattern for defining some defaults for a project:

mychart.js

import Chart from 'chart.js';

Chart.defaults.global.hover.mode = 'nearest';
//etc

export default Chart;

usage.js

import Chart from `mychart.js`;

var chart = new Chart(...)