Better position of data labels/markers

[xumix]

Is your feature request related to a problem? Please describe.
On line chart, when data text is long it may overlap with the chart line. Also long text gets truncated in the strt/end of the chart. See screenshots

Describe the solution you'd like
Maybe position the text above/beyond depending of curve?

[junedchhipa]

The truncating of the text definitely looks wrong as it gives wrong impressions.
Will look into it.

[xumix]

I suppose the text position can be calculated as
const position = (f(x-1) > f(x) || !f(x-1)) && (!f(x+1) || f(x+1) > f(x)) ? "beyond" : "above"

[xumix]

thanks!

[xumix]

Looks better, but still labels are trimmed :(

const opts = {
      chart: {
        type: "line",
        toolbar: {
          show: true
        },
        locales: [chartRussianLocale],
        defaultLocale: "ru"
      },
      grid: {
        padding: {
          right: 30,
          left: 30
        }
      },
      dataLabels: {
        enabled: true,
        formatter: v => `${U.formatDecimal(v)} руб.`
      },
      stroke: {
        curve: "smooth"
      },
      xaxis: {
        type: "datetime"
      },
      yaxis: {
        labels: {
          formatter: v => `${U.formatDecimal(v)} руб.`
        },
        // min max needed for fix https://github.com/apexcharts/apexcharts.js/issues/444#issuecomment-477621466
        min: min => min - 1,
        max: max => max + 1
      },
      markers: {
        size: 5
      },
      series: [
        {
          name: "",
          data: this.store.priceStatistic.map(stat => ({ x: moment(stat.date, "L").toISOString(), y: stat.value }))
        }
      ]
    };

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.