Как сделать ширину полосы в Chartist. js отзывчивой

Question

Как мне сделать ширину полосы в Chartist. js отзывчивой, чтобы полосы были шире, когда есть больше места для их «роста».

• Без преобразования данных в серия.

Answer 1

Я создал плагин, который решает эту проблему.

Вы можете настраивать 0.7 до тех пор, пока ширина полос и расстояние между ними не будут подходящими. Затем он настроит stroke_width в зависимости от ширины холста / диаграммы.

import Chartist from 'chartist';

const pluginDynamicBarWidth = (optionProps) => (chart) => {

  Chartist.extend({}, {}, optionProps);

  chart.on('draw', (data) => {
    const numberOfLabels = optionProps;
    const chartWidth = chart.container.clientWidth;
    const canvas = chartWidth * 0.7;
    const strokeWidth = canvas / numberOfLabels;

    if (data.type === 'bar') {
      data.element._node.style.strokeWidth = `${strokeWidth}px`;
    }
  });
};

export default pluginDynamicBarWidth;