Draw horizontal line on chart in chart.js on v2

后端 未结 4 1115
慢半拍i
慢半拍i 2020-12-13 04:05

I have drawn a line chart using chart.js. For the labels and datasets i am getting values from the database. I am new to chart.js and its very powerful library, yet i am una

4条回答
  •  执念已碎
    2020-12-13 04:46

    if you want to draw threshold line,easiest way is that using mixed line chart.

    Note: Make an array filled with threshold value and the length should be same as your dataset.

    var datasets = [1, 2, 3];
    var ctx = document.getElementById('chart').getContext('2d');
    var thresholdValue = 2;
    var thresholdHighArray = new Array(datasets.length).fill(thresholdValue);
    var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: [],
                    datasets: [
                    {datasets}, thresholdHighArray]
                },         
                options: {
                    responsive: true,
                    legend: {
                        position: 'bottom',
                    },
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                    display: true,
                                    labelString: 'Readings'
                            }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                    display: true,
                                    labelString: 'Reading ( °C )'
                            }
                        }]
                    },
                    annotation: {
                      annotations: [
                        {
                          type: "line",
                          mode: "vertical",
                          scaleID: "x-axis-0",
                          borderColor: "red",
                          label: {
                            content: "",
                            enabled: true,
                            position: "top"
                          }
                        }
                      ]
                    }
            });
        };
    

提交回复
热议问题