[Solved] Put chart series names as labels on the category axis

[n/a]

I have the chart code below that I would like to format so that the series names appear on the category axis as shown in the CaptureBugGood image,  my chart currently appears as in CaptureBugBad image.

Is there a way to have two levels of category axis labels such as category and then series, if not how can I put just the series names on the category axis while maintaining the series colors etc.

 

<kendo-chart *ngIf="!(graphType=='Doughnut')">

   <kendo-chart-value-axis>

     <kendo-chart-value-axis-item *ngFor="let item of valueAxes" [name]="item.name" [title]="{ text: item.title }"

                           [max]="item.max">

      <kendo-chart-value-axis-item-labels  [format]="item.format">

       </kendo-chart-value-axis-item-labels>

     </kendo-chart-value-axis-item>

   </kendo-chart-value-axis>

   <kendo-chart-category-axis>

     <kendo-chart-category-axis-item   [title]="xAxis_Label" [categories]="categories" [axisCrossingValue]="crossingValues">

     </kendo-chart-category-axis-item>

   </kendo-chart-category-axis>

   <kendo-chart-axis-defaults>

     <kendo-chart-axis-defaults-labels>

       <!-- format="n0"-->

     </kendo-chart-axis-defaults-labels>

   </kendo-chart-axis-defaults>

   <kendo-chart-legend [visible]="false"></kendo-chart-legend>

   <kendo-chart-series>

     <kendo-chart-series-item *ngFor="let series of model"

                              [name]="series.name"

                              [data]="series.data"

                              [categoryField]="series.category" field="value"

                              [stack]="series.stack"

                              [color]="series.color"

                              [type]="series.type"

                              [axis]="series.axis">

       <kendo-chart-series-item-tooltip>

         <ng-template let-value="value" let-category="category">

           <span [innerHTML]="series.dataLabel.replace('[value_1]', value.toLocaleString() ).replace('[year]', category ).replace('[series]', series.name ).replace('[#%]', ((value)*100).toFixed(1).toString() + '%') "></span>

         </ng-template>

       </kendo-chart-series-item-tooltip>

     </kendo-chart-series-item>

   </kendo-chart-series>

 </kendo-chart>

[n/a]

I was able to figure this out by setting up categories for each of my series.   Then to avoid spacing issue I had to hack it to set the spacing of the series to -1.

 

 

[Daniel]

Hi,

Unless you need multiple series in order to show item for each point in the legend, you could also show the name without spacing -1 by using a single series . The different colors can be configured in this case using the colorField - example.

Regards,
Daniel
Progress Telerik