[Feature] Line-Series property to define cursor when mousing over line element.

[PixelatedPope]

What problem does this feature solve?

There is currently no way that I can find to easily control the cursor icon when moused over a line.

I have a simple trend chart with several mark lines showing upper and lower limits.

When mousing over either the dotted mark lines or the grey connecting lines, the cursor changes to 'pointer' even though the user cannot interact with these lines in any way.

Series-line has a "cursor" property. However this property only affects the cursor style when moused over a symbol. Regardless of what you set this property to, mousing over any line --whether it be a data line or a mark line-- will display a "pointer" cursor. Even if the line is not selectable in any way (select mode is disabled, or it is just a mark line).

What does the proposed API look like?

series-line {
  line-cursor: 'pointer'
}

Alternatively, if select mode is disabled, show the default cursor instead of the pointer.

[helgasoft]

Lines are selectable on click, please see this code.

But you are right - cursor property works for line-symbols only. The cursor over the actual line remains type pointer.
However I would prefer the new feature to use the existing line-symbol cursor property for the actual line.
Having a separate line-cursor property would create confusion if users decide to make it different from line-symbol cursor.

[RizerKayseri]

hello，has the problem been solved？

[ptfw]

it is annoying that Line Series does not respect the Cursor setting.. I compensated for it with the following
assuming el is your chart DOM element, put this right after you call setOption()
NOTE: this will turn off all of the cursor changes on that chart element

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutationRecord) {
        if (mutationRecord.target.style['cursor'] !== 'default') {
            mutationRecord.target.style.setProperty('cursor', 'default');
          }
      });
});
observer.observe(el.firstChild, { attributes: true, attributeFilter: ['style'] });