Setting xSort: false causes mouse tracking to not work properly

[eamodio]

Originally posted by @eamodio in #3088

I'm trying to get this chart below to track each date on the graph regardless of the Y position of the mouse. Is there any way to accomplish this?

[eamodio]

Here's an example -- if you change xSort: true then tracking will work.

// for ESM environment, need to import modules as:
// import bb, {line} from "billboard.js";

var chart = bb.generate({
  bindto: "#timeseriesChart",
  "data": {
    "x": "date",
    "xSort": false,
    "axes": { "activity": "y" },
    "columns": [
      [
        "date",
        1676696400000,
        1676610000000,
        1676523600000,
        1676437200000,
        1676350800000,
        1676264400000,
        1676178000000,
        1676091600000,
        1676005200000,
        1675918800000,
        1675832400000,
        1675746000000,
        1675659600000,
        1675573200000,
        1675486800000,
        1675400400000,
        1675314000000,
        1675227600000,
        1675141200000,
        1675054800000,
        1674968400000,
        1674882000000,
        1674795600000,
        1674709200000,
        1674622800000,
        1674536400000,
        1674450000000,
        1674363600000,
        1674277200000,
        1674190800000,
        1674104400000,
        1674018000000,
        1673931600000,
        1673845200000,
        1673758800000,
        1673672400000,
        1673586000000,
        1673499600000,
        1673413200000,
        1673326800000,
        1673240400000,
        1673154000000,
        1673067600000,
        1672981200000,
        1672894800000,
        1672808400000,
        1672722000000,
        1672635600000,
        1672549200000,
        1672462800000,
        1672376400000,
        1672290000000,
        1672203600000,
        1672117200000,
        1672030800000,
        1671944400000,
        1671858000000,
        1671771600000,
        1671685200000,
        1671598800000,
        1671512400000,
        1671426000000,
        1671339600000,
        1671253200000,
        1671166800000,
        1671080400000,
        1670994000000,
        1670907600000,
        1670821200000,
        1670734800000,
        1670648400000,
        1670562000000,
        1670475600000,
        1670389200000,
        1670302800000,
        1670216400000,
        1670130000000,
        1670043600000,
        1669957200000,
        1669870800000,
        1669784400000,
        1669698000000,
        1669611600000,
        1669525200000,
        1669438800000,
        1669352400000,
        1669266000000,
        1669179600000,
        1669093200000,
        1669006800000,
        1668920400000,
        1668834000000,
        1668747600000,
        1668661200000,
        1668574800000,
        1668488400000,
        1668402000000,
        1668315600000,
        1668229200000,
        1668142800000,
        1668056400000,
        1667970000000,
        1667883600000,
        1667797200000,
        1667707200000,
        1667620800000,
        1667534400000,
        1667448000000,
        1667361600000
      ],
      [
        "activity",
        1240,
        249,
        486,
        5823,
        421,
        1284,
        149,
        330,
        381,
        740,
        847,
        6655,
        2271,
        567,
        237,
        484,
        617,
        0,
        21,
        311,
        7460,
        5144,
        1177,
        257,
        1334,
        1868,
        0,
        0,
        26,
        3878,
        460,
        74,
        0,
        2545,
        1164,
        0,
        200,
        38,
        304,
        0,
        583,
        0,
        0,
        0,
        0,
        116,
        0,
        0,
        0,
        788,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        551,
        70,
        30,
        139,
        589,
        0,
        0,
        823,
        2459,
        26,
        1151,
        0,
        362,
        12,
        470,
        33,
        3,
        27,
        319,
        1663,
        0,
        2,
        0,
        156,
        11,
        36,
        0,
        0,
        0,
        0,
        0,
        0,
        210,
        0,
        0,
        30,
        486,
        476,
        674,
        175,
        0,
        604,
        55,
        1365,
        2034,
        467,
        110,
        1236,
        0,
        848,
        417,
        115
      ]
    ],
    "names": { "activity": "Activity" },
    "selection": { "enabled": true, "grouped": true, "multiple": false },
    "types": { "activity": "spline" }
  },
  "axis": {
    "x": { "show": true, "localtime": true, "type": "timeseries" },
    "y": { "min": 0, "max": 5569, "show": true, "padding": { "bottom": 8 } }
  },
  "clipPath": false,
  "grid": { "front": false, "focus": { "show": true } },
  "legend": { "show": false },
  "line": { "point": true, "zerobased": true },
  "point": {
    "show": true,
    "select": { "r": 5 },
    "focus": { "only": true, "expand": { "enabled": true, "r": 3 } },
    "sensitivity": 100
  },
  "resize": { "auto": true },
  "spline": { "interpolation": { "type": "monotone-x" } },
  "tooltip": { "grouped": true },
  "transition": { "duration": 0 },
  "zoom": { "enabled": true, "rescale": false, "type": "wheel" }
}
);

[eamodio]

@netil any chance a new release with this fix will be coming soon? 😄

[netil]

@eamodio released the patch

[eamodio]

@netil Thanks! I tried the new version, but it doesn't seem like xSort is being honored with timeseries (which was the case before). Though I was "hacking" around it by just inverting the whole SVG (using a transform css), which still reverses the graph, but for some reason the mouse tracking isn't getting inverted (like it used to).

Can xSort be honored with timeseries?

[netil]

@eamodio

"hacking" around it by just inverting the whole SVG (using a transform css), which still reverses the graph

The way when approaching in this way, can't guarantee the functionality. If approached in "hacking" way, all other behavior should be approached in that way also.

Internally, for handling event, there's eventReceiver object which contains event related coordinate values and its given data. In a reversed graph, you need also reverse those data. But isn't really recommended way.

Checkout the below example to get some ideas

• https://jsfiddle.net/netil/vyb6mzL3/

[eamodio]

@netil totally agree on the once "hacking" all bets are off (and thanks for the example I'll check that out).

But if xSort was honored for timerseries or if there was a way to inverse the timerseries order then no hacking would be needed.

Can xSort be honored with timeseries?

[netil]

To achieve your needs, new feature like "inverted" x axis is needed.
I'll be considering to implement, but it'll take time for the implementation.