include Zero axis X

[Viacheslav Agafonov]

Hello!
We need your help!
We use “CanvasJS HTML5 & JavaScript Charts – v2.3.2”
We need to display some diagrams not by the minimum value on the X axis, but so that they include a zero value. As far as I understand, this is not possible in this version? How can we do this?

For the Y axis everything is working fine.
Our application uses the angular + type script.
This is the structure of the our chart

chartInit(): void {
this.canvasChart = new CanvasJS.Chart(“chartContainer”, {
theme: “light2”,
zoomEnabled: true,
zoomType: “xy”,
exportEnabled: false,
animationEnabled: true,
animationDuration: 1500,
title: {
text: “”
},
toolTip: {
shared: false,
contentFormatter: function (e) {
var content = ” “;
for (var i = 0; i < e.entries.length; i++) {
debugger;
if (e.entries[i].dataSeries.visible) {
let content1: string = utils.translate(e.entries[i].dataSeries.name);
if (utils.isEmpty(content1))
content1 = e.entries[i].dataSeries.name;

content1 = utils.localization(content1);

let secondYName: string = utils.translate(e.entries[i].dataSeries.options.secondYName);
if (utils.isEmpty(secondYName))
secondYName = e.entries[i].dataSeries.options.secondYName;

secondYName = utils.localization(secondYName);

let axisTitle: string = utils.translate(e.entries[i].dataSeries.axisX.title);
if (utils.isEmpty(axisTitle))
axisTitle = e.entries[i].dataSeries.axisX.title;

axisTitle = utils.localization(axisTitle);

let axisYTitle: string = utils.translate(e.entries[i].dataSeries.axisY.title);
if (utils.isEmpty(axisYTitle))
axisYTitle = e.entries[i].dataSeries.axisY.title;

axisYTitle = utils.localization(axisYTitle);

let point: string = utils.translate(‘point’);
if (utils.isEmpty(point))
point = “point”;

content += content1;
content += “<br/>”;
content += “X:” + axisTitle + “:” + “” + e.entries[i].dataPoint.x + ““;
content += “<br/>”;
content += “Y:” + axisYTitle + “:” + “” + e.entries[i].dataPoint.y + ““;

if (e.entries[i].dataPoint.secondY != null && e.entries[i].dataPoint.secondY != undefined) {
content += “<br/>”;
content += “Y2:” + secondYName + “:” + “” + e.entries[i].dataPoint.secondY + ““;
}

if (e.entries[i].dataPoint.point != null && e.entries[i].dataPoint.point != undefined) {
content += “<br/>”;
content += point+”:” + “” + e.entries[i].dataPoint.point + ““;
}

}

}
return content;
}
},
axisX: {
crosshair: {
enabled: true,
snapToDataPoint: true,
labelFormatter: this.crosshairLabelFormatter
}
},
axisY: {
includeZero: this.includeZeroY,
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY2: {
includeZero: this.includeZeroY
},
legend: {
cursor: “pointer”,
itemclick: this.onToggleDataSeries,
itemmouseover: this.onLegendItemMouseOver,
itemmouseout: this.onLegendItemMouseOut
},
rangeChanging: function (e) {

},
data: this.dataSeries
});

}

this.includeZeroY – this is a variable that changes by UI
Thank a lot.

[Manoj Mohan]

@mailtokosgmail-com,

When the variation of y-values are too small, it’s difficult to visualize the variation of values. To overcome this, includeZero property can be used which sets axis range such that the difference becomes prominently visible.

But over x-axis there is no such case of varying values, so there is no such property over x-axis. To make 0 value visible over x-axis you can set minimum to 0.

—-
Manoj Mohan
Team CanvasJS