Using draw on a line chart

[CarrieEBeaton]

There used to be a way to add vertical lines across multiple charts by extending the line controller.
See the example below:
https://stackoverflow.com/questions/62815133/vertical-line-across-multiple-charts
https://www.debugcn.com/en/article/18605537.html

I have created a custom LineWithLine class that extends line and has a draw method but I am not understand how to call the draw method super.draw.call(this) with the ease number and would appreciate better documentation around custom controllers and how to implement something like this.

I followed this documentation
https://www.chartjs.org/docs/latest/developers/charts.html

to implement the following:

class LineWithLine extends LineController {
  
  draw() {
    super.draw.call(this);
    const meta = this.getMeta();
    if (meta.data[0].active) {
      const ctx = this.chart.ctx;
      // const meta = this.getMeta();
      const x = meta.data[0].tooltipPosition().x;
      const topY = this.chart.scales.y.top;
      const bottomY = this.chart.scales.y.bottom;

      // draw line
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(x, topY);
      ctx.lineTo(x, bottomY);
      ctx.lineWidth = 2;
      ctx.strokeStyle = '#007DBA';
      ctx.stroke();
      ctx.restore();
    }
  }
}

LineWithLine.id = 'lineWithLine';
LineWithLine.defaults = LineController.defaults;
declare module 'chart.js' {
  interface ChartTypeRegistry {
    lineWithLine: ChartTypeRegistry['line']
  }
}

Chart.register(
  LineWithLine,
  LineController,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  TimeScale,
  CategoryScale,
  LinearScale);

Any assistance on how to get the vertical line to draw and update on user interaction would be greatly appreciated

[kurkle]

1. There is no ease number anymore in v3, because there can be many animation with different durations etc. You should not need to worry about that.
2. Its not clear how your implementation fails.
3. The documentation states super.draw(arguments);, not super.draw.call(this)
4. There is a working example on a derived chart type: https://www.chartjs.org/docs/latest/samples/advanced/derived-chart-type.html

[CarrieEBeaton]

This is fantastic, thank you!!
The chart doesn't have an animator but I can take off this if statement and just call c.draw and it works as expected. Is there any reason to run the validation to make sure the chart instance has that animator? and if so what is the new interface?
if (!Chart.animator.has(c)) {
c.draw();
}

[kurkle]

Oh right, you can import {animator} from 'chart.js' and use animator.has(). Its a signleton.
The check is to prevent double draw on a single frame, so only a performance thing.

[aryaroudi]

hey @kurkle non of the examples work on typescript project

I tried what is provided by main documentation
https://www.chartjs.org/docs/3.3.2/developers/charts.html#extending-existing-chart-types

then I tried what you shared in codepen and I get this warning

It would be great you mention that you guys removed Chart.Legend , Chart.Line , etc .. now how we can do this in new version?

const legend = new (Chart as any).Legend({
            ctx: chartInstance.chart.ctx,
            options: legendOpts,
            chart: chartInstance,
        });

I tried new Legend({}) but it doesn't work

[LeeLenaleee]

@aryaroudi It is mentioned in the migration guide that those propertys have been removed

https://www.chartjs.org/docs/master/getting-started/v3-migration.html#removed-from-chart

About the arguments in the super.draw, chart.js internally uses it for some calls to pass extra data around but it is typed as a function which does not take any arguments, my ts knowledge doesnt go far enough to know if its possible and how to define a variable amount of arguments, you can always ts-ignore the error.

About the Animator are you sure you are trying to import it correct because it is being exported:

Chart.js/types/index.esm.d.ts

Line 12 in ed73dce

export { Animation, Animations, Animator, AnimationEvent } from './animation';

[aryaroudi]

I tried Chart.plugins.legend._element but it doesn't work. That maybe is because of a bad Typing Declaration in the project?

I guess ts-ignore is not a good approach the typing should be improved. let me try the animator and see if it is working that way 👍

Maybe someone should update the @types/chart.js package? it is still on 2.x.x