Float y axis labels on top of scrolling chart

[dpanscik]

Does anyone have a jsfiddle that is bare bones that can show me how to float x axis labels on top of a very wide scrolling chart? The goal is to have x axis lables that stay in place when a very wide chart is scrolled horizontally.

I tried to figure out how this example works but there is to much going on for me to see clearly how this concept functions.
https://jsfiddle.net/svc51ym8/

Thanks for the help!

[Manoj Mohan]

@dpanscik,

To make the y-axis stationery, you can position an overlayed canvas on top of the stockchart and copy the y-axis onto the overlayed canvas.

Please check this StackBlitz for a working example.

—
Manoj Mohan
Team CanvasJS

[dpanscik]

Thanks Manoj,

Why do you define dataPoints2 = []; is it used somewhere that is not visible in this example?

[dpanscik]

I tried to drop the necessary code into a existing javascript canvas.js project and I am getting an error.

TypeError: Cannot read properties of undefined (reading ‘0’)

I believe this section is throwing an error. Have you seen this before?

`
var axisWidth =
stockChart.charts[0].axisY[0].bounds.x2 +
stockChart.charts[0].axisY[0].get(‘tickLength’);
var axisHeight =
stockChart.charts[0].height –
stockChart.charts[0].axisY[0].bounds.y1;
`

[dpanscik]

Here is a fiddle. https://jsfiddle.net/canvasjs/QwZuf/

[Manoj Mohan]

@dpanscik

Why do you define dataPoints2 = []; is it used somewhere that is not visible in this example?

Thanks for the feedback. We have updated the sample project.

I tried to drop the necessary code into a existing javascript canvas.js project and I am getting an error.

Can you kindly create a JSFiddle reproducing the issue you are facing & share it with us so that we can look into the code / chart-options being used, understand the scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[dpanscik]

@Manoj Mohan

Oops. The previous fiddle I created for you did not autosave.

Here is a fiddle that shows the issue I am having. The overlay canvas image is never created.

https://jsfiddle.net/2wrbpfq6/

[Manoj Mohan]

@dpanscik,

The StackBlitz sample shared above uses CanvasJS StockChart not Chart. Error was being thrown as you were trying to access axisX & axisY as stockchart.charts[0].axisX instead of accessing them directly as stockChart.axisX. Also, we need to consider x-axis bounds instead of y-axis for fixing the axis as you are using Bar chart which has axisX as vertical and axisY as horizontal axis.

Please take a look at this updated JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[dpanscik]

I had forgotten that bar charts have X & Y reversed.

Thank you for the assistance!

[dpanscik]

This seems to work in fiddle but in visual studio, I get the following error;

[Manoj Mohan]

@dpanscik,

It seems like you are using a different variable name for chart object. Replacing it with the proper variable name should work fine in your case.

If you are still facing the issue, kindly create a JSFiddle reproducing the issue you are facing and share it with us so that we can reproduce the issue at our end, understand the scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS

[dpanscik]

Hi Manoj,

Here is a fiddle showing the code that I am using.

https://jsfiddle.net/sqvgocez/

The error (chartname) is not defined.

The error is at; (chartname).axisX[0].bounds.x2

Thank you for having a look at this.
Much appreciated.

[Manoj Mohan]

@dpanscik,

Updating all the occurrence of chart object’s variables names in the example should work fine in your case. Please take a look at this updated JSFiddle where chart object is passed as an argument to copyAxis function.

—-
Manoj Mohan
Team CanvasJS