¿Cómo agregar una línea horizontal en un punto específico en chart.js cuando se desplaza?

Quiero poder agregar varios puntos como un lugar de referencia donde pueda mostrar la línea horizontal.

Aquí hay una imagen de lo que estoy tratando de lograr:

También quiero hacerlo para que cuando no se desplace sobre un punto se reduzca su opacidad y cuando se desplace sobre él la opacidad sea normal. Tampoco estoy seguro de cómo agregar el cuadrado y hacer que el cuadrado sea más grande cuando se desplaza el puntero del ratón y agrega el texto ‘wow’. Agradezco cualquier ayuda, gracias. 🙂

One Solution collect form web for “¿Cómo agregar una línea horizontal en un punto específico en chart.js cuando se desplaza?”

Puede usar el complemento de anotaciones chart.js para dibujar líneas horizontales en valores específicos, luego puede implementar una callback apropiada (eventos en todo el gráfico) para mostrar / ocultar esas líneas.

 annotation : { drawTime : "afterDraw", annotations : [{ id : "line1", type : "line", mode : "horizontal", scaleID : "y-axis", value : 4.5, borderWidth : 2, borderColor : "red", label : { content : "threshold 1", enabled : true, position : "right" } } ] }, 

Vea mi violín ejemplificando el enfoque: https://jsfiddle.net/beaver71/5jg4wgdh/

 var data_set = [{x: 1, y: 12}, {x: 2, y: 3}, {x: 3, y: 2}, {x: 4, y: 1}, {x: 5, y: 8}, {x: 6, y: 8}, {x: 7, y: 2}, {x: 8, y: 2}, {x: 9, y: 3}, {x: 10, y: 5}, {x: 11, y: 11}, {x: 12, y: 1}]; var labels = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]; var lines = [], id = 0; var linesOn = false; var data = { labels: labels, datasets: [{ label: "My First dataset", backgroundColor: "rgba(255,99,132,0.2)", borderColor: "rgba(255,99,132,1)", borderWidth: 2, hoverBackgroundColor: "rgba(255,99,132,0.4)", hoverBorderColor: "rgba(255,99,132,1)", data: data_set, }] }; var option = { legend: false, title: { display: true, }, onHover: function(evt) { console.log("onHover", evt.type); if (evt.type == 'mousemove' && linesOn == false) { linesOn = true; myLineChart.options.annotation.annotations = lines; myLineChart.update(); } else if (evt.type == 'mouseout' && linesOn == true) { linesOn = false; myLineChart.options.annotation.annotations = []; myLineChart.update(); } var item = myLineChart.getElementAtEvent(evt); if (item.length) { console.log(">item", item); console.log(">data", item[0]._index, data.datasets[0].data[item[0]._index]); } }, onClick: function(evt) { var el = myLineChart.getElementAtEvent(evt); console.log("onClick", el, evt); }, annotation: { drawTime: "afterDraw", annotations: lines }, scales: { xAxes: [{ id: 'x-axis', type: 'linear', position: 'bottom', ticks: { max: 12, min: 1, stepSize: 1, callback: function(value, index, values) { return data.labels[index]; } } }], yAxes: [{ id: 'y-axis', type: 'linear', }], } }; var myLineChart = Chart.Line('myChart', { data: data, options: option }); // define two lines (these code must be after chart creation) addLine(3.5); addLine(7); function addLine(value) { id++; var ln = { id: "line" + id, type: "line", mode: "horizontal", scaleID: "y-axis", value: value, borderWidth: 2, borderColor: "red", label: { content: "threshold " + id, enabled: true, position: "right" } }; lines.push(ln); } 
    
Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.