Put chart series names as labels on the category axis

3 posts, 0 answers
  1. John Bowyer
    John Bowyer avatar
    31 posts
    Member since:
    Jun 2019

    Posted 17 Jul 2019 Link to this post

    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>
  2. John Bowyer
    John Bowyer avatar
    31 posts
    Member since:
    Jun 2019

    Posted 17 Jul 2019 in reply to John Bowyer Link to this post

    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.

     

     

  3. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 19 Jul 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top