labels on sparkline

[Bob]

Given a simple sparkline with static data:

            <kendo-sparkline [chartArea]="{background: ''}"
              style="width:30px; height:30px;"
              type="pie">
              <kendo-chart-series>
                <kendo-chart-series-item [data]="[1,1,1]"
                  [color]="['green', 'yellow', 'red']"
                  [labels]="['Closed', 'Doing or Done', 'To do']"
                  field="value"
                  categoryField="label">
                  <kendo-chart-series-item-tooltip>
                    <ng-template let-category="label"
                      let-value="value">
                      {{category}}: {{value}}
                    </ng-template>
                  </kendo-chart-series-item-tooltip>
                </kendo-chart-series-item>
              </kendo-chart-series>
            </kendo-sparkline>

How do i display the label only in the tooltip?  I have tried using "category" and even a category axis bit to no avail.

[Bob]

Also, on the above, is it possible to apply a divider line between each slice on the pie chart?

[Slavena]

Hi Bob,

Thank you for the provided code snippet.

I would advise updating the structure of the SeriesItem data collection and setting it to an array of objects each containing the corresponding value and category. Furthermore, for a visual separator between each SeriesItem I would suggest utilising the border: Border input property:

public border: Border = {
  color: 'black',
  dashType: 'solid',
  width: 0.5
};

This Stackblitz example demonstrates the approaches suggested above.

I hope this helps. Let me know if there are any further questions.

Regards,
Slavena
Progress Telerik

[Bob]

Perfect answer, thanks Slavena.