Как сделать средствами chartjs 2 версии график с полупрозрачным бэкграундом позади строк?

введите сюда описание изображения

Не могу сообразить как сделать на заднем плане серый полупрозрачный бэкграунд и круглые края, в 3 версии видел для этого настройку, а вот во второй ее нет. введите сюда описание изображения

Вот то, что получилось у меня + код.

const data = {
  labels: ['Запланировано вагонов', 'Есть заявки', 'Заявки клиента', 'Подтверждено к погрузке', 'Отгружено вагонов', 'Осталось погрузить'],
  datasets: [
    {
      label: 'Population (millions)',
      barThickness: 11,
      backgroundColor: ['#008BFF', '#0170CC', '#0170CC', '#FFBB00', '#5CB85C', '#FF8A00'],
      data: [413, 203, 103, 122, 114, 52],
    },
  ],
};

const options = {
  hover: {
    animationDuration: 0,
  },
  animation: {
    duration: 1,
    onComplete() {
      const chartInstance = this.chart;
      const { ctx } = chartInstance;

      ctx.fillStyle = '#323C47';
      ctx.font = '600 18px Lato';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';

      this.data.datasets.forEach((dataset, i) => {
        const meta = chartInstance.controller.getDatasetMeta(i);
        meta.data.forEach((bar, index) => {
          const dataNew = dataset.data[index];
          // eslint-disable-next-line
          ctx.fillText(dataNew, bar._model.x + 18, bar._model.y + 10);
        });
      });
    },
  },
  legend: { display: false },
  scales: {
    xAxes: [{
      ticks: {
        display: false,
      },
      gridLines: {
        display: false,
      },
    },
    ],
    yAxes: [{
      ticks: {
        fontFamily: 'Roboto',
        fontSize: '14',
        fontStyle: 'normal',
        fontColor: '#323C47',
        padding: 20,
        zeroLineColor: 'rgba(228, 230, 231, 1)',
        stepSize: 50,
      },
      gridLines: {
        display: false,
      },
    }],
  },
  maintainAspectRatio: false,
};

Ответы (0 шт):