Cómo crear una barra de progreso con información adicional de estado actual en un globo informativo (tooltip).

Estoy intentando crear una línea de progreso que se vea así:

Tendrá un punto de inicio y un punto final, junto con un punto actual, el cual será mostrado basado en su valor. Por ejemplo, si es 155, estará al principio de la línea roja, si es 180 estará cerca del borde derecho de la línea roja, y si es 85 estará al principio de la línea verde. Lo difícil es hacer que el tooltip se muestre basado en el número en la línea.

Mi idea es usar una biblioteca de gráficos, en este caso Victory Chart, y mostrar el tooltip basado en eso, pero parece ser más difícil de lo que pensaba y el gráfico es más avanzado que esto.

¿Cuál es la mejor manera o hay alguna biblioteca para crear esta línea con un tooltip del estado actual como este? Muchas gracias.