Question

183

Draw horizontal line on chart in chart.js on v2

rated 0 times [ 184] [ 1] / answers: 1 / hits: 86166 / 7 Years ago, thu, march 9, 2017, 12:00:00

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 unable to completely understand it. I want to draw multiples horizontal lines. Like where if mean of dataset, standard deviation and min and max. I have tried the question here in stackoverflow but these are giving errors or may be i am not able to understand the working. This is my chart.js code

function display_graph(id, label, data) {

var ctx = document.getElementById(id);

var data = {

    labels: data.labels,

    datasets: [

        {

            label: label,

            fill: false,

            lineTension: 0.1,

            backgroundColor: rgba(75,192,192,0.4),

            borderColor: rgba(75,192,192,1),

            borderCapStyle: 'butt',

            borderDash: [],

            borderDashOffset: 0.0,

            borderWidth: 1,

            borderJoinStyle: 'miter',

            pointBorderColor: rgba(75,192,192,1),

            pointBackgroundColor: #fff,

            pointBorderWidth: 1,

            pointHoverRadius: 5,

            pointHoverBackgroundColor: rgba(75,192,192,1),

            pointHoverBorderColor: rgba(220,220,220,1),

            pointHoverBorderWidth: 2,

            pointRadius: 1,

            pointHitRadius: 10,

            data: data.assay_value,

            spanGaps: false

        }

    ]

};



//options

var options = {

    responsive: true,

    title: {

        display: true,

        position: top,

        text: label,

        fontSize: 18,

        fontColor: #111

    },

    legend: {

        display: true,

        position: bottom,

        labels: {

            fontColor: #333,

            fontSize: 16

        }

    }

};

var Blanks_Chart=null;

Blanks_Chart = new Chart(ctx, {

    type: 'line',

    data: data,

    options: options

});}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

isham

Add To Favorites

Follow

Total Points: 69

Total Questions: 86

Total Answers: 86

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

isham questions

1 NodeJS - TypeError: Busboy is not a constructor

Wed, Jan 19, 22, 00:00, 2 Years ago

1 How to pass query parameters to next.js api handler when calling from inside of getStaticProps

Wed, Dec 2, 20, 00:00, 4 Years ago

1 How to display the values from ajax success data to the html table?

Tue, Feb 25, 20, 00:00, 4 Years ago

1 How to set expanded prop for material ui TreeView component conditionally

Tue, Feb 4, 20, 00:00, 4 Years ago

1 Getting Firebase doc.data is undefined

Sun, Dec 1, 19, 00:00, 5 Years ago

View All

answered 7 Years ago mckinley · Accepted Answer

You could use the chart.js annotation plugin to easily draw lines on your chart without having to mess with rendering pixels in your canvas manually (the old approach that is giving you errors). Note, the plugin is created/supported by the same team as chart.js and is mentioned in the chart.js docs.

Here is an example codepen demonstrating creating a line on a chart.

Once you add the plugin, you simply just set annotation properties in your chart config. Here is an example.

var myChart = new Chart(ctx, {

  type: 'line',

  data: {

    labels: [January, February],

    datasets: [{

      label: 'Dataset 1',

      borderColor: window.chartColors.blue,

      borderWidth: 2,

      fill: false,

      data: [2, 10]

    }]

  },

  options: {

    responsive: true,

    title: {

      display: true,

      text: 'Chart.js Draw Line On Chart'

    },

    tooltips: {

      mode: 'index',

      intersect: true

    },

    annotation: {

      annotations: [{

        type: 'line',

        mode: 'horizontal',

        scaleID: 'y-axis-0',

        value: 5,

        borderColor: 'rgb(75, 192, 192)',

        borderWidth: 4,

        label: {

          enabled: false,

          content: 'Test label'

        }

      }]

    }

  }

});