Apexcharts.js: Discrete markers broken

[mrblur]

Codepen

https://codepen.io/mrblur/pen/zevOQO

Explanation

• What is the behavior you expect?
  Discrete markers should be configurable for specific point at X-axis
• What is happening instead?
• No marker at all if global marker size is 0. I want a solid linear graph with single marker pointing to a specific value, kind of a "you are here". Had to guess dependency on global markers and needed to make global markers "invisible" by specifing their size to 1 and putting same color as the graph itself. This workaround is working, however it does a lot of useless rendering - my graph is up to 3000 points, so a lot of markers which aren't visible.

1. Documentation says discrete marker color is specified with fill and stroke which isn't true. You need to specify fillColor and strokeColor. Again, had to guess, which was confusing AH together with point 1.

2. The worst part - it isn't possible to configure discrete marker for first point at all. dataPointIndex: 0 makes marker go away, like not configured. dataPointIndex: 1 makes marker rendered twice - for both first and second point in data series. Other values are working as expected.

3. Since addressing discrete markers with indexes is not working, tried addressing with categories - that does not work at all, you cannot specify an "x" value as dataPointIndex, and using indexes (which is misleading) is broken as described @ pt. 3.

• What error message are you getting?
  No errors, just doesn't work like expected :)

[junedchhipa]

Thanks for the detailed description.

I have fixed the bug where dataPointIndex wasn't working correctly.
Also, fixed the docs and renamed the properties.

For the time being, I suggest you use annotations.points - https://apexcharts.com/docs/options/annotations/#points feature to target specific points. This way, even if markers.size is set to 0, it will render normally.
Until I fix the issue of global marker.size: 0 not rendering discrete markers, you may try this solution.

Thanks!

[junedchhipa]

Released 3.2.0

[egurudutt]

Hi

I am using 3.6.5, but still discrete is not working as expected.

Can someone confirm with example ?

Thank you for help.

[junedchhipa]

In the current version, you need to set markers.size > 0 to see all markers (whether it is discrete or not)

So, markers code becomes

var options = {
  markers: {
    size: 5,
    discrete: [{
      seriesIndex: 0,
      dataPointIndex: 1,
      fillColor: "#0A0",
      strokeColor: "#FFF",
      size: 7
    }
    ]
  }
};

Update codepen - https://codepen.io/apexcharts/pen/PgPXYO

[egurudutt]

Thank you @junedchhipa :)
It worked :)
just created another issue with animation https://github.com/apexcharts/apexcharts.js/issues/477#issue-429124528