[Sachin Bisht]

@codetonight,

You can restore the slices in doughnut chart to the old state by dynamically setting the exploded property of dataPoints to false as shown in the code snippet below.

for(var i = 0; i < chart.data[0].dataPoints.length; i++)
    chart.options.data[0].dataPoints[i].exploded =  false;

chart.render(); 

Kindly have a look at this JSFiddle for the working example on the same.

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@dpanscik,

Regular HTML text can be selected, searched and interacted with, but the text drawn on canvas is like a picture. When you draw text on the canvas, you’re actually just coloring pixels to make it look like text. Hence, it’s not possible to search the text within chart using ctrl+f. Please refer to this stackoverflow thread for more information.

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@muzzammil194,

You can start / stop live update of stock chart for a specific time with the help of setInterval and clearTimeout function as shown in this JSFiddle. If this does not fulfill your requirement, kindly brief us more so that we can understand the scenario better and help you out.

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@dkumar,

You can fix the maximum y-value of the data set to the top most gridline of Y-axis by dynamically setting the Y-axis minimum and maximum to minimum and maximum of the data set. And In case the gridline does not align with the maximum y-value of the data points, you can make use of y-axis stripline to represent the same. Kindly refer to this JSfiddle for the working example on the same.

If you still facing issue, kindly share a sample project along with the data and brief us more about your issue so that we can understand the scenario better and help you out.

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@dkumar,

To make markers to be completely visible you can set the axis-Y maximum to the maximum Y value of the datapoints plus half the marker size as shown in the code snippet below.

chart.axisY[0].set("maximum", chart.axisY[0].convertPixelToValue(chart.axisY[0].convertValueToPixel(chart.axisY[0].get("maximum")) - chart.data[0].get("markerSize")/2));

Kindly refer to the updated JSFiddle for complete working example.

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@fatemk,

Kindly create a sample project reproducing the issue you are facing and share it with us over Onedrive / Google-Drive, so that we can run the sample locally at our end to understand the scenario better and help you out.

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@fatemk,

We don’t have CanvasJS React Charts TypeScript definition as of now. However, charts seems to work fine with React TypeScript as-well. You can ignore the corresponding error by adding // @ts-ignore above the import statement as shown in the code-snippet below.

// @ts-ignore
import CanvasJSReact from '@canvasjs/react-charts';

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@abhishek1177,

Chart animates only on the first render, as of now. Hence, it doesn’t animate when you change the chart-options / type & re-render. However, you can destroy and re-create the chart on each render with updated options as shown in this example.

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@tuelle42,

You can get to know y-value of the clicked position anywhere on the chart by converting the pixel coordinates of the event to y-value using convertPixelToValue method as shown in the code snippet below.

$(stockChart.charts[0].container).on("mousedown", function(e) {
    var offset = $(this).offset();
    var relY = e.pageY - offset.top;

    stockChart.charts[0].axisY[0].addTo("stripLines", {
      value: stockChart.charts[0].axisY[0].convertPixelToValue(relY)
    });
 });

Kindly take a look at this JSFiddle for adding a stripline to y-value corresponding to the event coordinate.

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@lujakob,

You can set the distance between data points same as width of the of the data points by setting dataPointWidth dynamically as shown in the code snippet below.

chart.set("dataPointWidth",Math.ceil(chart.axisX[0].bounds.width/chart.data[0].dataPoints.length / 2),true);

Please take a look at this JSFiddle for the working example on the same.

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@dreamofdoc,

There has been so many enhancement and bug fixes since version 2.1.2 and its possible the issue you were encountering has been fixed. I would suggest you to download and use the latest version of the CanvasJS.

Kindly let us know, if the issue still persist with the latest version so that we look into it further & fix the same.

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@dreamofdoc,

We are unable to reproduce the issue at our end with the mentioned version of OS, Browser & the library. Can you kindly create JSFiddle with the set of options that you are using and share it with us along with the steps to reproduce so that we can try out locally at our end?

Also, I would recommend you to check if the issue still persists in the latest version of CanvasJS (v3.7.27GA).

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@dreamofdoc,

Chart & it’s elements like axis line, grids & labels seems to be working fine along with events like zooming and panning in Chrome 119.0.6045.124.

Can you kindly share the details like OS being used, Chrome version & version of CanvasJS with us so that we can try reproducing the issue at our end? Also, we would suggest you to try reproducing the issue by disabling the Chrome extensions that you have installed.

—
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@ezsolve,

Axis labels are shown at every interval which is auto-calculated based on parameters like axis minimum, axis maximum, etc. In your case, the auto calculated interval is 2 months and hence ‘Dec 2019’ is not shown. You can set the interval to 1 month to show the label in Dec 2019 by using interval and intervalType properties as shown in the code-snippet below.

axisX: {
      interval: 1,
      intervalType: "month"
}

Please take a look at this JSFiddle for a working example in which the label at Dec 2019 is shown in the navigator.

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@indxx,

The range of charts in the stockchart is automatically calculated based on data being passed to navigator. To start the range of stockchart from first datapoint, you can set the minimum property of axisX in navigator to first datapoint as shown in the code snippet below.

navigator: {
     axisX:{
         minimum: new Date(2018,0,1)
     }
}

Kindly take a look at this JSFiddle for working code.

__
Sachin Bisht
Team CanvasJS