Search code examples
reactjsapexcharts

apexcharts basic timeline with decimal numbers


I am using basic timeline chart of Apexcharts in React application, where the data contains decimal numbers (e.g: data = [{"x":"TaskData0link_Node0_Node1","y":[0.0,0.05]}]. However when I enter the bars with the mouse I can only see values that are rounded . In this case: 0-0. Is it somehow possible to display the real values (0-0.05)? And not round it to integer.

The options that I use:

options: {
            chart: {
                height: 350,
                type: 'rangeBar',
                toolbar: {
                    show: true,
                    autoSelected: 'selection'
                },
            },
            plotOptions: {
                bar: {
                    horizontal: true
                }
            },
            xaxis: {
                type: 'numeric',
                title: {
                    text: 'in ms'
                },
                labels: {
                    show: true
                },
                decimalInFloat: 3,

            },
        },

Thank you in advance!


Solution

  • Use this custom tooltip

    tooltip: {
      custom: ({ dataPointIndex, w }) => {
        let s = w.config.series[0].data[dataPointIndex];
        return `<div class="apexcharts-tooltip-rangebar"><div>
      <span class="category">${s.x}: </span>
      <span class="value start-value">${s.y[0]}</span>
      <span class="separator">-</span>
      <span class="value end-value">${s.y[1]}</span></div></div>`;
      }
    },