Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chart type rangeBar, xaxis - datetime, y - numeric (need show hours). Something wrong with tooltip for y values #515

Open
Orientir opened this issue Apr 19, 2024 · 0 comments

Comments

@Orientir
Copy link

I am using
"quasar": "^2.6.0",
"vue": "^3.0.0",
"vue3-apexcharts": "^1.4.4"

What I try to do:
Create chart for showing daily user activity. How much time he was online. On yaxix show time, on xaxis show date.

What I get:
Wrong tooltip info.
Expected range values: 6.20 - 7.30
Gotted range values: 6 - 7

https://i.imgur.com/bEMteJN.png
https://i.imgur.com/Kp5VeH5.png

My code:

<apexchart :options="chartOptions" :series="chartSeries" ref="login_chart"></apexchart>




chartOptions: {
        chart: {
          type: "rangeBar",
          id: 'login_chart'
        },
        plotOptions: {
          bar: {
            isDumbbell: true,
            dumbbellColors: [['#EC7D31', '#36BDCB']]
          },
        },
        xaxis: {
          type: 'category',
          labels: {
            format: 'dd MMM',
            datetimeFormatter: {
              year: 'yyyy',
              month: 'MMM \'yy',
              day: 'dd MMM'
            },
          }
        },

        tooltip: {
          theme: "dark",
          y: {
            formatter: function(value, data) {
              console.log(value, data)
              if (data) {
                let w = data.w;
                let seriesIndex = data.seriesIndex;
                let dataPointIndex = data.dataPointIndex;
                const start = parseFloat(w.globals.series[seriesIndex][dataPointIndex]);
                return start.toFixed(2);
              }
              return value
            }
          }
        },
        yaxis: {
          type: "numeric",
          forceNiceScale: true,
        }
}




updateLoginChart() {
      if (!this.workerHistory) {
        return;
      }
      this.loginLoading = true;
      const chartData = [];
      Object.keys(this.workerHistory).forEach((date) => {
        let d = new Date(date);
        d = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
        let short_data = {name: d, data: []};
        this.workerHistory[date].forEach((session) => {
          const dateKey = new Date(session.date);

          short_data.data.push({
            x: dateKey.toISOString().split('T')[0],
            y: [
              parseFloat(session.login),
              parseFloat(session.logout)
            ],
          });
        });
        chartData.push(short_data);
      });

      console.log(JSON.stringify(chartData))
      ApexCharts.exec('login_chart', 'updateSeries', chartData, true);
      this.loginLoading = false;
      this.$refs.login_chart?.updateSeries(chartData);
      console.log(this.$refs.login_chart)
      // this.$refs.login_chart?.render();
    }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant