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
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
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
Adding a click event to axis labels is not possible as of now.
—
Thangaraj Raman
Team CanvasJS
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
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
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
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
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
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
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
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
In the example you shared, the chart displays a line dataseries and a column dataseries with reduced width. This is happening because of the large difference in the number of datapoints between the line and column dataseries. The chart automatically reduces the width of the columns to accommodate datapoints from both series in the plot area.
You can use the dataPointWidth property to set a fixed width for the column chart. Please check this updated JSFiddle for a working example.
—
Thangaraj Raman
Team CanvasJS
To fetch custom data by clicking on a datapoint, you can use the click event handler and access all chart properties(custom and predefined) using the event object.
—
Thangaraj Raman
Team CanvasJS