This is a migrated thread and some comments may be shown as answers.

Hide lablels for zero value columns

2 Answers 133 Views
Chart
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Veteran
AP asked on 22 Jun 2017, 07:21 AM

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 Answers, 1 is accepted

Sort by
0
Accepted
Tsvetina
Telerik team
answered on 23 Jun 2017, 03:00 PM
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.
0
AP
Top achievements
Rank 1
Veteran
answered on 23 Jun 2017, 03:07 PM
Thanks, that's great.
Tags
Chart
Asked by
AP
Top achievements
Rank 1
Veteran
Answers by
Tsvetina
Telerik team
AP
Top achievements
Rank 1
Veteran
Share this question
or