Нужно под дизайн сделать график.

Может кто-то, знает, как добавить задний фон столбца и такой, как на картинке футер
Вот моя конфигурация
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>
)