[Thangaraj Raman]

@elanchezhiyan,

Index labels cannot be positioned outside the plot area as of now. Based on your requirement using striplines and their labels is a possible solution.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@vikkriko,

You can set the showInLegend property to true to display a legend item for a particular dataseries.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@mcigorli,

Auto-calculated axis range depends on multiple factors which include values of entire dataseries as well. From the screenshots shared, we are unable to predict the exact use-case / scenario properly. Hence, 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]

@mustadirmahmood,

As mentioned earlier, it is not possible to display tooltip for stripline labels as of now. However, you can position a hidden div on top of a stripline label based on its bound and display a custom tooltip for that div with a few lines of code. Please take a look at the code snippet below.

function addStriplineLabelTooltip() {
    var stripLine = chart.axisX2[0].stripLines[0];
    var tooltip = $("<div class='tooltip'><span class='tooltiptext'>Tooltip Content</span></div>");
    $(tooltip).css({"height": "12px", "width": stripLine.get("label").width() + "px", "left": stripLine.get("bounds").x1 + "px", "top": stripLine.get("bounds").y1 - 11 + "px"})
    $(chart.container).append(tooltip);  
}

Please check this updated JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@elanchezhiyan,

It looks like you are using a multi-series line chart to render the lines and scatter chart for the labels. Instead, you can use axisX2 stripLines and set labelPlacement to outside to achieve your requirement.

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

Jim,

As previously addressed in this forum thread, setting y-axis minimum & maximum properties should work fine in this case.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@mcigorli,

1. How to make the navigator follow the new data if the navigator is in the far right corner?

Please check this gallery page for an example of a dynamic/live stockchart where the position of the slider is updated as new data is added to the chart.

2. How to make a gap at the beginning as shown in the picture?

You can set the x-axis viewPortMaximum to a value greater than the last datapoint to add gap towards the right side of the chart as per your requirement from the screenshot.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@kishanbhola1311gmail-com,

The range between the datapoints in your example is in minutes, however, you are setting the intervalType to hour, due to which axis labels are missing since labels are outside the viewport range. Setting x-axis viewportMinimum seems to be working fine in your case.

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@hejenemy,

You can read a specific row from the CSV file by its index / header. Please take a look at this documentation page for a step-by-step tutorial on rendering charts with data from a CSV file and parsing it. Also, please refer to this article for more information on parsing CSV data.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@hejenemy,

You can publish Google-Sheet as CSV and use the URL generated to fetch data using jQuery AJAX as shown in this JSFiddle.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@canvas_chartist,

The x-axis cannot be positioned to the middle of the chart as of now. However, you can create a multi-series area chart with positive and negative values to achieve your requirement.

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@elanchezhiyan,

You can use labelFormatter function instead of valueFormatString and set the label format using the formatNumber() method. Please take a look at the code snippet below.

labelFormatter: function(e) {
   if(e.value >= 0 && e.value <= 1)
      return CanvasJS.formatNumber(e.value, "0.00");
   else if (e.value >= 1 && e.value <=10 )
      return CanvasJS.formatNumber(e.value, "0.0");
   else 
      return CanvasJS.formatNumber(e.value, "0");
}

Please check this updated JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@colibrisan,

In order to change the background color of the chart using CSS, you will have to first set the chart backgroundColor property to transparent. You can then, apply CSS styles to the chart container using the chart id.

Please check this JSFiddle for a working example similar to your requirement, which shows how to set gradient as chart background using CSS.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@mustadirmahmood,

Sorry, it is not possible to display a tooltip for stripline labels as of now. However, as a workaround, you can position the stripline label to the center of the plot area using the labelAlign property and add a scatter point for displaying the tooltip content. Please take a look at the code snippet below:

chart.addTo("data", {
    type: "scatter",
    markerSize: 0,
    highlightEnabled: false,
    toolTipContent: "Content to be displayed on hover",
    dataPoints: [{
      x: (chart.axisX[0].viewportMaximum + chart.axisX[0].viewportMinimum) / 2 , 
      y: chart.axisY[0].stripLines[0].value
    }]
})

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@alfonso-arroyo,

It looks like you are setting the axisX interval manually due to which the extra labels -1 and 1 are shown. Based on the interval & other factors, the axis range is calculated & hence the extra labels are added in this case. You can overcome this behavior by either not setting interval when there are fewer datapoints or by manually setting the axis range.

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

—
Thangaraj Raman
Team CanvasJS