CODEWITHSUNDEEP
angularjschartstypescriptchart.js
Robert Kirsten
Robert Kirsten

Reputation: 494

How to color legend in angular-chart.js

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.

Upvotes: 1

Views: 8495

Answers (2)

cleftheris
cleftheris

Reputation: 4839

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

Upvotes: 2

MartyIX
MartyIX

Reputation: 28646

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.

Upvotes: 1

Related Questions