[Vishwas R]

@redchilly2095,

Please take a look at this JSFiddle for an example on rendering chart with data from a HTML form. Also please refer this documentation page for step-by-step tutorial on rendering chart with data from user input.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@nancy-gale,

When the chart is zoomed, you can find whether a dataPoint is within the viewport range or outside with the help of rangeChanged event.

rangeChanged: function(e) {
  var dpsWithinViewport = 0;
  for(var j = 0; j < e.chart.data[0].dataPoints.length; j++) {
    var dataPoint = e.chart.data[0].dataPoints[j];
    if(dataPoint.x >= e.axisX[0].viewportMinimum && dataPoint.x <= e.axisX[0].viewportMaximum) {
      dpsWithinViewport++;
    }
  }
  if(e.trigger === "reset")
    updateDataPointWidth(e.chart, e.chart.data[0].dataPoints.length);
  else
    updateDataPointWidth(e.chart, dpsWithinViewport);	
}

Please take a look at this JSFiddle for nearest possible solution to set the dataPointWidth by finding the number of dataPoints within the viewport range.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Adam Griffiths,

Labels are shown at every interval of the axis. To avoid overlapping, chart skips alternative labels which can be overridden by setting interval property. Incase of date-time axis, you may need to set intervalType along with interval according to your data, please refer documentation for more info and live examples.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@offwhtie,

Sorry, it’s not possible to switch to pan mode by default as of now. However you can perform a click programmatically to achieve – as you have mentioned. Please take a look at this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@santhoshnarendra,

You can perform button click programmatically to switch to pan mode by default & hide the zoom/pan button using CSS to do so. Below is the code-snippet for the same.

-----CSS----
.canvasjs-chart-toolbar> button:first-child {
  display: none !important;
}
----JS----
var parentElement = document.getElementsByClassName("canvasjs-chart-toolbar");
var childElement = document.getElementsByTagName("button");
if(childElement[0].getAttribute("state") === "pan"){
  childElement[0].click();
}

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@woeperbe,

Changing text: $title to text:<?php $title ?> should work fine in your case.

If the issue still persists, kindly share sample project along with sample data over Google-Drive or Onedrive so that we can run it locally at our end to understand the scenario better and help you resolve.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@amitkushwaha1710,

You can keep only one slice / segment exploded with the help of exploded property as shown in this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@avinash,

You can combine error chart with column / bar chart to achieve your requirements. Please take a look at this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@santhoshnarendra,

Setting zoomEnabled property to true will show zoom / pan & reset buttons, once the chart is zoomed.
zoomEnabled: true,
Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@tyler,

In JavaScript month index starts from 0(January) and ends at 11(December) because of which 8/31 (31st of September) is considered as 9/1 (1st of October). Please refer this article for more information.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@santhoshnarendra,

Are you looking for programatically zooming / panning the chart? If so you can achieve it by changing viewportMinimum and viewportMaximum. Please take a look at this JSFiddle for the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@operationsteam,

You can customize the position of zoom / pan button by changing the CSS of ‘canvasjs-chart-toolbar’ class. Please take a look at this JSFiddle for an example where zoom / pan buttons are positioned to the top-left of the chart.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@mbarens,

You can pass data in sorted order with label instead of x-value to achieve your requirement. Please take a look at this JSFiddle.

In order to help us in understanding the issue, please have a reproducible demo of your chart. This one step can assure you a speedy response. Fork out our template JSFiddle and reproduce the chart at your end. Try to keep it to the bare minimum by removing unnecessary code.

From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements or the solution that we provide may not work properly due to the variation in chart-options being used by you and us.

Having a JSFiddle helps us in figuring out the issue and many a times we can just edit your code on JSFiddle to fix the issue right-away.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@santhoshnarendra,

You can achieve the above requirements by setting width, height and axis interval properties as shown in this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Sudha,

Please refer this link (https://canvasjs.com/docs/charts/chart-options/data/click/) for documentation on click event.

—
Vishwas R
Team CanvasJS