Home forums Chart Support include Zero axis X

Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #28887

    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.

    #28920

    @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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.