Add class to marker in Jquery ScatterPlot Chart

[Lee]

I have a kendo UI Jquery scatterplot chart with markers of type: square and rotation: 45. I'm trying to add a class based on the series to the markers so that certain ones can be styled to have a pointer when the user mouses over them. I found a few Google AI answers but they seem to be wrong. Here is what I tried where chartData is set to my series option on initialization.

Update: I added the class manually in dev tools and it still doesn't trigger the pointer to appear. This seems to be due to there being a separate marker that Kendo is creating in the DOM for the hover event which does not get the class. I need to add a cursor: pointer; style to that element

        chartData.push({
            name: legendSeriesName,
            xField: "x",
            yField: "y",
            data: storeDetailScatterPlotData
                .filter(d => d.seriesName === seriesName && d.accountId === storeDetailAccountId)
                .map(d => ({ x: d.sales, y: d.storeAmt, storeName: d.storeName, storeId: d.storeId, accountId: d.accountId })),
            zIndex: 10 - index,
            color: seriesColor,
            markers: {
                border: seriesColor,
                background: seriesColor,
                type: "square",
                rotation: 45,
                visual: function (e) {
                    var series = e.series.name;
                    var defaultVisual = e.createVisual();
                    defaultVisual.options.attr("class", series);
                    return defaultVisual;
                }
            }
        });

[Neli]

Hi Lee,

Adding class does not work as expected because the Kendo Drawing API creates SVG elements, and its .options.attr("class", ...) does not add a DOM class in the usual way. CSS classes applied this way will not affect the cursor style. Instead, you should set the cursor style directly on the visual's options.

The highlight marker is rendered as a separate visual element, so both need to be handled for a consistent cursor style or class. To style both the marker and its highlight (hover) in a Kendo UI for jQuery ScatterPlot Chart, you need to customize both the series.markers.visual and the series.highlight.visual options. 

With the above said, I would suggest setting the cursor style in both the marker and highlight visuals to achieve the pointer effect on hover.

markers: {
    type: "square",
    rotation: 45,
    visual: function(e) {
        var marker = e.createVisual();
        // Set the cursor style directly for the marker
        marker.options.set("cursor", "pointer");
        return marker;
    }
},
highlight: {
    visual: function(e) {
        var highlight = e.createVisual();
        // Set the cursor style for the highlight marker as well
        highlight.options.set("cursor", "pointer");
        return highlight;
    }
}

Here is a Dojo example where this is demonstrated - https://dojo.telerik.com/ZXkEidTG.

If you want to target specific series, you can add a condition:

visual: function(e) {
    var marker = e.createVisual();
    if (e.series.name === "YourTargetSeries") {
        marker.options.set("cursor", "pointer");
    }
    return marker;
}

I hope this helps. 

Regards,
Neli
Progress Telerik

[Lee]

Thank you so much! I was missing the highlight property. 

[Neli]

Hi Lee,

I am glad to hear that the issue is resolved. Do not hesitate to contact us in case you have any questions.

Regards,

Neli