Задать вопрос
@azemlyankin

Как стилизовать график Chart js?

Нужно под дизайн сделать график.
62a30c7e5bec6566597198.png
Может кто-то, знает, как добавить задний фон столбца и такой, как на картинке футер
62a30ced65b8a566182513.png

Вот моя конфигурация
export const options: any = {
  maintainAspectRatio: false,
  responsive: true,
  scales: {
    y: {
      position: 'right',
      ticks: {
        color: 'black',
        font: {
          size: '12',
          color: '#333'
        },
        callback: (value: number, index: number, values: any) => {
          if(index === 2 || index === 4 || index === 6 || index === 8) 
            return humanTime(values[index].value) 
          
          
        }
      },
    },
    x: {
      grid: {
        display: false,
      },
    }
  },
  plugins: {
    legend: {
      display: false,
    },
    title: {
      display: false
    },
  },
}

const plugins:any = [{
  beforeDraw(chart: any, _: any, options:any) {
    const {ctx} = chart
    ctx.save()
    ctx.setLineDash(options.borderDash || [])
    ctx.lineDashOffset = options.borderDashOffset
    ctx.fillStyle = '#F4F4F4'
    ctx.fillRect(0, 0, chart.width, chart.height)
    ctx.restore()
  }
}]

const labels = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']

export const data = {
  labels,
  datasets: [
    {
      data: [10, 20, 49, 50],
      backgroundColor: 'rgba(234, 138, 121, 1)',
    }
  ],
}

export const BarChart = () => (
  <div className='barChart m-0'>
    <Bar options={options} data={data} plugins={plugins}/>
  </div>
)
  • Вопрос задан
  • 217 просмотров
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы