Нарисовать график на React с помощью библиотеки
Всем привет! Кто знает, подскажите, пожалуйста, как нарисовать вот такой график с помощью библиотеки Mui X, ну или с помощью другой библиотеки.
Вся сложность заключается в следующем. В зависимости от определенных значений, которые передаются в качестве данных для графика, отрезки и задний фон на графике должны быть разных цветов. Данные примерно такие:
const data = [
{
"height": 145,
"distance": 0,
"surface": "SAND",
"maxSpeed": "SLOW"
},
{
"height": 157,
"distance": 1342,
"surface": "SAND",
"maxSpeed": "SLOW"
},
{
"height": 134,
"distance": 1732,
"surface": "SAND",
"maxSpeed": "SLOW"
},
{
"height": 206,
"distance": 1276,
"surface": "ASPHALT",
"maxSpeed": "FAST"
},
{
"height": 124,
"distance": 1574,
"surface": "GROUND",
"maxSpeed": "NORMAL"
}
]Где цвет отрезка зависит от значения MaxSpeed, а цвет заднего фона от Surface.