[Vishwas R]

@ravidasari,

Sorry for the inconvenience caused. There seems to be issue with axis-range when there are less number of datapoints (1 datapoint in 2 dataseries in this case). As we were busy working on some other important features, we were unable to fix this. We will prioritize and fix it in future versions. Meantime you can get it worked by setting minimum & maximum manually. Please find the code-snippet below.

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Richo,

Can you kindly create sample project reproducing the issue and share it with us over Google-Drive or Onedrive along with sample data so that we can run it locally to understand the scenario better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@abhihd,

Chart doesn’t automatically group dataPoints by its label. When only label is given (without x-value), internally it assigns x values to dataPoints in an order. So, there can be different dataPoints with same x value but different label. You can pass x-value along with label to group them accordingly. Please find the updated datapoints below.

data: [
    {        
      type: "line",
      dataPoints: [
        { x: 1, y: 30, label: "label1" },
        { x: 3, y: 40, label: "label3" },
        { x: 4, y: 50, label: "label4" },
        { x: 5, y: 60, label: "label5" },
        { x: 7, y: 90, label: "label7" },
        { x: 8, y: 20, label: "label8" },
        { x: 9, y: 50, label: "label9"}

      ]
    }, {        
      type: "line",
      dataPoints: [
        { x: 1, y: 10, label: "label1" },
        { x: 2, y: 20, label: "label2"},
        { x: 3, y: 30, label: "label3" },
        { x: 4, y: 40, label: "label4" },
        { x: 5, y: 50, label: "label5" },
        { x: 6, y: 60, label: "label6" },
        { x: 7, y: 70, label: "label7" },
        { x: 8, y: 80, label: "label8" },
        { x: 9, y: 90, label: "label9"}

      ]
    }
  ]

Please take a look at this JSFiddle for complete code.

[Vishwas R]

@nerviozzo96,

You can use unicode for superscript / subscript in chart elements like title, legend, indexLabel, etc. Please take a look at this JSFiddle for an example on same.

Also refer to this forum topic for relevant query / solutions.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@nehamahajan,

You can customize the max-width of tooltip & it’s content by setting following CSS style properties for tooltip & it’s children.

.wordwrap { 
   white-space: pre-wrap;
}
.canvasjs-chart-tooltip * {
  max-width: 200px !important; 
}
.canvasjs-chart-tooltip {
  left: 250px !important;
  width: 200px;
}

Please take at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@nguyentanson1996gmail-com,

You can hide the information related to hidden dataseries by setting toolTipContent of that particular dataseries to null. Please find the code-snippet below.

itemclick : function(e) {
  var content;
  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    content = e.chart.data[e.dataSeriesIndex].toolTipContent;
    e.dataSeries.toolTipContent = null;
  }
  else {
    e.dataSeries.visible = true;
    e.dataSeries.toolTipContent = content;
  }
  chart.render();
}

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@efreed,

Thanks for sharing the solution. This will help others :)

—
Vishwas R
Team CanvasJS

[Vishwas R]

@cunghita,

Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can understand the scenario better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@azadcoder,

You can create Chart & StockChart by importing canvasjs.stock.min.js but you can create only chart using canvasjs.min.js. Based on the code that you have shared, you are trying to create StockChart using canvasjs.min.js. Instead, importing canvasjs.stock.min.js to your project should work fine in this case. Please download the StockChart from download page.

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

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ashu-sharma,

You can have a condition check before pushing image in addMarkerImages1 method to avoid adding image when datapoint y-value is empty string. Please find the code-snippet below.

function addMarkerImages1(chart1) {
  for (var i = 0; i < chart1.data[1].dataPoints.length; i++) {
	if(chart1.data[1].dataPoints[i].y != ""){
		Markers.push({image: $("<img>").attr("src",chart1.data[1].dataPoints[i].ImageUrl)
		  .css("display", "none")
		  .css("height", 20)
		  .css("width", 20)
		  .appendTo($("#chartContainer1>.canvasjs-chart-container"))
		, dataPointIndex: i});
	}
  }
  for(var i = 0; i < Markers.length; i++)
	positionMarkerImage1(Markers[i].image, Markers[i].dataPointIndex);
}

