Waterfall Chart + Legend

2 posts, 0 answers
  1. Roma
    Roma avatar
    1 posts
    Member since:
    Oct 2018

    Posted 28 Aug Link to this post

    Is it possible to add legend to waterfall chart? Now, its not working

    <kendo-chart>

      <kendo-chart-value-axis>
        <kendo-chart-value-axis-item
          [labels]="valueAxisLabelConfig"
          [majorUnit]="20000"
          [min]="valueAxis().min"
          [max]="valueAxis().max"
          [majorGridLines]="lineColor"
          [line]="setVisible">
        </kendo-chart-value-axis-item>
      </kendo-chart-value-axis>

      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [line]="lineColor"
                                        [visible]="false"
                                        [majorGridLines]="setVisible"
                                        [majorTicks]="setVisible">
        </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>


      <kendo-chart-series>
        <kendo-chart-series-item
          type="waterfall"
          [gap]="2.5"
          [data]="data"
          [visibleInLegend]="true"
          field="value"
          categoryField="title"
          [color]="pointColor.bind(this)">

          <kendo-chart-series-item-labels
            [content]="labelContent"
            [font]="'bold 12px OpenSans, sans-serif'"
            position="outsideEnd"
            background="none"
            color="#000">
          </kendo-chart-series-item-labels>

        </kendo-chart-series-item>

      </kendo-chart-series>

      <kendo-chart-legend position="bottom"
                          [spacing]="38"
                          [visible]="true"
                          [labels]="legendOptions"
                          [markers]="markerOptions">
        <kendo-chart-legend-item
          [cursor]="'pointer'"></kendo-chart-legend-item>
      </kendo-chart-legend>

    </kendo-chart>

  2. Svetlin
    Admin
    Svetlin avatar
    444 posts

    Posted 01 Sep Link to this post

    Hi Roma,

    Thank you for the provided sample markup and screenshot.

    In general, the Chart legend is enabled by setting a value to the [name] property of the SeriesItemComponent:

    <kendo-chart-series>
        <kendo-chart-series-item
          type="waterfall"
          [gap]="2.5"
          [data]="data"
          [visibleInLegend]="true"
          field="value"
          categoryField="title"
          [color]="pointColor.bind(this)"
          name="foo">
        </kendo-chart-series-item>

    If the Waterfall chart uses 2 series and the legend is set via the suggested [name] property then the behavior would be as demonstrated in the following example:

    https://stackblitz.com/edit/angular-mbk89h?file=app/app.component.ts

    But in your example there seems to be only one series, thus I am not sure if the Legend will be a proper solution. Instead, providing a Tooltip for each series item might be a better option.

    I hope the provided information helps.

    Regards,
    Svetlin
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top