Chart.js bar and line chart with dual axis's

[surendrarathore]

I want to create bar and line chart using chatjs with dual axis, and X-axis contains table like below

[LeeLenaleee]

With these two samples provided by chart.js you will be able to recreate that:
https://www.chartjs.org/samples/master/charts/bar/multi-axis.html and https://www.chartjs.org/samples/master/charts/combo-bar-line.html

Docs:
https://www.chartjs.org/docs/master/charts/mixed
https://www.chartjs.org/docs/master/axes/cartesian/index#axis-position

[surendrarathore]

but how to show record and amount table like format.

it is possible.

[LeeLenaleee]

The only way to do this is by adding padding to the bottom of the chart and the write a custom inline plugin which draws a table on the canvas

Plugins docs: https://www.chartjs.org/docs/master/developers/plugins

[surendrarathore]

how to create custom inline plugin. Could you share example.

[LeeLenaleee]

Here on this page are 2 plugins which draw a background on the chart, instead of that you will need to draw what you want

https://www.chartjs.org/docs/master/configuration/canvas-background