Please take a look at this JSFiddle for complete code.

If you are still facing issue, kindly create JSFiddle reproducing the issue you are facing & share it with us so that we can run the code at our end, debug to understand the scenario & help you resolve.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ashu-sharma,

You can set custom range to axis by setting minimum & maximum. Based on the image that you have shared, you can use reversed axis to show negative values towards top & positive towards bottom. Below is the code-snippet to set y-axis range from -10 to 120.

axisY: {
    reversed: true,
    minimum: -10,
    maximum: 120
}

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ashu-sharma,

In the link that you have shared, there are couple of issues because of which image is not being shown. Please find them addressed below.

1. Image for the 1st datapoint is not shown as markerImageUrl is not passed to it. Passing markerImageUrl works fine.
{"y":"","label":125, "markerImageUrl":"https:\/\/soundoflife.in\/audiology\/images\/less-than.png"}

2. Images are not being shown in 2nd chart as imageUrl property is being stored in 2nd dataseries of the chart but while passing it as src, you are trying to read it from 1st dataseries. Reading it from 2nd dataseries works fine in this case. Please find the code-snippet below.

function addMarkerImages1(chart1) {
  for (var i = 0; i < chart1.data[1].dataPoints.length; i++) {
    Markers.push($("<img>").attr("src",chart1.data[1].dataPoints[i].ImageUrl)
      .css("display", "none")
      .css("height", 20)
      .css("width", 20)
    
      .appendTo($("#chartContainer1>.canvasjs-chart-container"))
    );
    positionMarkerImage1(Markers[i], i);
  }
}

If you are still facing issue, kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code, understand the scenario better and help you out.

Considering this as duplicate of markerimage, hence closing the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ashu-sharma,

In the link that you have shared, there are couple of issues because of which image is not being shown. Please find them addressed below.

1. Image for the 1st datapoint is not shown as markerImageUrl is not passed to it. Passing markerImageUrl works fine.
{"y":"","label":125, "markerImageUrl":"https:\/\/soundoflife.in\/audiology\/images\/less-than.png"}

2. Images are not being shown in 2nd chart as imageUrl property is being stored in 2nd dataseries of the chart but while passing it as src, you are trying to read it from 1st dataseries. Reading it from 2nd dataseries works fine in this case. Please find the code-snippet below.

function addMarkerImages1(chart1) {
  for (var i = 0; i < chart1.data[1].dataPoints.length; i++) {
    Markers.push($("<img>").attr("src",chart1.data[1].dataPoints[i].ImageUrl)
      .css("display", "none")
      .css("height", 20)
      .css("width", 20)
    
      .appendTo($("#chartContainer1>.canvasjs-chart-container"))
    );
    positionMarkerImage1(Markers[i], i);
  }
}

If you are still facing issue, kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code, understand the scenario better and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@agaur,

Label are shown at a value which is multiple of interval. To show label at the bottom of y-axis, you can add a stripline & set it’s label-placement to outside. Below is the code snippet showing the same.

var axisY = chart.axisY;
axisY.addTo("stripLines", {
  value: axisY.viewportMinimum,
  label: axisY.viewportMinimum,
  labelPlacement: "outside",
  labelFontColor: axisY.labelFontColor,
  color: axisY.tickColor,
  labelBackgroundColor: chart.backgroundColor,
  thickness: 0
});

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@wellhys,

When x-values are not passed, it takes numeric values 0,1,2,3,… In case of numeric axis, intervalType will be number. To set 12 hours interval, you will have to use date-time axis with interval: 12, intervalType:"hours". Else if you like to go with numeric-data, you can set the interval: 12 if it’s hourly data.

—
Vishwas R
Team CanvasJS