[Chartjs]-Chart.js v2, remove padding/margin from radar chart

by

3👍

✅

You can wrap a bit of logic around the fit method using the beforeFit and afterFit handlers to correct this padding when the number of labels is 3 (the fit function starts off by assuming a maximum radius of half the chart height. For a triangle, we actually have a bit more space)

All we do is scale the height property to compensate for this assumption, like so

...
options: {
    scale: {
        beforeFit: function (scale) {
            if (scale.chart.config.data.labels.length === 3) {
                var pointLabelFontSize = Chart.helpers.getValueOrDefault(scale.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
                scale.height *= (2 / 1.5)
                scale.height -= pointLabelFontSize;
            }
        },
        afterFit: function (scale) {
            if (scale.chart.config.data.labels.length === 3) {
                var pointLabelFontSize = Chart.helpers.getValueOrDefault(scale.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
                scale.height += pointLabelFontSize;
                scale.height /= (2 / 1.5);
            }
        },
            ...

The scaling factor 2 / 1.5 is pretty easy to figure out

  1. With h = distance from center of triangle to a corner
  2. Total height of the triangle = h + distance from center of triangle to a side
    = h + h * sin 30
    = 1.5 h
  3. h currently = chart height / 2

  4. We want to scale this by r, such that

    1.5 * chart height / 2 * r = chart height

  5. This gives us

    r = 2 / 1.5

Fiddle – https://jsfiddle.net/zqp525gf/

Leave a comment