Chart.js: (Beta2) How i can remove the top label / dataset label in Bar/Scatter/Line Chart?

[pleinx]

Hey guys,

how i can remove/hide the dataset-label in the topic headline chart types?

datasets: [ { label: '', .... } ]

empty string or undefined doesnt work for me!

[etimberg]

@pleinx are you talking about the legend? I don't think this is currently possible. should be easy to add though if the label is empty or undefined.

[pleinx]

@etimberg yes, its the legend.
to make sure we mean the same: http://fs5.directupload.net/images/160223/vauxsbo3.png

Could you help me how i can disable the legend via editing the Chart.js (Beta2)
or just say the line(s) which i can have a look and build my own solution.

[etimberg]

Are you wanting to disable the entire legend or just the text in the legend?

To disable the entire legend, add this in your config

legend: {
    display: false,
}

Off the top of my head, I don't know exactly where to edit to remove only the text. You could try setting the font size to 0 and see what happens, but i can't guarantee that it would work

legend: {
    labels: {
        fontSize: 0
    }
}

[pleinx]

Hey @etimberg ,
thank you very much!

This works for me:

new Chart.Scatter(ctx, { data: scatterChartData, options: { legend: { display: false }}});

[tubamohsin]

@pleinx where you have added this line of code?

[pleinx]

@TubaKhan4

In the arguments of the constructor. See here:

$(document).ready(function() {
   var ctx = document.getElementById("canvas").getContext("2d");
   Scatter = Chart.Scatter(ctx, {
      data: scatterChartData, 
      options: { 
        legend: { 
            display: true 
        }
      }
    });
  });

But it doesnt work with your version. I dont know which the current one, this was for beta2.

[sanjeevani-ftcash]

You can simply add public barChartLegend: boolean = true; in your component.ts file.

[akhromets]

If you set legend display to false, elements on the top of the chart will be cropped.
So you can just replace legend with the empty text:

const options = {
  legend: {
    display: false,
  },
  title: {
    display: true,
    text: ''
  },
};