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;
}
}
});