[Solved] Tooltips attributes don't update by client API

[Achilles]

Hi,
I am using charts where I change the Value-axis / Y-Axis characteristic by Client API. However, I am not able to update the chart tool-tip attributes, either using "format" or "template". Here is a sample code where I use a drop-down list to invoke the Client API.

@using Telerik.Web.Mvc.UI


<script type="text/javascript">
    $(document).ready(function () {

        $('#CbType').change(function () {

            var type = $('#CbType').val();
            var chart = getChart();

            if (type == "Voltage") {
                chart.options.valueAxis.title.text = "Voltage (V)";
                chart.options.valueAxis.max = 300;
                //chart.options.tooltip.format = "{0:N} V";
                chart.options.tooltip.template = "<#= value #> V ";
                chart.options.tooltip.background = "#ddbbbb";
            }
            else {
                chart.options.valueAxis.title.text = "Current (Amps)";
                chart.options.valueAxis.max = 20;
                //chart.options.tooltip.format = "{0:N} A";
                chart.options.tooltip.template = "<#= value #> A ";
                chart.options.tooltip.background = "#bbbbdd";

            }

            chart.refresh();
            //.Format("{0:0.0} V")
        });

    });
    function getChart() {
        return $("#chart").data("tChart");
    }
</script>

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "chartForm" }))
{
    <div class="index-page">
        <div>


@(Html.Telerik().Chart()
        .Name("chart")
        .Title("Performance")
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
    .PlotArea(area => area
        .Border(1, "black", ChartDashType.Solid)
        )
        .Series(series =>
        {
            series.Line(new[] { 1, 2, 3, 4 }).Name("test");
            series.Line(new[] { 2, 2, 5, 3 }).Name("test2");
        })
    .ValueAxis(axis => axis
        .Numeric().Title(title => title
            .Text("Voltage (V)"))
        .Labels(labels => labels.Format("{0:#,##0}"))
        .MajorGridLines(majorGridLines => majorGridLines.Visible(false))
        .Max(300)
    )
    .Tooltip(tooltip => tooltip
        .Background("#ddbbbb")
        .Template("<#= value #> V ")
       .Visible(true))
    .HtmlAttributes(new { style = "width: 600px; height: 400px; margin: auto;" })
        )
        </div>
</div>

     <div>
        @Html.DropDownList("Type",
                    new SelectList(new List<string> { "Voltage", "Current" }, "Voltage"), new { @id = "CbType" })
    </div>

Thanks & Warm Regards

Achilles

[Iliana Dyankova]

Hello,
Thank you for contacting Telerik support.
Generally speaking, the update of the MVC Chart tooltip through "options" is currently not supported. As possible workaround you could set a "template" to the tooltip of each of the Chart Series.
For example:

$('#CbType').change(function () {
    var type = $('#CbType').val();
    var chart = getChart();
    var series = chart.options.series;
    var template;

    if (type == "Voltage") {
        ...
        template = "<#= value #> V ";
        ...
    }
    else {
        ...
        template = "<#= value #> A ";
        ...
    }

    for (var i = 0; i < series.length; i++) {
        series[i].tooltip.template = template;
    }

    chart.refresh();
});

At this stage our developers are working on most popular feature requests but in a short period of time this it will be possible to use "options" for customizing the tooltip.
I hope this helps.



Greetings,
Iliana Nikolova
the Telerik team

[Achilles]

Thanks a lot. It works

Achilles