Cross disappears on hover

AUTHOR: Marin Bratanov

DATE POSTED: June 08, 2018

PROBLEM

when I mouse over the cross marker, it turns white. Since the background is white, it effectively disappears.

SOLUTION

There are three solutions:

• Change the marker type to a different mode that is better visible (Circle, Square, Triangle) because it is also filled with a color unlike the Cross marker that only has a white border.
  <telerik:LineSeries>

      <MarkersAppearance MarkersType="Circle"/>
• Change the background color of the plot area to a contrasting color.
  <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1">

      <PlotArea>

          <Appearance FillStyle-BackgroundColor="LightGray"></Appearance>
• Change the settings of the default highlight visual.
  <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1">

      <ClientEvents OnLoad="OnLoad" />

      <PlotArea>

          <Series>

              <telerik:LineSeries Name="Baseline %">

                  <LabelsAppearance Visible="false" />

                  <MarkersAppearance BackgroundColor="#538ebb" BorderColor="#538ebb" MarkersType="Cross" Size="12" BorderWidth="2" />

                  <LineAppearance Width="0" />

                  <TooltipsAppearance DataFormatString="Baseline: {0:0}%" Color="#ffffff" />

                  <Appearance FillStyle-BackgroundColor="#538ebb" />

                  <SeriesItems>

                      <telerik:CategorySeriesItem Y="1" />

                      <telerik:CategorySeriesItem Y="2" />

                      <telerik:CategorySeriesItem Y="3" />

                  </SeriesItems>

              </telerik:LineSeries>

          </Series>

      </PlotArea>

  </telerik:RadHtmlChart>

  <script>

      function myHoverVisual(e) {

          var defaultVisual = e.createVisual();

          defaultVisual.options.stroke.color = "#538ebb";

          //defaultVisual.options.fill.color = "#538ebb"; //could be used for filled shapes like square, triangle, circle

          return defaultVisual;

      }

   

      function OnLoad(sender, args) {

          var kChart = sender.get_kendoWidget();

          var opts = kChart.options;

          opts.series[0].highlight = {};

          opts.series[0].highlight.visual = myHoverVisual;

          kChart.setOptions(opts);

      }

  </script>