Как сделать такой эффект при наведении на график?

Question

[testDevelop]

Использую плагин chart Js, и мне нужно сделать вот такой эффект при наведении, можно ли это сделать?

Comments

[testDevelop]

TNPTSYWWCC, чтобы при наведении елемент был такой как синий на фото

[testDevelop]

Никита Полевой, меня вот такой эфект интерисует

Answer 1

[coderisimo]

Можно сделать все. Вопрос лишь в том, сколько времени и сил надо ))

https://jsfiddle.net/ywksj3g0/1/

Comments

[Сергей c0re]

я так понял вы под диаграмму подложили фон, но он одноцветный.
а можно ли наложить две диаграммы друг на друга? (первая потоньше, вторая пошире)

[coderisimo]

Сергей, смотрите мой первый ответ ))). Мне лично идея двух диаграмм не импонирует

думаю, можно попробовать hoverBorderWidth - https://www.chartjs.org/docs/latest/charts/doughnu...

[Сергей c0re]

coderisimo, hoverBorderWidth он вокруг дуги будет, а требуется же уширение.
можно подложить нарисованную "вручную" диаграмму
https://jsfiddle.net/sazakharov/zkbd7qc1/
но зачем тогда этот Chart.js ? ))
ради автоматической легенды и всплывающих тултипов? и выделения сегмента (с подставленной "подложкой")

[coderisimo]

Сергей, бордер это часть выделенного сегмента , так что если он будучи такого же цвета, как и весь сегмент будет становиться толще , то и сегмент будет визуально утолщаться. Разумеется, есть нюансы. Но, как правило, возможностей chart.js хватает с головой. Если нет - отличный повод повеселиться )))))

[Сергей c0re]

coderisimo, я это понимаю, но получится некрасиво, т.к. бордюр налазит на соседние сегменты.
очевидно веселиться -> рисовать сегменты самому и подставлять фоном под диаграмму, как предложил coderisimo