Hide lablels for zero value columns

3 posts, 1 answers
  1. AP
    AP avatar
    207 posts
    Member since:
    Apr 2010

    Posted 22 Jun Link to this post

    I have a chart, which uses the group function, in order to display a dynamic number of series. Unfortunately, in order for this to work properly, each series must contain a record for each category (in this case, month). If not, columns are displayed in the incorrect category, and the chart has missing x-axis labels.

    However, I also want each column to have a label showing the value, but the chart also shows labels for the 0 value items.

    How can I remove these zero labels (or show dynamic series without adding the values in, in the first place!)?

     

    The chart definition is:-

    @(Html.Kendo().Chart<WLI_Payments.Models.SummaryChartItem3>()
       .Name("SummaryDirectorateChartThree")
         
        .Title(ti => ti.Text("Requests by Month and Type").Font("11px Arial"))
       .Theme("bootstrap")
       .Legend(l => l.Visible(true).Position(ChartLegendPosition.Bottom))
       .ChartArea(c => c.Background("transparent").Height(250))
       .DataSource(ds => ds.Read(read => read.Action("GetRequestTypeData", "Dashboard"))
       .Group(g => g.Add(v => v.RequestTypeDescription))
       .Sort(s =>
       {
           s.Add("Year").Ascending();
     
       }
     
     
       )
       )
           .Series(series =>
           {
               series.Column(model => model.YIntValue).Name("#=group.value#").Spacing(0).Labels(l => l.Visible(true).Font("9px Arial"));
           })
           .CategoryAxis(axis => axis
               .Categories(model => model.Month)
               .Labels(labels => labels.Rotation(-45).Font("10px Arial"))
               .MajorGridLines(lines => lines.Visible(false))
     
     
           )
           .ValueAxis(axis => axis.Numeric()
     
              .Labels(labels => labels.Font("10px Arial"))
     
     
     
          )
           .Tooltip(tooltip => tooltip
               .Visible(true)
            
            .Background("White")
              .Template("#=tooltipTemplate3(dataItem)#")
           )
     
                .Pannable(p => p.Lock(ChartAxisLock.Y))
     
           .Zoomable(zoomable => zoomable
               .Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))
               .Selection(selection => selection.Lock(ChartAxisLock.Y))
           )
     
     
     
               )

    Thanks

  2. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2107 posts

    Posted 23 Jun Link to this post

    Hi Andrew,

    You can use a function to determine the label visibility based on the current data point value. This is done using the VisibleHandler method:
    .Series(series =>
    {
        series
            .Column(new int[] { 0, 925844, 984930, 0, 1100941, 1139797, 1172929, 1184435, 0 })
            .Name("0-19").Stack("Female").Labels(labels=>labels.VisibleHandler("isVisible"));
     
        series
            .Column(new int[] { 0, 555695, 627763, 718568, 810169, 883051, 942151, 1001395, 0 })
            .Name("20-39").Stack("Female").Labels(labels => labels.VisibleHandler("isVisible"));
     
        series
            .Column(new int[] { 379788, 0, 0, 484739, 395533, 435485, 499861, 569114, 0 })
            .Name("40-64").Stack("Female").Labels(labels => labels.VisibleHandler("isVisible"));
     
    })
    <script>
        function isVisible(arg) {
            return arg.value !== 0;
        }
    </script>


    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. AP
    AP avatar
    207 posts
    Member since:
    Apr 2010

    Posted 23 Jun in reply to Tsvetina Link to this post

    Thanks, that's great.
Back to Top