[Thangaraj Raman]

@diano4ka,

The example that I shared earlier was created for a numeric axis, however your example has a date-time axis. Please check this updated JSFiddle for an example on zooming using mouse wheel for a date-time axis.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@diano4ka,

You are setting the x-axis interval to 1 minute due to which the chart might freeze as it is unable to render such a large dataset at a 1 minute interval. Setting a larger interval will fix this.

Please check the StackBlitz for an example.

—
Thangaraj Raman
Team CanvasJS.

[Thangaraj Raman]

@diano4ka,

We have released Chart v3.10.11 with a few bug fixes related to axis. Please refer to the release blog for more information. Do download the latest version from our download page and let us know your feedback.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@diano4ka,

The example that you shared is working fine in Angular with the latest version. Can you please create a sample project reproducing the issue that you are facing and share it over OneDrive / Google Drive, so that we can run it locally at our end, understand the scenario better, and help you resolve that?

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@diano4ka,

In a spline chart, the curve/smoothness of the line is based on the consecutive datapoints. In your example, the curve is not observable due to the datapoint values.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@diano4ka,

The first few datapoints are not displayed initially because you are setting the x-axis interval to 1 minute, however, there is insufficient data to show a 1-minute interval. Setting the interval to 1 minute after there is data for more than a minute will fix this as shown in the code snippet below:

if(this.options.data[0].dataPoints.length > 30) {
	 this.options.axisX.interval = 1;
   this.options.axisX.intervalType = 'minute';
}

Please check this updated JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@chatrsimab,

Adding a click event to axis labels is not possible as of now.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@diano4ka,

Although there are no dataseries attached to a particular y-axis, the axis line will still be shown on the chart since its properties have been defined in the axisY/axisY2 array of objects. Removing these objects from axisY/axisY2 should work fine in your case.

Please check this updated JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@kinokatsu,

Reducing your destination point to 95% of its actual value seems to be working fine with the current line thickness that you have set. Please check this updated JSFiddle for working code.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@kinokatsu,

Using canvas properties like lineCap and lineJoin with CanvasJS charts is not possible as of now. In your example, the arrow exceeds the plot point because of the line thickness. Reducing the line thickness will fix this.

Please check this updated JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

Marcel,

You can use the toUTCString() method to convert Javascript timestamp values into UTC format. Please refer to this stack overflow thread for more information.

Also, you can use the toLocaleString() method in labelFormatter and tooltip contentFormatter to format date-time values displayed in the axis labels and tooltip. You can output dates that are in UTC or local time to a specific timezone by passing timeZone option to toLocaleString().

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@scompliance,

Histogram chart can be rendered by setting dataPointWidth based on axis width and the number of dataPoints in a column chart. Please check this JSFiddle for an example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@diano4ka,

CanvasJS chart seems to be working fine on the initial render itself. Can you kindly create a JSFiddle or a sample project reproducing the issue and share it with us over Google Drive or OneDrive so that we can look into the code, run it locally to understand the scenario better, and help you out?

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

Jose,

In your first example, the last axisX label(350,000) is automatically pushed inside the chart to ensure best fit, hence there will be some padding to the right of the chart. You can set labelAutoFit to false to override this default behavior which will remove any padding to the right, however the last label may get clipped.

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@diano4ka,

It is not possible to add intermediate divisions on the axes, as of now. However, you can set the interval at which intermediate ticks will be displayed and use the labelFormatter function to display labels selectively based on a custom property called majorInterval. Please check the code snippet below:

 axisX: {
    interval: 1,
    gridThickness: 0,
    majorInterval: 10,
    labelFormatter: function (e) {
      if(e.value % e.axis.majorInterval == 0)
        return e.value
      else
        return "";
    },
    stripLines: xGridLines
  },

You can use stripLines to show gridlines wherever an axis label is shown. Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS