How to show grid-lines when chart data is empty?

[Diano4ka]

Please tell me how to display an empty datagrid when opening a chart until the user starts connecting the trends he needs. I tried adding axizY with the specified minimum and maximum and data with the visible false parameter, but the datagrid still did not appear until data on the selected trend began to arrive. That is, I want to show an empty grid without data. I use CanvasJSAngularChartsModule with type line “spline”. Thank you.

defaultChartOptions = {
    zoomEnabled: false,
    zoomType: "x",
    theme: "white",
    toolTip:{
      enabled: true,
      shared: true,
      animationEnabled: false,
      contentFormatter: function ( e ) {
        return <code>${CanvasJS.formatDate(e.entries[0].dataPoint.x, &quot;HH:mm:ss&quot;)}: ${e.entries[0].dataPoint.y.toFixed(3)}</code>
      }
    },
    axisX:{
      interval: 1,
      intervalType: "minute",
      labelFormatter: function (e) {
        return CanvasJS.formatDate( e.value, "HH:mm:ss");
      },
      gridThickness: 1,
      gridColor: "grey",
      xValueType: "dateTime",
      xValueFormatString: "HH:mm:ss",
      crosshair: {
        enabled: true,
        snapToDataPoint: true,
        labelFormatter: function (e) {
          return CanvasJS.formatDate( e.value, "HH:mm:ss");
        },
      },
      stripLines: [],
      labelWrap: false,
      labelAutoFit: true,
      labelAngle: 0
    },
    axisY: {
      interval: 10,
      minimum: 0,
      maximum: 100
    },
    data: []
  };

[Vishwas R]

@diano4ka,

To ensure axis grids are displayed, you need to pass an empty dataseries & specify the chart type (like “line” or “column”, defaults to “column”) along with grid-options. You need to explicitly pass empty dataseries as axis is not present in chart-types like pie, doughnut, funnel & pyramid. Hence, the axis elements passed in options are not considered when chart-type is unknown – when data is an empty array. Changing data:[] to data:[{}] should work fine in your case. Please take a look at this JSFiddle for an example of the same.

—
Vishwas R
Team CanvasJS

[Diano4ka]

@vishwas
Thank you very much! It’s work :)