[Suyash Singh]

@annie,

We are unable to get your exact requirement. Are you looking for something like this?

Candlestick chart accepts an array of 4 y-values. Please check your CSV and the dataPoints you are passing to chart. We observed that you are providing just 1 y-value. Please check this tutorial for creating chart from CSV and also refer candlestick charts for more info on candlestick charts and its dataPoints.

If you still face any issue, kindly create a jsfiddle reproducing the same so that we can help you in better way.

—
Suyash Singh
Team CanvasJS

[Suyash Singh]

@sixD,

Please check this jsfiddle.

___
Suyash Singh
Team CanvasJS

[Suyash Singh]

@annie,

Please brief us more about the issue that you are facing. A pictorial representation or jsfiddle will help us understand the issue and assist you in better way.

___
Suyash Singh
Team CanvasJS

[Suyash Singh]

@annie,

Y-Values in candlestick chart is an array of 4 values, but in your code you seem to be passing just one y-value, providing an array of 4 values will work in your case. In case if you are still facing any issue, kindly create a jsfiddle so that we can look into it and help you better.

[Suyash Singh]

@fu-hsien,

valueFormatString formats the axis labels. In your case you will have to use xValueFormatString, yValueFormatString to format indexLabel or toolTip.

___
Suyash Singh
Team CanvasJS

• This reply was modified 7 years, 8 months ago by Suyash Singh. Reason: typo

[Suyash Singh]

@mujahid_102,

Thank you for your interest in CanvasJS.

Here is an example of showing the average on axis labels. For this you need to find the average of dataPoints and set it to axis label using chart options before rendering the chart.

—
Suyash Singh
Team CanvasJS

[Suyash Singh]

@nehasingh

For dynamic data, updating the position of image after adding new dataPoint has to be handled. Please take a look at below code snippet for the same.

var updateChart = function () {
  yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
  dps.push({ x: xVal,y: yVal });
  xVal++;
  if (dps.length > 10)
  {
    dps.shift();
  }
  chart.render();
  addMarkerImage(chart);
};

function addMarkerImage(chart) {
  var data = chart.options.data[0];
  for(var i = 0; i < data.dataPoints.length; i++) {
    customMarkers.push($("<img>").attr("src", data.markerImageUrl)
                       .css("display", "none")
                       .css("height", 20)
                       .css("width", 20)
                       .appendTo($("#chartContainer>.canvasjs-chart-container"))
                      );   
    positionMarkerImage(customMarkers[i], i);
  }            
}

function positionMarkerImage(customMarker, index){ 
  var pixelX = chart.axisX[0].convertValueToPixel(chart.options.data[0].dataPoints[index].x);
  var pixelY = chart.axisY[0].convertValueToPixel(chart.options.data[0].dataPoints[index].y);

  customMarker.css({"position": "absolute", 
                    "display": "block",
                    "top": pixelY - customMarker.height()/2,
                    "left": pixelX - customMarker.width()/2
                   });
}

var updateId = setInterval(function () { updateChart();}, updateInterval);

Please refer to this JSFiddle for complete code.

Regarding your query about the Trial Version, our sales team have already mailed you and they will be assisting you further with your requirements.

—
Suyash Singh
Team CanvasJS

[Suyash Singh]

Dinesh,

It overlaps bar as there is no space between bar and the chart extreme. You can avoid this by setting maximum property of axisY. Please have a look at this updated jsfiddle.

___
Suyash Singh
Team CanvasJS

[Suyash Singh]

@nehasingh,

As of now markers can have only five possible values – “circle”, “square”, “triangle” , “cross” & “none”. However, you can position images in place of markers by adding few lines of code. Please checkout the code snippet below for the same.

addMarkerImages(chart);

function addMarkerImages(chart){
  for(var i = 0; i < chart.data[0].dataPoints.length; i++){
    customMarkers.push($("<img>").attr("src", chart.data[0].dataPoints[i].markerImageUrl)
                       .css("display", "none")
                       .css("height", 30)
                       .css("width", 30)
                       .appendTo($("#chartContainer>.canvasjs-chart-container"))
                      );        
    positionMarkerImage(customMarkers[i], i);
  }    
}

function positionMarkerImage(customMarker, index){ 
  var pixelX = chart.axisX[0].convertValueToPixel(chart.options.data[0].dataPoints[index].x);
  var pixelY = chart.axisY[0].convertValueToPixel(chart.options.data[0].dataPoints[index].y);
  
  customMarker.css({"position": "absolute", 
                    "display": "block",
                    "top": pixelY - customMarker.height()/2,
                    "left": pixelX - customMarker.width()/2
                   });
}

Also, please take a look at this JSFiddle for a complete code. For further insight, please refer this how to section for positioning images over chart.

—
Suyash Singh
Team CanvasJS

[Suyash Singh]

Dinesh,

Sorry, this feature is not available as of now.

___
Suyash Singh
Team CanvasJS

[Suyash Singh]

@gregoff,

We are unable to reproduce the issue at our end. Can you kindly create jsfiddle reproducing the issue, so that we can look into it and help you out.
___
Suyash Singh
Team CanvasJS

[Suyash Singh]

@jamil-bouyahi,

Sorry, this feature is not available as of now.

___
Suyash Singh
Team CanvasJS

[Suyash Singh]

@jamil-bouyahi,

Sorry, this feature is not available as of now.

___
Suyash Singh
Team CanvasJS

[Suyash Singh]

@bboyr,

Sorry we don’t have this feature as of now.

___
Suyash Singh
Team CanvasJS

[Suyash Singh]

The dataPoints you pass to the chart must be an array of objects and not a string.

var ChartVal = document.getElementById("txtMyVal").value; // String

First you need to parse the string you get from your input field to a valid JSON and then parse the JSON to get the object which you can pass to the chart. For converting the string to valid JSON, you can enclose the values y, label, legendText in quotes in the input field. Please check this jsfiddle.

—–
Suyash Singh
Team CanvasJS