4

I'm using ChartJS in my project (more exactly ng2-charts for Angular 2 built on top of the original library).

I see there is an option:

legend: false|true

However I find particularly annoying tot to be able to remove the upper legend (which describes each line in the line chart for example). Below you can see what I mean:

enter image description here

I tried with

.chart-legend {
  visibility: hidden;
  display: none;
}

taking inspiration from Chartjs Legend Styling

but I think that applies to some other legend (bottom legend). Is there a way to customize / hide the upper legend?

Also, is there an option to change x/y-axes label orientation? (e.g. display them vertically, rather than diagonal)

Community
  • 1
  • 1
dragonmnl
  • 14,578
  • 33
  • 84
  • 129

1 Answers1

14

When creating a chart, you can give it a set of chart options. One of the possible options is the Legend Configuration. To hide the legend, simply use an option like this: 

options: {
    legend: { display: false }
}

Although I haven't used ng2-charts, looking through the documentation (specifically the charts example) it seems you can simply define a chart legend boolean like this:

public lineChartLegend:boolean = true;

And then add this value to the chart like this:

   <base-chart class="chart"
                   ...
                   [legend]="lineChartLegend"
                   [chartType]="lineChartType"
                   ...></base-chart>

Finally, the likely reason why Chartjs Legend Styling solution doesn't work is that it was designed for chart.js v1.x, while ng2-charts appears to work with chart.js v2.x, which is a major change to the previous version.

Hope this helps!

David
  • 763
  • 1
  • 7
  • 14