Я клонировал их репо и использовал ваш массив данных. Как я уже упоминал в своих заметках, это просто вопрос форматирования того, что вы кормите своей оси x /, я использовал момент в моем примере ниже, я уверен, что вы можете использовать другие способы получить желаемый формат даты.
дайте мне знать, если что-то в приведенном ниже коде нуждается в дополнительных разъяснениях. Кстати. Я использую реактивную версию, но на первый взгляд они обе выглядели одинаково.
const PlotlyClass = (props) => {
let VasilyBasicArray = [{ value: "2020-04-16", count: 100 }, { value: "2020-04-17", count: 200 }, { value: "2020-04-18", count: 300 }, { value: "2020-04-19", count: 400 }, { value: "2020-04-20", count: 500 }, { value: "2020-04-21", count: 600 }, { value: "2020-04-22", count: 700 }, { value: "2020-04-23", count: 800 }, { value: "2020-04-24", count: 100 }, { value: "2020-04-25", count: 200 }, { value: "2020-04-26", count: 300 }, { value: "2020-04-27", count: 400 }, { value: "2020-04-28", count: 500 }, { value: "2020-04-29", count: 600 }, { value: "2020-04-30", count: 700 }]
return (
<Plot
data={[
{
x: VasilyBasicArray.map(rec => moment(rec.value).format('dd-Do')),
y: VasilyBasicArray.map(rec => rec.count),
type: 'scatter',
mode: 'lines+markers',
marker: { color: 'red' },
},
{ type: 'bar', x: VasilyBasicArray.map(rec => moment(rec.value).format('dd-Do')), y: VasilyBasicArray.map(rec => rec.count) },
]}
layout={{ width: 320, height: 240, title: 'A Fancy Plot' }}
/>
);
};