[Thangaraj Raman]

@elanchezhiyan,

You can update the position of the scatter datapoints on resizing the window by calculating the width of the index labels and using convertPixeltoValue. Please check the code snippet below:

window.onresize = function() {
  indexLabelOffset = (chart.width < 700) ? 5 : 2 ;
  for(var i = 0; i < customLinesData.length; i++) {
    for(var j = 0; j < scatterDps.length; j++) {
      if( scatterDps[j].indexLabel === "\u25C0 " + customLinesData[i].label) {
	indexLabelWidth = getWidth(customLinesData[i].label);
     	scatterDps[j].x = customLinesData[i].x + chart.axisX[0].convertPixelToValue(indexLabelWidth) / 2 + indexLabelOffset;
      }
    } 
  }
  chart.render();
};

Please take a look at this updated JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@elanchezhiyan,

Striplines are drawn from end to end across the full width/height of the plot-area. However, in your case, you can use a multi-series line chart with interactivity disabled and 2 datapoints each to represent the start and end coordinates of the line. To display text representing each line, you can use a scatter chart with indexlabels.

Please take a look at this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@rashedk,

To update the y value of a datapoint using a dropdown menu you need to update the chart options / data based on the options selected from the dropdown list. Please check the code snippet below.

var country = document.getElementById("country");
country.addEventListener( "change",  function(){
  for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
    if(country.options[country.selectedIndex].text === chart.options.data[0].dataPoints[i].label)
      chart.options.data[0].dataPoints[i].y = Number(country.options[country.selectedIndex].value);
  }
  chart.render();
});

Please take a look at this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@walterschaefer,

It seems to be working fine. Can you kindly create a sample project reproducing the issue you are facing and share it with us over Google Drive or OneDrive so that we can look into your code, run it locally at our end to understand the scenario better, and help you out?

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@mgavserv,

Striplines are drawn from end to end across the full width/height of the plot-area. You can use rangeArea chart with interactivity disabled for the corresponding dataseries to achieve your requirement.

Please take a look at this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@rajuweb,

You can pass x-value in date-time format and use valueFormatString to define how axis labels must be formatted before they appear on the x-axis.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@prabhakar382,

Please refer to this page for step by step tutorial on Creating Chart with data from JSON. The data from the JSON has to be parsed in the format accepted by CanvasJS.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@nouha,

It looks like the sample provided by you is restricted and requires permission. Can you please make the image / sample public so that we can access it?

If the Google Drive link shared contains an image, can you kindly create 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?

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@walterschaefer,

It is not possible to position the axis to the center of the chart as of now. However, you can work around this by using multiple charts to achieve your requirement.

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@gbienemannkahle-schule-de,

You can use the indexLabelFormatter function to display custom index labels as per your requirement. Please take a look at the code-snippet given below.

indexLabelFormatter: function(e) {
    var s = e.dataPoint.y % 1; s *= 60;
    var m = e.dataPoint.y % 60;
    var h = (e.dataPoint.y - m) / 60;
    return (h < 10 ? "0" : "") + h.toString() + ":" + (m < 10 ? "0" : "") + Math.trunc(m).toString() + ":" + (s < 10 ? "0" : "") + s.toString();
},

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@ankur,

The trial version is meant for evaluation purposes for 30 days. You will need a license to use it in commercial applications, please check out License page for more information. One of our sales representatives will get in touch with you soon for further assistance on licensing. For further queries related to sales please contact sales[at]canvasjs[dot]com.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@walterschaefer

The chart’s X-axis and Y-axis lines and labels will be positioned to the bottom and left in the case of primary axis and to the top and right in the case of secondary axis. If you are looking to draw a horizontal or vertical line in the middle of the chart, you can use stripLines.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@elanchezhiyan,

To check the minimum or maximum value of the chart’s X-axis, you can use the axis get method. Please take a look at the code-snippet given below.

chart.axisX[0].get("minimum");
chart.axisX[0].get("maximum");

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@edad_msft,

CanvasJS stockcharts plots all the chart elements on HTML5 canvas element, which is considered as an image by the narrator. Hence it’s not possible to have accessibility for input fields as of now. However, you can pass aria-label field to the entire chart to achieve accessibility. Please take a look at this JSFiddle for an example on the same.

Also, please refer to this forum thread for more information.

—-
Manoj Mohan
Team CanvasJS

[Thangaraj Raman]

@elanchezhiyan,

In the JSFiddle that you have shared, you are not setting the X-axis minimum or maximum. Setting the minimum and maximum value for X-axis seems to be working fine for both date-time and numerical values.

If you are still facing issues, kindly update the JSFiddle with your use case and share it with us so that we can look into the code / chart-options being used, understand the scenario better and help you out.

—
Thangaraj Raman
Team CanvasJS