Search code examples
angularangular-uikendo-chart

Angular 4 Kendo Column Graph show value by default and show Y axis name at bottom

Here I've 2 issues. enter image description here 1) I want to show value by default on top of the column bar. 2) Data is having Negative and Positive values. I need to show names at bottom of the Chart. But names is displaying in the column if value is negative.

<kendo-chart>
    <kendo-chart-title text="% Top 10"></kendo-chart-title>
    <kendo-chart-series>
        <kendo-chart-series-item type="column" [data]="UI.series" field="data"
            categoryField="name" 
            [color]="UI.handlers.pointColor"
            >
            <kendo-chart-series-item-tooltip background="skyblue" visible="true">
                <ng-template let-dataItem="dataItem">
                    {{dataItem.data}}%
                </ng-template>
            </kendo-chart-series-item-tooltip>
        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>
Solution 
  •  <kendo-chart [categoryAxis]="{labels: { rotation: 'auto'} }">
      <kendo-chart-title text="% Share Chg Top 10"></kendo-chart-title>
      <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
      <kendo-chart-series>
        <kendo-chart-series-item type="column" [data]="UI.gridData" field="dath" categoryField="name" [color]="UI.handlers.pointColor" visible="true">
          <kendo-chart-series-item-labels [format]="'p2'">
          </kendo-chart-series-item-labels>
          <!--<kendo-chart-series-item-tooltip background="skyblue" visible="true">
            <ng-template let-dataItem="dataItem">
              {{dataItem.data| number : '1.2-2'}}%
            </ng-template>
          </kendo-chart-series-item-tooltip>-->
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>