chartjs-plugin-colorschemes 棒グラフを半透明にしたい

options.plugins.colorschemes.fillAlphaを設定してもできない

半透明にする場合は、fillAlphaを設定するらしい。

Name	Type	Default	Description
fillAlpha	number	0.5	The transparency value for the line fill color. Must be a number between 0.0 (fully transparent) and 1.0 (no transparency).

nagix/chartjs-plugin-colorschemes

設定してみたが半透明にならない。

hoge.js

const ctx = document.getElementById('chart-bar').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: 'ラベル',
    datasets: [{
        data: [0,10,20,30]
      }]
  },
  options: {
    plugins: {
      // カラースキーム
      colorschemes: {
        scheme: 'brewer.PastelOne4',
        fillAlpha: 0.2
      }
    }
  }
});

ソースを追いかけてみた

chartjs-plugin-colorschemes.js

switch (dataset.type || chart.config.type) {
// For line, radar and scatter chart, borderColor and backgroundColor (50% transparent) are set
case 'line':
case 'radar':
case 'scatter':
    if (typeof dataset.backgroundColor === 'undefined' || override) {
        dataset[EXPANDO_KEY].backgroundColor = dataset.backgroundColor;
        dataset.backgroundColor = helpers.color(color).alpha(fillAlpha).rgbString();
    }
    if (typeof dataset.borderColor === 'undefined' || override) {
        dataset[EXPANDO_KEY].borderColor = dataset.borderColor;
        dataset.borderColor = color;
    }
    if (typeof dataset.pointBackgroundColor === 'undefined' || override) {
        dataset[EXPANDO_KEY].pointBackgroundColor = dataset.pointBackgroundColor;
        dataset.pointBackgroundColor = helpers.color(color).alpha(fillAlpha).rgbString();
    }
    if (typeof dataset.pointBorderColor === 'undefined' || override) {
        dataset[EXPANDO_KEY].pointBorderColor = dataset.pointBorderColor;
        dataset.pointBorderColor = color;
    }
    break;
// For doughnut and pie chart, backgroundColor is set to an array of colors
case 'doughnut':
case 'pie':
case 'polarArea':
    if (typeof dataset.backgroundColor === 'undefined' || override) {
        dataset[EXPANDO_KEY].backgroundColor = dataset.backgroundColor;
        dataset.backgroundColor = dataset.data.map(function(data, dataIndex) {
            colorIndex = dataIndex % length;
            return scheme[reverse ? length - colorIndex - 1 : colorIndex];
        });
    }
    break;
// For the other chart, only backgroundColor is set
default:
    if (typeof dataset.backgroundColor === 'undefined' || override) {
        dataset[EXPANDO_KEY].backgroundColor = dataset.backgroundColor;
        dataset.backgroundColor = color;
    }
    break;
}

半透明にしているところは、helpers.color(color).alpha(fillAlpha).rgbString();のあたり。
棒グラフはtypeがbarなのでdefaultのケースに入る。
defaultでは、半透明の処理が入っていないので、頑張って設定しても反映されなかったっぽい。

[代案]custom-Functionで半透明にした

1. カスタム関数を作成
2. 元の処理にcolorschemesに1行追加

hoge.js

// カスタム関数を追加
let addAlpaFunc = function (schemeColors) {
  return schemeColors.map(function (elm) {
    // rgba値に変換
    let alpha = 0.5;
    let red = parseInt(elm.substring(1, 3), 16);
    let green = parseInt(elm.substring(3, 5), 16);
    let blue = parseInt(elm.substring(5, 7), 16);
    let rgba = [red, green, blue, alpha].join(',');
    return "rgba(" + rgba + ")";
  });
}

// 元の処理
const ctx = document.getElementById('chart-bar').getContext('2d');
const myChart = new Chart(ctx, {
  ...
  options: {
    plugins: {
      // カラースキーム
      colorschemes: {
        scheme: 'brewer.PastelOne4',
        custom: addAlpaFunc // 追加
      }
    }
  }
});

これで反映できた。
とっても回りくどいので、他の方法がある気がする。