0

I just loaded up SmartAdmin's Angular 2 seed project and I am trying to add a Sparkline pie chart object to the home page. I added the following span to home/home.component.html:

<span data-sparkline-type="pie" data-sparkline-offset="90" data-sparkline-piesize="18px">3,5,2</span>

All I see on the homepage is the numbers themselves, 3,5,2. I do not see the pie chart. I'm assuming I need to import some component but I can't figure out how or where to do this.

I did find a very similar question but the answer did not help me. That user is using Angular 1 and it seems that in Angular 2, there is no app.js or app.ts or any file with a commented-out app.graphs module.

Unable to get sparklines working in AngularJS version of SmartAdmin template

I am very new to Angular 2 and web development in general so I hope you will bear with me.

Community
  • 1
  • 1
Jacob L.
  • 11
  • 1

1 Answers1

0

It turns out there were two issues:

*any Sparkline graph needs to be enclosed in a div with the directive saSparklineContainer

*the span containing the sparkline must have the class sparkline

So,

<span data-sparkline-type="pie" data-sparkline-offset="90" data-sparkline-piesize="18px">3,5,2</span>

doesn't work.

<div saSparklineContainer >
    <span class="sparkline" data-sparkline-type="pie" data-sparkline-offset="90"    data-sparkline-piesize="18px">3,5,2</span>            
</div>

is what I needed.

Jacob L.
  • 11
  • 1