Is it possible to conditionally display the series label?

[Javier]

I have a stacked bar chart with the series labels visible.
But I only want the label to display if the series has a value greater than zero.

Here is my markup

@(Html.Kendo().Chart<ChartModel>(Model)
.Name("chart")
.Title("Pending Orders")
.Legend(legend => legend
.Visible(false)
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Column().Stack(true)
.Labels(labels => labels.Background("transparent").Visible(true).Font("40px sans-serif").Position(ChartBarLabelsPosition.Center).Color("black"))
)
.Series(series =>
{
series.Column(model => model.OnTimeCount).Name("On Time").Color("Green");
series.Column(model => model.WarningCount).Name("Warning").Color("Yellow");
series.Column(model => model.AlertCount).Name("Alert").Color("Red");
})

.CategoryAxis(axis => axis
.Categories(model => model.Day)
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Line(line => line.Visible(false))
.MajorGridLines(lines => lines.Visible(false))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name #: #= value #")
)
)

I've attached an image of the stacked chart with the top series set to zero.  As you can see, the effect really isn't very intuitive from a charting stand point.  I could add a legend, but in the context of the way the chart will be used, it's unecessary.

The data is only relevant IF it exists.

[Iliana Dyankova]

Hi Javier,

In order to achieve this I can suggest in the dataBound event to check if the value is under 0 and display/hide the label through labels.visible option. For example: 

@(Html.Kendo().Chart(Model)
  //....
 .Events(ev=>ev.DataBound("onDB"))
)

<script>
function onDB(e) {
  e.sender.options.series[0].labels.visible = function (point) {
     if (point.value < 0) {
        return false
     }
     else { return point.value}
  }
}
</script>

Regards,
Iliana Nikolova
Telerik

[Javier]

Thank you for your help.  I ended up using a nullable int and pass a null value instead of zero and that seems to do the trick.  

But your answer will help me in many other situation.

I appreciate it.

 

[Kevin Kembel]

I had used this recommendation in Q3 2013, and used the DataBound event to set the label visibility on a per-point basis.  I also tried to use this to customize the colors.

It looks like Q1 2014 has broken this ability, when I set
e.sender.options.series[0].labels.visible = function (point) { ... }

The function is only called once for the first point in the series, and is no longer called for each point.  So we're back to only being able to set visibility for the entire series of points instead of on a per-point basis.

[Iliana Dyankova]

Hi Kevin,

The observed behaviour is due to a bug in the current version of Kendo UI Chart, however we are working on it and will do our best to address it as soon as possible. Please excuse us for the inconvenience caused. 

Regards,
Iliana Nikolova
Telerik

 

 

[Muneer]

Hi ,

I have been using  kendo stacked bar chart . I used the below code to display my stacked bar chart.

@(Html.Kendo().Chart()
.Name("chrtMonth_" + ContextId)
.Legend(legend => legend.Position(ChartLegendPosition.Top).Visible(true))
.SeriesDefaults(seriesDefaults => seriesDefaults.Column().Visual("columnVisual").Stack(true)
.Highlight(highlight => highlight.Toggle("toggleHandler")))
.DataSource(ds => ds.Read(read => read.Action("GetWeeklyMonthlyGraphData", "CMCDashboard")))
.Series(series =>
{
foreach (var row in Model.Rows)
{
var monthOnMontValues =
new double[]
{
Convert.ToDouble(((System.Data.DataRow)row)[1])<0?0:Convert.ToDouble(((System.Data.DataRow)row)[1]),
Convert.ToDouble(((System.Data.DataRow)row)[2])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[2]),
Convert.ToDouble(((System.Data.DataRow)row)[3])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[3]),
Convert.ToDouble(((System.Data.DataRow)row)[4])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[4]),
Convert.ToDouble(((System.Data.DataRow)row)[5])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[5]),
Convert.ToDouble(((System.Data.DataRow)row)[6])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[6]),
Convert.ToDouble(((System.Data.DataRow)row)[7])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[7]),
Convert.ToDouble(((System.Data.DataRow)row)[8])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[8]),
Convert.ToDouble(((System.Data.DataRow)row)[9])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[9]),
Convert.ToDouble(((System.Data.DataRow)row)[10])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[10]),
Convert.ToDouble(((System.Data.DataRow)row)[11])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[11]),
Convert.ToDouble(((System.Data.DataRow)row)[12])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[12])
};
series.Column(monthOnMontValues).Name(Convert.ToString(((System.Data.DataRow)row)["Status"]));
}

})
.CategoryAxis(axis =>
{
string[] names = null;
string colNames = string.Empty;
for (int i = 0; i < Model.Columns.Count; i++)
{
if (i != 0)
{
colNames = colNames + Model.Columns[i] + ",";
}
}
names = colNames.Split(',').Where(p => !string.IsNullOrEmpty(p)).ToArray();
axis.Categories(names).Visible(true);
}
).Events(ev => ev.DataBound("onDB"))
.Panes(panes => panes.Add().Clip(false))
.ValueAxis(axis => axis.Numeric()
.Labels(labels =>
labels.Template("#= kendo.format('{0:N0}', value) # ")
)
.Line(line => line.Visible(false))
).Tooltip(t => t.Visible(true).Shared(true))
)

My Question shared tooltip shows data for zero value also I don't want to show the zero values in my shared tool tip.

 

Attaching the Tool tip screen shot.

Thanks,

Munna

[Iliana Dyankova]

Hi Munna,

For this scenario I would suggest to use custom JavaScript logic in the SharedTemplate: 

http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/ChartTooltipBuilder#methods-SharedTemplate(System.String)

For your convenience below is an example: http://dojo.telerik.com/@Iliana/IgOnu

On a side note, it is accepted to post different questions in separate threads. As this thread is related to the chart series labels, I would like to ask you to open new threads for different questions. Thank you in advance for your understanding and cooperation.

Regards,
Iliana Nikolova
Telerik by Progress