1

the very last example in this section of angular-chart.js documentation shows a pie/polar chart example with a colored legend. Obviously, this should be my answer, but:

I used this code for my frontend (which is pretty much the same as in the doc):

<canvas id="base" 
        class="chart-pie" 
        chart-type="type" 
        chart-data="data" 
        chart-labels="labels" 
        chart-legend="true">
</canvas>

I did also use the same data and labels. But unfortunately the legend of the rendered plot consists out of list-bullet-points and the labels (see enclosed image) This happens to all charts I create with this library. Does anybody know this behavior or (even better) any solution for that problem?

I am using angular/typescript and bound the DefinitelyTyped file to my project.

my angular-chart.js plot

EDIT: I am not willing to define any colors by myself! The chart gets its own colors by itself. We should leave it like that.

Robert Kirsten
  • 474
  • 2
  • 5
  • 12
  • 1
    It seems you are missing the reference to a style sheet in your html file `angular-chart.css` – cleftheris Nov 09 '15 at 17:26
  • Ha! At first I want to write 'I am afraid not.' And I didn't (forget), but did misspell the path to my bower components. Thanks for the hint, you @cleftheris definitely made my day! – Robert Kirsten Nov 09 '15 at 17:39
  • Take a look at this question, maybe help you http://stackoverflow.com/questions/37107708/render-a-legend-on-angular-chart-js-doughnut-chart – Mohammad Kermani Feb 27 '17 at 12:05

2 Answers2

2

It seems you are missing the reference to a style sheet in your html file. angular-chart.css

cleftheris
  • 4,626
  • 38
  • 55
1

I did the following:

$ git clone https://github.com/jtblin/angular-chart.js.git
$ npm install
$ bower install

Then open angular-chart.js\examples\charts.html

Change

<canvas id="pie" class="chart chart-pie chart-xs" chart-data="data" chart-labels="labels"></canvas>

to

<canvas id="pie" class="chart chart-pie chart-xs" chart-data="data" chart-labels="labels" chart-legend="true"></canvas>

And the chart has a legend with colors. Your CSS seems to be different than the one in official distribution.

MartyIX
  • 27,828
  • 29
  • 136
  • 207