[Vishwas R]

@maestrofc27,

Data in the chart seems to move back & froth as CanvasJS renders chart with the data in the order you pass in the options without sorting. Passing data in ascending order of x-values or sorting it based on x-values before rendering the chart seems to work fine in this case. Please find the code-snippet for sorting datapoints in ascending order of x-values below.

for(var i = 0; i < chart.options.data.length; i++) {
	chart.options.data[i].dataPoints.sort(compareDataPointXAscend);
}

function compareDataPointXAscend(dataPoint1, dataPoint2) {
	return dataPoint1.x - dataPoint2.x;
}

Please take a look at this updated JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@franckinou,

It seems the sample provided by you is restricted and requires permission. Can you please make the sample public so that we can download it to run locally at our to understand the scenario better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@lacina-martin,

Glad to know that the issue is solved.

In general, invoice will be automatically shared over mail once you purchase any license. You can also download the same anytime from My Account page under ‘Orders’ tab. For more license / sales related queries please contact sales@canvasjs.com.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@festo,

Sorry, controlling the first label on the axes & showing labels at every interval as per position of first label is not available, as of now. Minimum & maximum will set the axis range & not the position from where the axis labeling should start. However, you can disable axis labels & use striplines to achieve this. Below is the code-snippet that shows adding striplines with labels to y-axis.

function addStripLines(chart) {
  for (var i = chart.axisY[0].minimum; i <= chart.axisY[0].maximum; i += chart.axisY[0].interval) {
    chart.options.axisY.stripLines.push({
      value: i, 
      label: i, 
      labelPlacement: "outside", 
      labelFontColor:"black", 
      labelBackgroundColor: "transparent",
      color: chart.axisY[0].gridColor 
    });
  }
  chart.render()
}

Please take a look at this updated JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@fg,

Bar / Column chart accepts 1 y-value & starts rendering bar from the baseline (zero). To pass y-values as a range, you can use range bar / range column chart. Kindly check out our gallery for live examples along with source-code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@fg,

You can use Range Charts like Range Column Chart, Range Area Chart, etc. in this scenario. Please check out gallery for more examples along with source code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@tgriffiths,

You can perform AJAX request to fetch stripline values & render chart. Please check the code-snippet below.

/* Index.cshtml.cs */
public JsonResult OnGetStriplineData()
{
	List<StripLine> stripLines = new List<StripLine>();

	DateTime currentTime = DateTime.Now;
	DateTime sTime = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);

	stripLines.Add(new StripLine((long)(currentTime - sTime).TotalMilliseconds, "Label 1"));
	JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };

	return new JsonResult(JsonConvert.SerializeObject(stripLines, _jsonSetting));
}

/* Index.cshtml */
$.ajax({
	type: "GET",
	url: "/?handler=StriplineData",
	contentType: "application/json",
	dataType: "json",
	success: function (response) {
		chart.options.axisX.stripLines = JSON.parse(response);
		chart.render();
	},
	failure: function (response) {
		console.log(response);
	}
});

Please take a look at this updated sample project for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@stefan-alfs,

It’s not possible to have different polygon shapes on chart as of now. However, you can use scatter chart to show supported markers / shapes (circle, triangle, square, cross) anywhere with different size within the plot-area as shown in this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@kfox,

In case of numeric axis chart, labels will be shown at every interval of the axis. Because of this, it’s showing 1 & -1. If there is just one datapoint and your requirement is to show label just for datapoint, you can use category axis (use label instead of x-value). Please take a look at this JSFiddle for an example.

Considering this as duplicate of Single data row barcharts showing 1, -1 rows, hence closing the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@kfox,

In case of numeric axis chart, labels will be shown at every interval of the axis. Because of this, it’s showing 1 & -1. If there is just one datapoint and your requirement is to show label just for datapoint, you can use category axis (use label instead of x-value). Please take a look at this JSFiddle for an example.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@mustadirmahmood,

You can align y-axis of both the charts so that the x-axis of both also gets aligned. This can be done by setting axis margin to top chart based on bounds of bottom chart.
chartTop.axisY[0].set("margin", (chartBottom.axisY[0].bounds.x2 - chartBottom.axisY[0].bounds.x1 - chartTop.axisY[0].bounds.x2 + 5));

Please take a look at this updated JSFiddle for an example on the same.

Considering this as duplicate of Make transparent background, hence closing the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@mustadirmahmood,

You can align y-axis of both the charts so that the x-axis of both also gets aligned. This can be done by setting axis margin to top chart based on bounds of bottom chart.
chartTop.axisY[0].set("margin", (chartBottom.axisY[0].bounds.x2 - chartBottom.axisY[0].bounds.x1 - chartTop.axisY[0].bounds.x2 + 5));

Please take a look at this updated JSFiddle for an example on the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

[UPDATE]

@scroteau,

We have released CanvasJS Chart v3.6.6 GA & StockChart v1.6.6GA with this bug fix. Please refer to the release blog for more information. Do download the latest version from download page & let us know your feedback.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@mustadirmahmood,

Please take a look at this JSFiddle for an example on adding background image to the chart.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ct101,

Please take a look at this Gallery Page for an example on setting color based on datapoint close values in StockChart.

—
Vishwas R
Team CanvasJS