We need to display our charts in UTC, so will have to fork this adapter to do this. Would be useful if there was some way to supply a timezone param to be used in the create function. E.g.

function create(time) {
  return DateTime.fromMillis(time, { zone: config.zone });
}

I'm seeing the following npm warning when I attempt to update to today's release of luxon 3.0.1:

D:\GitHub\chart>npm install luxon@latest
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/luxon
npm WARN   peer luxon@"^1.0.0 || ^2.0.0" from [email protected]
npm WARN   node_modules/chartjs-adapter-luxon
npm WARN     chartjs-adapter-luxon@"^1.1.0" from the root project
npm WARN   1 more (the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer luxon@"^1.0.0 || ^2.0.0" from [email protected]
npm WARN node_modules/chartjs-adapter-luxon
npm WARN   chartjs-adapter-luxon@"^1.1.0" from the root project

changed 1 package, and audited 81 packages in 457ms

10 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

This may be related to:

https://github.com/chartjs/chartjs-adapter-luxon/blob/1b1c23073eb364bd5bd25de6161a19be44d5b5fc/package.json#L56

It appears that chartjs-adapter-luxon needs to be updated to accept the luxon 3.x series.

(Thanks again for your great work! I use it in the microsoft/STL Status Chart. :smile_cat:)

Hi! I'm trying to display the weekday but the result is unexpected.

I'm not sure if it's an error with this plugin, with Chartjs or I'm doing something wrong.

https://codesandbox.io/s/jovial-hermann-pnb72?file=/src/index.js

I expect to get the label monday, tuesday but I get monday, 29 nov, tuesday, 30 nov

import { Chart, registerables } from "chart.js";
import "chartjs-adapter-luxon";

Chart.register(...registerables);

const canvas = document.getElementById("chart");

const chart = new Chart(canvas, {
  type: "bar",
  data: {
    datasets: [
      {
        data: [
          { x: "1", y: 10 }, // monday
          { x: "2", y: 10 } // tuesday
        ]
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: "time",
        time: {
          unit: "day",
          parser: "E",
          displayFormats: {
            day: { weekday: "long" } // expected monday/tuesday
          }
        }
      }
    }
  }
});

Thanks!

Fix #71 Answer to comment https://github.com/chartjs/chartjs-adapter-luxon/issues/46#issuecomment-983796300

Missing

• [x] Release new CHART.JS version
• [x] Add test cases using chart locale.
• [x] Add doc in the README

Fixes #3

Passes through the adapter options to each of Luxon's factory methods (fromMillis(), fromFormat()`, etc.) so that they can be configured with a timezone and other parameters.

Also adds a basic testing setup.

When using a ChartJs Linear Axis I see a default tooltip with the dataset label name in it:

When using ChartJs (3.6.2 with Luxon 3.0 and chartjs-adapter-luxon 1.1.0) Time Cartesian Axis I see a default tooltip without the dataset label name in it:

Similar issue as described here, which contains a workaround and a fiddle example: https://stackoverflow.com/questions/68022814/does-the-chart-js-tooltip-not-work-with-logarithmic-or-the-cartesian-time-axis

I am suspecting the chartjs-adapter to influence this (because I also tried https://github.com/chartjs/chartjs-adapter-date-fns adapter, which does not even have the colour icon in the tooltip).

Without the dataset name it makes it hard to read the tooltip and relate it to the correct data. It would be very nice if the default could also show the dataset name.

I tried using callbacks myself to influence the behaviour, like instruct ChartJs to use something like: https://stackoverflow.com/questions/72374970/how-to-provide-different-labels-in-chart-js-for-toolbox-and-axis

                 label: function(context) {
                    let label = context.dataset.label + ": " + context.dataset.data[context.datasetIndex];
                    return label;
                 }

but I could not get it to work. So I cannot give you a more precise example.

I'm sorry if this has an obvious answer, I wanted to give this a shot with the recent update to support Chart.js 3.0.0-alpha (thanks!!) using chartjs-adapter-luxon v0.2.1.

I'm importing only at this point (commented out chart initialization to remove that variable)

import Chart from 'chart.js/dist/Chart.esm.js';
import 'luxon';
import 'chartjs-adapter-luxon';

and receiving

chartjs-adapter-luxon.js:16 Uncaught TypeError: Cannot read property 'DateTime' of undefined
    at chartjs-adapter-luxon.js:16
    at chartjs-adapter-luxon.js:10
    at chartjs-adapter-luxon.js:11

Am I missing an intermediate step?

Versions:

• Chart.js: 2.9.3
• Chart.js adapter luxon: 0.2.0
• Luxon: 1.22.0

When I try to use Luxon DateTime Objects in my Datasets Data, the chartjs-adapter-luxon parser has an error on line 57 when it tries to parse the incoming DateTime object. I do not know if I missed something on how to use this adapter, but as soon as I just remove line 57 for testing purposes, the DateTime objects work.

Should the parser not be invoked if the datasets already have DateTime Objects as dates? Or does the parser get invoked in any case and should be altered to just return an already working Luxon Object? Sorry if I missed something. Thank you!

This PR fixes an issue causing days that land on the isoweek day to round down to the previous week.

I've added a spec that fails with the previous code.

I got an error isoWeekday is not a function when I try to use the startOf method of the adapter.

https://github.com/chartjs/chartjs-adapter-luxon/blob/18d1a9b5cd4a441e135a80c7505d4fb3bf089be9/src/index.js#L75

Having a look to Luxon documentation, the isoWeekday(weekday) sounds to belong to Moment and not to Luxon.

The doc https://github.com/moment/luxon/blob/master/docs/moment.md#unit-getters

EDIT Chart.js version: dist/master Luxon adapter: 0.2.1 Luxon lib: 1.24.1

This isn't really a bug with this adapter, but it doesn't seem like this warrants an issue in the Chart.js main repo.

Because of the way Chart.js merges options, things like a luxon FixedOffsetZone get broken. I.e. if you pass a FixedOffsetZone object as the "zone" option to this adapter, Chart.js will convert it to an object like this: { fixed: -300 }. Luxon will then see that as an invalid zone.

One fix for this could be catching that edge case converting the zone from (e.g.) { fixed: -300 } to simply -300, which Luxon will handle properly.

Locally I've worked this out by adding:

/**
 * @private
 */
_normalizedOptions: function () {
    if (
        'object' === typeof this.options &&
        'zone' in this.options &&
        'object' === typeof this.options.zone &&
        'fixed' in this.options.zone &&
        'number' === typeof this.options.zone.fixed
    ) {
        const merged = Chart.helpers.merge({}, this.options);
        merged.zone = this.options.zone.fixed;
        return merged;
    }
    return this.options;
},

and replacing references to this.options with this._normalizedOptions() elsewhere.

If this is deemed not applicable to this repo, then I would suggest updating the documentation to indicate that only certain types of Zones are allowed.

I can make sure all types of Zones are supported and submit a PR if that's preferred.

Update: changed FixedOffset => FixedOffsetZone

After updating from ChartJS 3.7.1 to ChartJS 3.8, any charts that would use the Luxon adapter stopped working. It seems that ChartJS changed the way their modules are exported slightly and the patches that chartjs-adapter-luxon is making don't register any more, at least in my project.

Any charts that use datetimes don't display any more and the console shows this error message:

Uncaught (in promise) Error: This method is not implemented: Check that a complete date adapter is provided.
    at abstract (chart.esm.js:56:62367)
    at DateAdapter.formats (chart.esm.js:56:62543)
    at TimeScale.init (chart.esm.js:56:280572)
    at eval (chart.esm.js:56:148422)
    at each (helpers.segment.js:129:2545)
    at Chart.buildOrUpdateScales (chart.esm.js:56:147793)
    at Chart._updateScales (chart.esm.js:56:152142)
    at Chart.update (chart.esm.js:56:150911)
    at new Chart (chart.esm.js:56:145260)
    at ChartsPremadeAppVersionsComponent.render (app-versions.js:180:1)

My workaround for this right now has been to create a new helper file, chart-js.js, and doing the patching manually by copy/pasting the code from the adapter source. Then I can import the new Chart object from that helper file.

I realise this is probably very hacky, but I don't really have the experience to find out what the actual problem is.

Here's my new import:

import { Chart } from 'ui/utils/chart-js';

And here's my ui/utils/chart-js.js:

import { Chart, registerables, _adapters } from 'chart.js';

import { DateTime } from 'luxon';

const FORMATS = {
  datetime: DateTime.DATETIME_MED_WITH_SECONDS,
  millisecond: 'h:mm:ss.SSS a',
  second: DateTime.TIME_WITH_SECONDS,
  minute: DateTime.TIME_SIMPLE,
  hour: { hour: 'numeric' },
  day: { day: 'numeric', month: 'short' },
  week: 'DD',
  month: { month: 'short', year: 'numeric' },
  quarter: "'Q'q - yyyy",
  year: { year: 'numeric' },
};

_adapters._date.override({
  _id: 'luxon', // DEBUG

  /**
   * @private
   */
  _create: function (time) {
    return DateTime.fromMillis(time, this.options);
  },

  formats: function () {
    return FORMATS;
  },

  parse: function (value, format) {
    const options = this.options;

    if (value === null || typeof value === 'undefined') {
      return null;
    }

    const type = typeof value;
    if (type === 'number') {
      value = this._create(value);
    } else if (type === 'string') {
      if (typeof format === 'string') {
        value = DateTime.fromFormat(value, format, options);
      } else {
        value = DateTime.fromISO(value, options);
      }
    } else if (value instanceof Date) {
      value = DateTime.fromJSDate(value, options);
    } else if (type === 'object' && !(value instanceof DateTime)) {
      value = DateTime.fromObject(value);
    }

    return value.isValid ? value.valueOf() : null;
  },

  format: function (time, format) {
    const datetime = this._create(time);
    return typeof format === 'string'
      ? datetime.toFormat(format, this.options)
      : datetime.toLocaleString(format);
  },

  add: function (time, amount, unit) {
    const args = {};
    args[unit] = amount;
    return this._create(time).plus(args).valueOf();
  },

  diff: function (max, min, unit) {
    return this._create(max).diff(this._create(min)).as(unit).valueOf();
  },

  startOf: function (time, unit, weekday) {
    if (unit === 'isoWeek') {
      weekday = Math.trunc(Math.min(Math.max(0, weekday), 6));
      const dateTime = this._create(time);
      return dateTime
        .minus({ days: (dateTime.weekday - weekday + 7) % 7 })
        .startOf('day')
        .valueOf();
    }
    return unit ? this._create(time).startOf(unit).valueOf() : time;
  },

  endOf: function (time, unit) {
    return this._create(time).endOf(unit).valueOf();
  },
});

Chart.register(...registerables);

export { Chart };

Importing chartjs-adapter-luxon in a TypeScript module you get a complain about missing typings declaration.

I solved adding an chartjs-adapter.luxon.d.ts file with content

declare module "chartjs-adapter-luxon";

I do not know if it is the right solution, but for sure including an index.d.ts file in this package would save time to many other developers, in particular those that are starting with TypeScript.