How To Wrap custom component as a chart.js component into ion-card/ion-list/ion-item


#1

We are trying to use char.js into a ion-card, see the picture for not a working example …

The thing is, we are new on ionic and we are not sure about the components like ion-list and ion-item or ion-content, how we have to wrap the things into it … ion-item for example is not only a div … so ion-item does things we do not need …
So by the way can someone explain better how to wrap simple text or a custom component into ionic? Should we only use div’s? Or should we not use div’s in ionic2?

As you can see in the card there is a card header and 5 items into it, a item with a value “24,2” a item with a line chart, a item with a donut chart and a last item which have some text and numbers, so we do something like this

<ion-card>
  <ion-card-header>
   ....
  </ion-card-header>

  <ion-card-content>
     <ion-list>
         <ion-list>
            <ion-item style="max-height: 100px">
                   <component1></component1>
            </ion-item>
            <ion-item style="max-height: 100px">
                   <line-chart></line-chart>
            </ion-item>
            <ion-item style="max-height: 100px">
                   <donut></donut>
            </ion-item>
            <ion-item style="max-height: 100px">
                   <component2></component2>
            </ion-item>
         </ion-list>
    </ion-list>
  </ion-card-content>
</ion-card>

The problem is, in the ion-item there is also created an ion-label which I don’t need, and this is higher then the max-height:100px I declared in my styling.

So which are the right way to do this with ion-card and which is the right way to use ion-item or wrap custom components into ionic2 app?