Chartjs-Hide data labels chart.js and draw/mark y = 0 with thicker line

by

0👍

✅

For the first question, you have to disable the legend:

plugins: {
   // ..... other plugins options
   legend: {
     display: false
   }
}

For the second question, you may use chartjs-plugin-annotation

After loading the plugin, for instance from CDN (and depending on how you included it, you’ll also have to register the plugin – not necessary for CDN scripts), you may define a line like this:

   plugins: {
      // .... other plugin options
      annotation: {
        annotations: {
          line1: {
            type: 'line',
            yMin: 2.4,
            yMax: 2.4,
            borderColor: 'rgb(255, 99, 132)',
            borderWidth: 2,
          }
        }
      }
    }

Snippet:

const dates = Array.from({
    length: 16
  },
  (_, i) => ({
    x: '' + (Math.floor(new Date().valueOf() / 1000) + 24 * 3600 * i),
    y: 50 * Math.exp(-(i - 8) * (i - 8)) - Math.random() * 20
  }))

new Chart('chart1', {
  type: 'line',
  data: {
    datasets: [{
      data: dates,
      borderWidth: 2
    }],
    //labels: ['a', 'b']
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    elements: {
      point: {
        radius: 0
      }
    },
    plugins: {
      tooltip: {
        enabled: false
      },
      legend: {
        display: false
      },
      annotation: {
        annotations: {
          line1: {
            type: 'line',
            yMin: 2.4,
            yMax: 2.4,
            borderColor: 'rgb(255, 99, 132)',
            borderWidth: 2,
          }
        }
      }
    }
  }
});
<div style="min-height: 300px">
    <canvas id="chart1">
    </canvas>
  </div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js" integrity="sha512-6HrPqAvK+lZElIZ4mZ64fyxIBTsaX5zAFZg2V/2WT+iKPrFzTzvx6QAsLW2OaLwobhMYBog/+bvmIEEGXi0p1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/3.0.1/chartjs-plugin-annotation.min.js" integrity="sha512-Hn1w6YiiFw6p6S2lXv6yKeqTk0PLVzeCwWY9n32beuPjQ5HLcvz5l2QsP+KilEr1ws37rCTw3bZpvfvVIeTh0Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

or fiddle

Of course, without the plugin, you may very well define a second dataset with two points at the ends of the x interval of the first dataset, and the desired value as y — jsFiddle

Leave a comment