You pretty much never want timeseries. See this quote:
The time series scale extends from the time scale and supports all the same options. However, for the time series scale, each data point is spread equidistant.
time is the expected/normal behavior.
I saw equidistant and figured that meant you wouldn't have any funky timeslices (i was very wrong).
time does seem to be nice and create consistent splits that land on time boundaries (on the second, minute, etc). I'm not sure if there is a way to clamp it to be multiples of 5 though, like limit it to 15 second chunks instead of 12s. It seems dependent on how much screen space your chart has.
Edit: It looks like you can define custom split size, but I don't see how to do that per unit in the time axis. I'm guessing some javascript to set the split size based in which unit the chart is currently set to, maybe on the onZoom callback?
Edit: I lied, time seems to do pretty good on splits until you are in the sub-second range, then it seems to give up and do splits like 2.202s. It's probably a configuration issue on my side.
For context I'm trying to get as close as possible to whatever tool was shown in this post:
I guess it could be useful for an SPC type chart, where the samples have a timestamp but the order is most important? I've haven't had a use-case for it yet.
Try setting
// options.scales.x.time
{
"minUnit": "second",
"round": "second"
}
A couple other tips and tricks:
options.scales.x.ticks.maxRotation: 0 to stop the ticks from rotating. I find most people prefer to have un-rotated ticks.options.plugins.tooltip.intersec: false makes the tooltip appear even when you aren't directly over a point. This is useful when zooming in and out.Doesn't seemed to have worked, still get funky millisecond values. Not an issue for most of our stuff since we log at 1s or slower, but we do have a few devices that are running at 300ms.
I'm also noticing a slight squeezing/widening of the tick spans on the screen (not the actual time span, just visual) based on how close a tick is to the leading edge of the graph.
Got a dataset you can share?
They seem funky to me but I guess they kind of make sense ( chunks of 1515, 2020, 3030).
I don't have a dataset I can share at the moment since I'm testing with copies of live data, ~4200 rows/ 16 columns. I'll see if I can get an example dataset put together.
Edit: Looks like I can't post a large example set unless I post a txt file. Let me know if you need more points for testing.
"#NAMES"
"t_stamp","A","B","C","D","E","F","G","H","I","J","K","L","M","N","L"
"#TYPES"
"date","D","D","D","D","D","D","D","D","D","D","D","D","D","D","D"
"#ROWS","50"
"2025-02-07 13:17:41.890","0.5406725180488317","59.60198974609375","59.35935974121094","0.0017605127662208364","0.34521152408671746","0.30071743947829954","0.007671653293073177","0.2701018750667572","0.11160793900489807","-0.016225064351514943","0.02587288270964363","-0.03836623015374631","-0.01521417094184305","-0.028666030566653965","-0.020440117539991396"
"2025-02-07 13:17:41.890","0.5406725180488317","59.60198974609375","59.35935974121094","0.0017605127662208364","0.34521152408671746","0.30071743947829954","0.023014958947896957","0.32522469758987427","0.11160793900489807","-0.016225064351514943","0.02587288270964363","-0.03836623015374631","-0.01521417094184305","-0.028666030566653965","-0.020440117539991396"
"2025-02-07 13:17:46.890","0.5404253005981445","59.60198974609375","59.35935974121094","0.0018320883411215058","0.34500840306282043","0.30056509375572205","0.007671653293073177","0.3009655650622356","0.11160793900489807","-0.01618180237710476","0.02593045122921467","-0.03830844924970101","-0.015159868341062761","-0.02861529029905796","-0.020393826067447662"
"2025-02-07 13:17:51.890","0.5400453647358678","59.60198974609375","59.35935974121094","0.001903663916022175","0.3448049567382398","0.30046336066825247","0.015343306586146355","0.30317556858062744","0.11153133057351","-0.016084593013546495","0.02593045122921467","-0.03825066834565572","-0.015105565740282472","-0.02861529029905796","-0.020309699355547054"
"2025-02-07 13:17:51.890","0.5400453647358678","59.60198974609375","59.35935974121094","0.001903663916022175","0.3448049567382398","0.30046336066825247","0.015343306586146355","0.2811264097690582","0.11153133057351","-0.016084593013546495","0.02593045122921467","-0.03825066834565572","-0.015105565740282472","-0.02861529029905796","-0.020309699355547054"
"2025-02-07 13:17:56.890","0.539854884147644","59.60198974609375","59.35935974121094","0.001975239490922844","0.34470295906066895","0.3004123568534851","0.014392087116371619","0.2701018750667572","0.11147261410951614","-0.016010086983442307","0.02593045122921467","-0.03819288744161043","-0.015051263139502185","-0.02861529029905796","-0.020245220512151718"
"2025-02-07 13:17:56.890","0.539854884147644","59.60198974609375","59.35935974121094","0.001975239490922844","0.34470295906066895","0.3004123568534851","0.014392087116371619","0.33349311351776123","0.11147261410951614","-0.016010086983442307","0.02593045122921467","-0.03819288744161043","-0.015051263139502185","-0.02861529029905796","-0.020245220512151718"
"2025-02-07 13:18:01.890","0.5393463269151334","59.60198974609375","59.35935974121094","0.0020468150658235137","0.3443984506133789","0.300209357824197","0.013741902926505088","0.2701018750667572","0.11147261410951614","-0.016089171086564935","0.025998522476834828","-0.03813510653756513","-0.014996960538721897","-0.0285278006242444","-0.020245220512151718"
"2025-02-07 13:18:01.890","0.5393463269151334","59.60198974609375","59.35935974121094","0.0020468150658235137","0.3443984506133789","0.300209357824197","0.013741902926505088","0.3059317171573639","0.11147261410951614","-0.016089171086564935","0.025998522476834828","-0.03813510653756513","-0.014996960538721897","-0.0285278006242444","-0.020245220512151718"
"2025-02-07 13:18:06.890","0.5390896797180176","59.60198974609375","59.35935974121094","0.0020948995370417833","0.3442447781562805","0.3001069128513336","0.013091718736638556","0.2701018750667572","0.11147261410951614","-0.01615014486014843","0.026051005348563194","-0.03807732563351984","-0.014942657937941608","-0.028460346162319183","-0.020245220512151718"
"2025-02-07 13:18:06.890","0.5390896797180176","59.60198974609375","59.35935974121094","0.0020948995370417833","0.3442447781562805","0.3001069128513336","0.013091718736638556","0.23978430032730103","0.11147261410951614","-0.01615014486014843","0.026051005348563194","-0.03807732563351984","-0.014942657937941608","-0.028460346162319183","-0.020245220512151718"
"2025-02-07 13:18:11.890","0.5386765354190962","59.60198974609375","59.35935974121094","0.002142530329201484","0.34383971574076544","0.3000056423074283","0.012441534546772024","0.2949071228504181","0.11141306858735915","-0.01607867701800344","0.026051005348563194","-0.03801954472947455","-0.014888355337161319","-0.028318124747397706","-0.02012534177871034"
"2025-02-07 13:18:11.890","0.5386765354190962","59.60198974609375","59.35935974121094","0.002142530329201484","0.34383971574076544","0.3000056423074283","0.012441534546772024","0.2645895779132843","0.11141306858735915","-0.01607867701800344","0.026051005348563194","-0.03801954472947455","-0.014888355337161319","-0.028318124747397706","-0.02012534177871034"
"2025-02-07 13:18:16.890","0.5384665727615356","59.60198974609375","59.35935974121094","0.0021783914887856587","0.34363386034965515","0.2999541759490967","0.011791350356905494","0.29766327142715454","0.111366868019104","-0.01602322608232498","0.026051005348563194","-0.03796176382542926","-0.014834052736381031","-0.028207777068018913","-0.020032329484820366"
"2025-02-07 13:18:16.890","0.5384665727615356","59.50248718261719","59.35935974121094","0.0021783914887856587","0.34363386034965515","0.2999541759490967","0.011791350356905494","0.23978430032730103","0.111366868019104","-0.01602322608232498","0.026051005348563194","-0.03796176382542926","-0.014834052736381031","-0.028207777068018913","-0.020032329484820366"
"2025-02-07 13:18:21.890","0.5380355967113017","59.54390799892993","59.35935974121094","0.002214252648369833","0.3435328842018336","0.2998532195039381","0.011141166167038962","0.29766327142715454","0.11130231935313428","-0.016016855680523797","0.02610775251984269","-0.037903982921383965","-0.014779750135600742","-0.028197555573300833","-0.0199586611297608"
"2025-02-07 13:18:21.890","0.5380355967113017","59.54390799892993","59.35935974121094","0.002214252648369833","0.3435328842018336","0.2998532195039381","0.011141166167038962","0.23702816665172577","0.11130231935313428","-0.016016855680523797","0.02610775251984269","-0.037903982921383965","-0.014779750135600742","-0.028197555573300833","-0.0199586611297608"
"2025-02-07 13:18:26.890","0.5378146767616272","59.58314712010532","59.35935974121094","0.0022501138079540077","0.3434811234474182","0.29980146884918213","0.01049098197717243","0.24805273115634918","0.11125185340642929","-0.016011875122785568","0.026152119040489197","-0.037846202017338675","-0.014725447534820454","-0.028189564123749733","-0.019901065155863762"
"2025-02-07 13:18:26.890","0.5378146767616272","59.58314712010532","59.35935974121094","0.0022501138079540077","0.3434811234474182","0.29980146884918213","0.01049098197717243","0.29215100407600403","0.11125185340642929","-0.016011875122785568","0.026152119040489197","-0.037846202017338675","-0.014725447534820454","-0.028189564123749733","-0.019901065155863762"
"2025-02-07 13:18:31.890","0.5373748563201018","59.60198974609375","59.35935974121094","0.002285974967538182","0.343279670117726","0.29949927902669327","0.0098407977873059","0.28663870692253113","0.11118549565628948","-0.01598798208063666","0.02623279427353234","-0.03779532015323639","-0.014671144934040165","-0.028115064855452922","-0.019901065155863762"
"2025-02-07 13:18:31.890","0.5373748563201018","59.60198974609375","59.35935974121094","0.002285974967538182","0.343279670117726","0.29949927902669327","0.0098407977873059","0.24254044890403748","0.11118549565628948","-0.01598798208063666","0.02623279427353234","-0.03779532015323639","-0.014671144934040165","-0.028115064855452922","-0.019901065155863762"
"2025-02-07 13:18:36.890","0.5371478199958801","59.60198974609375","59.35935974121094","0.0023218361271223568","0.3431756794452667","0.2993432879447937","0.009190613597439369","0.32522469758987427","0.11113325506448746","-0.0159691721200943","0.026296306401491165","-0.037743318967532025","-0.014616842333259878","-0.028056414797902107","-0.019901065155863762"
"2025-02-07 13:18:36.890","0.5371478199958801","59.60198974609375","59.35935974121094","0.0023218361271223568","0.3431756794452667","0.2993432879447937","0.009190613597439369","0.23978430032730103","0.11113325506448746","-0.0159691721200943","0.026296306401491165","-0.037743318967532025","-0.014616842333259878","-0.028056414797902107","-0.019901065155863762"
"2025-02-07 13:18:41.890","0.536633520285844","59.60198974609375","59.35935974121094","0.002357697286706531","0.3431756794452667","0.299242769829702","0.008540429407572837","0.26734569668769836","0.11107573893536822","-0.015906676914518737","0.026296306401491165","-0.03769686445109075","-0.014562539732479588","-0.027996937182922097","-0.019836654201246653"
"2025-02-07 13:18:41.890","0.536633520285844","59.50248718261719","59.35935974121094","0.002357697286706531","0.3431756794452667","0.299242769829702","0.008540429407572837","0.26734569668769836","0.11107573893536822","-0.015906676914518737","0.026296306401491165","-0.03769686445109075","-0.014562539732479588","-0.027996937182922097","-0.019836654201246653"
"2025-02-07 13:18:46.890","0.53636634349823","59.60198974609375","59.35935974121094","0.002393558446290706","0.3431756794452667","0.29919055104255676","0.007890245217706305","0.30868783593177795","0.11103019118309021","-0.015857186168432236","0.026296306401491165","-0.03765040993464948","-0.014508237131699301","-0.02794983610510826","-0.019785646349191666"
"2025-02-07 13:18:46.890","0.53636634349823","59.60198974609375","59.35935974121094","0.002393558446290706","0.3431756794452667","0.29919055104255676","0.007890245217706305","0.24254044890403748","0.11103019118309021","-0.015857186168432236","0.026296306401491165","-0.03765040993464948","-0.014508237131699301","-0.02794983610510826","-0.019785646349191666"
"2025-02-07 13:18:51.890","0.535900849334935","59.50248718261719","59.35935974121094","0.00242941960587488","0.3422751122556907","0.29879029244971345","0.007671653293073177","0.2811264097690582","0.11096166765516446","-0.015857186168432236","0.02636143085459106","-0.037603955418208206","-0.014453934530919012","-0.02788053366563538","-0.019725703261217368"
"2025-02-07 13:18:51.890","0.535900849334935","59.50248718261719","59.35935974121094","0.00242941960587488","0.3422751122556907","0.29879029244971345","0.007671653293073177","0.23978430032730103","0.11096166765516446","-0.015857186168432236","0.02636143085459106","-0.037603955418208206","-0.014453934530919012","-0.02788053366563538","-0.019725703261217368"
"2025-02-07 13:18:56.890","0.5356558561325073","59.60198974609375","59.35935974121094","0.002465280765459055","0.34180113673210144","0.2985796332359314","0.009154298983515174","0.29215100407600403","0.11090680211782455","-0.015857186168432236","0.026413574814796448","-0.037557500901766926","-0.014399631930138723","-0.027825044468045235","-0.01967770792543888"
"2025-02-07 13:18:56.890","0.5356558561325073","59.50248718261719","59.35935974121094","0.002465280765459055","0.34180113673210144","0.2985796332359314","0.009154298983515174","0.23702816665172577","0.11090680211782455","-0.015857186168432236","0.026413574814796448","-0.037557500901766926","-0.014399631930138723","-0.027825044468045235","-0.01967770792543888"
"2025-02-07 13:19:01.890","0.5352667242827419","59.547807836119404","59.35935974121094","0.002501141925043229","0.34180113673210144","0.2985796332359314","0.010045419124422734","0.2838825583457947","0.11083261851244022","-0.015796071850042483","0.026413574814796448","-0.03751104638532565","-0.014345329329358435","-0.027742150408495748","-0.019621477848704598"
"2025-02-07 13:19:06.890","0.5350601077079773","59.58403537688856","59.35935974121094","0.00252604391425848","0.34180113673210144","0.2985796332359314","0.010936539265330293","0.22600358724594116","0.11077267676591873","-0.015746690332889557","0.026413574814796448","-0.03746459186888438","-0.014296739362180233","-0.027675170451402664","-0.019576042890548706"
"2025-02-07 13:19:06.890","0.5350601077079773","59.58403537688856","59.35935974121094","0.00252604391425848","0.34180113673210144","0.2985796332359314","0.010936539265330293","0.2811264097690582","0.11077267676591873","-0.015746690332889557","0.026413574814796448","-0.03746459186888438","-0.014296739362180233","-0.027675170451402664","-0.019576042890548706"
"2025-02-07 13:19:11.890","0.5345779791955025","59.60198974609375","59.35935974121094","0.002502635127449201","0.34170157896237785","0.2983804982667868","0.011827659406237853","0.3059317171573639","0.11077267676591873","-0.015746690332889557","0.02646937461332354","-0.03741813735244311","-0.014250755929609542","-0.027597568620397746","-0.01951399617083873"
"2025-02-07 13:19:11.890","0.5345779791955025","59.60198974609375","59.35935974121094","0.002502635127449201","0.34170157896237785","0.2983804982667868","0.011827659406237853","0.23151589930057526","0.11077267676591873","-0.015746690332889557","0.02646937461332354","-0.03741813735244311","-0.014250755929609542","-0.027597568620397746","-0.01951399617083873"
"2025-02-07 13:19:16.890","0.534320592880249","59.60198974609375","59.35935974121094","0.0024847056032386624","0.3416484296321869","0.2982741892337799","0.012718779547145412","0.2949071228504181","0.11077267676591873","-0.015746690332889557","0.026514682918787003","-0.03737168283600183","-0.014209149494058791","-0.02753455750644207","-0.019463615491986275"
"2025-02-07 13:19:16.890","0.534320592880249","59.60198974609375","59.35935974121094","0.0024847056032386624","0.3416484296321869","0.2982741892337799","0.012718779547145412","0.2701018750667572","0.11077267676591873","-0.015746690332889557","0.026514682918787003","-0.03737168283600183","-0.014209149494058791","-0.02753455750644207","-0.019463615491986275"
"2025-02-07 13:19:21.890","0.5339609256625437","59.60198974609375","59.35935974121094","0.002466776079028124","0.34144971107077116","0.29837355820902195","0.01360989968805297","0.24254044890403748","0.11077267676591873","-0.015690792537407232","0.02658138270611704","-0.037325228319560554","-0.01416754305850804","-0.027473581728841852","-0.019400076112751418"
"2025-02-07 13:19:21.890","0.5339609256625437","59.60198974609375","59.35935974121094","0.002466776079028124","0.34144971107077116","0.29837355820902195","0.01360989968805297","0.2838825583457947","0.11077267676591873","-0.015690792537407232","0.02658138270611704","-0.037325228319560554","-0.01416754305850804","-0.027473581728841852","-0.019400076112751418"
"2025-02-07 13:19:26.890","0.5337677597999573","59.60198974609375","59.35935974121094","0.0024488465548175857","0.3413429856300354","0.29842692613601685","0.014501019828960529","0.23978430032730103","0.11077267676591873","-0.015645155683159828","0.02663583867251873","-0.03727877380311928","-0.014125936622957287","-0.02742379903793335","-0.019348200410604477"
"2025-02-07 13:19:26.890","0.5337677597999573","59.60198974609375","59.35935974121094","0.0024488465548175857","0.3413429856300354","0.29842692613601685","0.014501019828960529","0.29215100407600403","0.11077267676591873","-0.015645155683159828","0.02663583867251873","-0.03727877380311928","-0.014125936622957287","-0.02742379903793335","-0.019348200410604477"
"2025-02-07 13:19:31.890","0.5332515194012334","59.60198974609375","59.35935974121094","0.002430917030607047","0.3408473267579993","0.29793128660752083","0.015343306586146355","0.26734569668769836","0.11070952904905847","-0.01553709713906734","0.02663583867251873","-0.03723231928667801","-0.014084330187406536","-0.027358557783621465","-0.019291559330416035"
"2025-02-07 13:19:31.890","0.5332515194012334","59.60198974609375","59.35935974121094","0.002430917030607047","0.3408473267579993","0.29793128660752083","0.015343306586146355","0.25632116198539734","0.11070952904905847","-0.01553709713906734","0.02663583867251873","-0.03723231928667801","-0.014084330187406536","-0.027358557783621465","-0.019291559330416035"
"2025-02-07 13:19:36.890","0.5329723954200745","59.60198974609375","59.35935974121094","0.0024129875063965086","0.3405793309211731","0.29766330122947693","0.023014958947896957","0.2756141424179077","0.11065766960382462","-0.015448355115950108","0.02663583867251873","-0.037185864770236735","-0.014042723751855784","-0.027304979041218758","-0.019245043396949768"
"2025-02-07 13:19:36.890","0.5329723954200745","59.60198974609375","59.35935974121094","0.0024129875063965086","0.3405793309211731","0.29766330122947693","0.0","0.23427201807498932","0.11065766960382462","-0.015448355115950108","0.02663583867251873","-0.037185864770236735","-0.014042723751855784","-0.027304979041218758","-0.019245043396949768"
"2025-02-07 13:19:41.890","0.5324843214518988","59.60198974609375","59.35935974121094","0.00239505798218597","0.3404807930562034","0.29746618703823186","0.010556527696140076","0.300419420003891","0.11059655389739155","-0.015487786210367702","0.02669884163229166","-0.037139410253795455","-0.014001117316305033","-0.02724829030061685","-0.01917766530221285"
"2025-02-07 13:19:41.890","0.5324843214518988","59.60198974609375","59.35935974121094","0.00239505798218597","0.3404807930562034","0.29746618703823186","0.010556527696140076","0.24805273115634918","0.11059655389739155","-0.015487786210367702","0.02669884163229166","-0.037139410253795455","-0.014001117316305033","-0.02724829030061685","-0.01917766530221285"
"2025-02-07 13:19:46.890","0.5322160124778748","59.60198974609375","59.35935974121094","0.0023771284579754315","0.34042662382125854","0.29735782742500305","0.01329308091475789","0.28663870692253113","0.11054565757513046","-0.01552062388509512","0.026751309633255005","-0.03709295573735418","-0.013959510880754282","-0.027201080694794655","-0.019121553748846054"
"2025-02-07 13:19:46.890","0.5322160124778748","59.60198974609375","59.35935974121094","0.0023771284579754315","0.34042662382125854","0.29735782742500305","0.01329308091475789","0.23151589930057526","0.11054565757513046","-0.01552062388509512","0.026751309633255005","-0.03709295573735418","-0.013959510880754282","-0.027201080694794655","-0.019121553748846054"
"2025-02-07 13:19:51.890","0.5317382915492445","59.60198974609375","59.35935974121094","0.002359198933764893","0.340033969398003","0.2972596781852957","0.015343306586146355","0.23702816665172577","0.11054565757513046","-0.015454175806129036","0.026751309633255005","-0.03704650122091291","-0.01391790444520353","-0.027130764042514865","-0.01905047894919619"
"2025-02-07 13:22:11.890","0.5218522712478196","59.55802261504929","59.35935974121094","0.0022399607536659726","0.3348914693102809","0.29390300296965727","0.012484074305978015","0.25080886483192444","0.10953294485807419","-0.01478240080177784","0.027731922447040022","-0.03574577476055722","-0.012752924249782485","-0.025474591180682182","-0.01779725087973445"
I then process it into the format expected by the chart ,t_stamp value and column value for that t_stamp, 1 dataset configuration in the chart per column.
I looked at my data source (a binding to tag history), and all the timestamps have 890 for the millisecond value. I'm fetching as periodic instead of asStored so that might be part of my issue. This is returning a lot of duplicate rows as well.
I see the problem.
Check this demo out, this person seems to have solved the issue.
https://jkmnt.github.io/chartjs-scale-timestack/
I'll evaluate this scale for inclusion in the module.
Those datetimes are pretty nice on the timescale. Very simple, readable, and show everything you need to know i.e. not just :34 
(still unsure how the power chart got through QA to be honest 
)
Very nice times at each zoom level as well!!
I realized after posting my example images earlier I forgot to include the day of the month in the format. Still more info than :34
Hmm, I think i've got what you've got in your props, but I don't seem to be able to click and drag the axis. anything else I need to do?
I've literally just dragged on a line chart.js component and added the events and plugins that you have (I added only the rectangled event first before adding the rest)
[
{
"type": "embr.chart.chart-js",
"version": 0,
"props": {
"data": {
"datasets": [
{
"data": [
{
"x": 0,
"y": 20.790464349448122
},
{
"x": 1,
"y": 27.541905413990484
},
{
"x": 2,
"y": 9.044548907913263
},
{
"x": 3,
"y": 63.58544584440057
},
{
"x": 4,
"y": 40.57122042169531
},
{
"x": 5,
"y": 46.17945691520222
},
{
"x": 6,
"y": 5.272367698783542
},
{
"x": 7,
"y": 78.62029735550435
},
{
"x": 8,
"y": 1.384758302338518
},
{
"x": 9,
"y": 8.094105544748587
},
{
"x": 10,
"y": 93.29711393437752
},
{
"x": 11,
"y": 78.54999817500953
},
{
"x": 12,
"y": 30.022085778849018
},
{
"x": 13,
"y": 68.38927062938775
},
{
"x": 14,
"y": 93.84973459203651
},
{
"x": 15,
"y": 85.15266831524416
},
{
"x": 16,
"y": 3.3272574045278946
},
{
"x": 17,
"y": 3.4738230710669837
},
{
"x": 18,
"y": 76.78237778113568
},
{
"x": 19,
"y": 76.13468451530511
},
{
"x": 20,
"y": 88.63284915490885
},
{
"x": 21,
"y": 92.74877419440537
},
{
"x": 22,
"y": 94.12886888152015
},
{
"x": 23,
"y": 97.06398992204936
},
{
"x": 24,
"y": 46.71625167184086
},
{
"x": 25,
"y": 13.224799335767212
},
{
"x": 26,
"y": 35.052260048430696
},
{
"x": 27,
"y": 29.46821488097423
},
{
"x": 28,
"y": 90.27395392440542
},
{
"x": 29,
"y": 7.832816289114186
},
{
"x": 30,
"y": 15.799390058813623
},
{
"x": 31,
"y": 80.66585380750348
},
{
"x": 32,
"y": 4.629220116475031
},
{
"x": 33,
"y": 24.00958904699422
},
{
"x": 34,
"y": 8.133906226255029
},
{
"x": 35,
"y": 81.93116748921958
},
{
"x": 36,
"y": 82.82333811028309
},
{
"x": 37,
"y": 95.37635776015469
},
{
"x": 38,
"y": 74.00252644137744
},
{
"x": 39,
"y": 27.90694570663671
},
{
"x": 40,
"y": 30.569029278167793
},
{
"x": 41,
"y": 11.104072480586257
},
{
"x": 42,
"y": 68.15581447149303
},
{
"x": 43,
"y": 27.051454957054943
},
{
"x": 44,
"y": 48.477001171626725
},
{
"x": 45,
"y": 73.62917163080661
},
{
"x": 46,
"y": 7.528701180738118
},
{
"x": 47,
"y": 21.794180888547032
},
{
"x": 48,
"y": 17.0019331614802
},
{
"x": 49,
"y": 80.4420964468141
}
],
"label": "Dataset 1"
},
{
"data": [
{
"x": 25,
"y": 99.00283352088223
},
{
"x": 26,
"y": 36.743648170189644
},
{
"x": 27,
"y": 33.58269158236888
},
{
"x": 28,
"y": 70.52608530981715
},
{
"x": 29,
"y": 78.48664561425423
},
{
"x": 30,
"y": 99.80258881269653
},
{
"x": 31,
"y": 23.56577175483505
},
{
"x": 32,
"y": 27.6260054014127
},
{
"x": 33,
"y": 11.84780583914382
},
{
"x": 34,
"y": 78.95435294680595
},
{
"x": 35,
"y": 89.0983947949238
},
{
"x": 36,
"y": 87.63589420154018
},
{
"x": 37,
"y": 82.4714423791225
},
{
"x": 38,
"y": 46.29407127415893
},
{
"x": 39,
"y": 12.463880984334686
},
{
"x": 40,
"y": 91.82293604614682
},
{
"x": 41,
"y": 9.645637547490315
},
{
"x": 42,
"y": 23.87358763050218
},
{
"x": 43,
"y": 64.35308758482624
},
{
"x": 44,
"y": 61.30614039090162
},
{
"x": 45,
"y": 60.123113026673906
},
{
"x": 46,
"y": 11.262924017594045
},
{
"x": 47,
"y": 36.72684549715057
},
{
"x": 48,
"y": 19.144808134626057
},
{
"x": 49,
"y": 11.499648689135334
},
{
"x": 50,
"y": 48.862954644422615
},
{
"x": 51,
"y": 44.0188922198424
},
{
"x": 52,
"y": 1.4731641405698048
},
{
"x": 53,
"y": 76.62654204425371
},
{
"x": 54,
"y": 97.09498548555429
},
{
"x": 55,
"y": 68.88623969428103
},
{
"x": 56,
"y": 9.347347267187478
},
{
"x": 57,
"y": 27.59945299037486
},
{
"x": 58,
"y": 38.62680310622668
},
{
"x": 59,
"y": 64.48467246665813
},
{
"x": 60,
"y": 99.50148874944306
},
{
"x": 61,
"y": 59.35003045509352
},
{
"x": 62,
"y": 7.407803152895475
},
{
"x": 63,
"y": 62.077958133975066
},
{
"x": 64,
"y": 19.550924069869623
},
{
"x": 65,
"y": 59.290461562229346
},
{
"x": 66,
"y": 15.46272365498117
},
{
"x": 67,
"y": 27.411246578970218
},
{
"x": 68,
"y": 59.515203740704415
},
{
"x": 69,
"y": 76.39871363134311
},
{
"x": 70,
"y": 20.255435491968
},
{
"x": 71,
"y": 57.26165130029921
},
{
"x": 72,
"y": 73.41996375745644
},
{
"x": 73,
"y": 68.57751118650746
},
{
"x": 74,
"y": 25.40840081665815
}
],
"label": "Dataset 2"
}
]
},
"options": {
"plugins": {
"zoom": {
"pan": {
"modifierKey": null
}
}
},
"scales": {
"x": {
"type": "linear"
},
"y": {
"type": "linear"
}
}
},
"events": [
"mousemove",
"mouseout",
"click",
"touchstart",
"touchmove",
"mousedown"
],
"plugins": [
{
"afterEvent": "(chart, event) => {\n if (event.event.type !== 'mousedown') return\n\n const { x: clickX, y: clickY } = event.event\n const { y: scale } = chart.scales\n\n const onScale = clickX < scale.right && clickY > scale.left\n console.log(onScale)\n if (!onScale) return\n\n let isDragging = true\n const { min: startMin, max: startMax, height: scaleHeight } = scale\n\n const onMouseMove = (moveEvent) => {\n if (!isDragging) return\n\n console.log('onMouseMove')\n const deltaY = moveEvent.clientY - clickY\n const percentChange = (deltaY / scaleHeight) * (startMax - startMin)\n const delta = (percentChange * (startMax - startMin)) / 100\n\n chart.options.scales.y.min = startMin\n chart.options.scales.y.max = startMax + delta\n chart.update()\n }\n\n const onMouseUp = () => {\n console.log('onMouseUp')\n isDragging = false\n document.removeEventListener('mousemove', onMouseMove)\n document.removeEventListener('mouseup', onMouseUp)\n }\n\n document.addEventListener('mousemove', onMouseMove)\n document.addEventListener('mouseup', onMouseUp)\n\n console.log(chart, event)\n}",
"events": [
"mousedown"
],
"id": "draggableScales"
}
]
},
"meta": {
"name": "Chartjs"
},
"position": {
"grow": 1,
"basis": "300px"
},
"custom": {}
}
]
Edit: the event type is always a mousemove, I haven't seen any mousedown event types
So in my test case (1 x-axis, 5 y-axis, pan and zoom locked to x), this fails when the x-axis type is changed to time. I get an NPE (which I have posted in the module thread).
Inspecting the result returned by context.chart.getZoomedScaleBounds()shows that all axis other than x are undefined. I'm guessing trying to write that to a perspective property is making it unhappy.
I got around it by drilling down to the x axis, since that's all I care about in this case.
(context) => {
const bounds = context.chart.getZoomedScaleBounds()
this.store.custom.write('bounds.x', bounds.x)
}
There's a subtle difference in your screenshot, events should be under options. We need to tell the chart to actually listen for mousedown events.
Also I'm not 100% sure what the plugins[0].events property does, it doesn't seem to affect anything but it seemed correct to specify it. It might be used for other lifecycle hooks 
Yeah, it seems like getZoomedScaleBounds() only returns the scales that have been zoomed. If you allow for panning and zooming on both axes then you'll have data for both x and y (and presumably y2 and y3 as well).
Yup that's exactly it, you can't write undefined to a property. This is a good place to use JavaScript's ?? coalescing operator.
Yep you were right, I had the events defined in the wrong spot, oops! Thanks.
I noticed that when you got to large numbers for the range and then went back down again, it went negative. I asked Claude to fix it (I've gotten so lazy now with AI...) and it behaves now and seems to be smoother (something about setting update to "none"?)
However now when you first click and drag, the range changes a bit initially 
(chart, event) => {
const { x: clickX, y: clickY } = event.event
const { y: scale } = chart.scales
if (!(clickX < scale.right && clickY > scale.left)) {
document.body.style.cursor = "default"
return
}
document.body.style.cursor = "ns-resize"
if (event.event.type !== 'mousedown') return
let isDragging = true
const { min: startMin, max: startMax } = scale
const range = startMax - startMin
const sensitivity = 0.005 // Adjust this value to control scaling sensitivity
const onMouseMove = (moveEvent) => {
if (!isDragging) return
moveEvent.preventDefault()
const deltaY = moveEvent.clientY - clickY
const scaleFactor = Math.exp(-deltaY * sensitivity)
const newMin = startMin
const newMax = startMin + (range * scaleFactor)
chart.options.scales.y.min = newMin
chart.options.scales.y.max = newMax
chart.update('none') // Use 'none' for better performance
}
const onMouseUp = () => {
isDragging = false
document.body.style.cursor = "default"
document.removeEventListener('mousemove', onMouseMove)
document.removeEventListener('mouseup', onMouseUp)
}
document.addEventListener('mousemove', onMouseMove)
document.addEventListener('mouseup', onMouseUp)
}
The chart itself seems super customisable though which is really cool. Looking foward to getting my teeth into it some more
Yeah my first example didn't track the mouse very well.
Here's a version that should be exactly 1-to-1 by using some Chart.js scale helpers (getPixelForValue and getValueForPixel). You'll have to add the mouse cursor stuff back in (or have Claude do it for you 
)
(chart, event) => {
if (event.event.type !== 'mousedown') return
const { x: clickX, y: clickY } = event.event
const scale = chart.scales.y
if (clickX > scale.right || clickX < scale.left) return
let isDragging = true
const startMax = scale.max
const startPixel = scale.getPixelForValue(startMax)
const onMouseMove = (moveEvent) => {
if (!isDragging) return
const deltaPixels = clickY - moveEvent.clientY
const deltaValue = scale.getValueForPixel(startPixel + deltaPixels) - scale.getValueForPixel(startPixel)
chart.options.scales.y.max = startMax + deltaValue
chart.update()
}
const onMouseUp = () => {
isDragging = false
document.removeEventListener('mousemove', onMouseMove)
document.removeEventListener('mouseup', onMouseUp)
}
document.addEventListener('mousemove', onMouseMove)
document.addEventListener('mouseup', onMouseUp)
}
Question: does dragging only adjust the max of the Citech chart? Is there an alternative way of adjusting the minimum?
Yeah correct, modifies max only. You can otherwise set the range explicitly with one of the buttons in the tray.
I actually did that myself after asking "him" how to do it haha
Edit:
Hmm, it still seems to be slightly off. I clicked from exaclty the top line (100), dragged down then back up to the line and it went to 102. Not a big deal...
However if you have multiple charts on the page it goes haywire. This is a simple drag down from the middle of the axis on the bottom chart. It affects my other claude function as well but only for the chart below.
Edit 2: If you compare changing the range in yours to Claude's as well, from say 100 to 5000, release mouse, then scaling back down to 100, Claude's you can do in one mouse drag (on 2K screen) but with your version it's multiple passes, so I do prefer that part of Claude's
Actually it looks like my drag logic only works if the chart is at the top of the view 
I'll return to this later with some fresh eyes.
Can someone change the title of this thread to add something to the effect of, "... and bmusson's chartjs alternative solution"? The thread has stopped trying to fix the original problem and is mostly exploring the alternative solution. A clear download / install / documentation link in one of the early posts would be a help too.
better? 
I added the download link as well
