SciChart.js JavaScript 2D Charts API > Axis APIs > Axis Styling > Visibility of Axis Elements
Visibility of Axis Elements

In SciChart.js all the elements of an axis may be hidden or shown invidually, with the following code:

// Demonstrates how to show/hide axis parts SciChart.js
const {
  SciChartSurface,
  NumericAxis,
  SciChartJSLightTheme,
  TextAnnotation,
  ECoordinateMode,
  EHorizontalAnchorPoint,
  EVerticalAnchorPoint
} = SciChart;

// or, for npm, import { SciChartSurface, ... } from "scichart"

const {wasmContext, sciChartSurface} = await SciChartSurface.create(divElementId, {
  // Choose a light theme to make this obvious
  theme: new SciChartJSLightTheme()
});

// Create a X-Axis hiding elements
sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
    axisTitle: "X Axis (Hiding elements)",
    // Show or hide individual elements of the axis
    drawMajorBands: true,
    drawLabels: false,
    drawMinorGridLines: false,
    drawMajorGridlines: true,
    drawMinorTicks: true,
    drawMajorTicks: false,
  })
);

sciChartSurface.yAxes.add(
  new NumericAxis(wasmContext, {
    // Hide the entire axis
    isVisible: false
  })
);
// Demonstrates how to show/hide axis parts SciChart.js
const {
  chartBuilder,
  EThemeProviderType,
  EAxisType,
} = SciChart;

// or, for npm, import { chartBuilder, ... } from "scichart"

const {wasmContext, sciChartSurface} = await chartBuilder.build2DChart(divElementId, {
  surface: {theme: {type: EThemeProviderType.Dark }},
  xAxes: {
    type: EAxisType.NumericAxis,
    options: {
      axisTitle: "X Axis (Hiding elements)",
      // Show or hide individual elements of the axis
      drawMajorBands: true,
      drawLabels: false,
      drawMinorGridLines: false,
      drawMajorGridlines: true,
      drawMinorTicks: true,
      drawMajorTicks: false,
    }
  },
  yAxes: {
    type: EAxisType.NumericAxis,
    options: {
      // Hide the entire axis
      isVisible: false
    }
  }
});

This results in the following output:

<div id="scichart-root" ></div>
  
body { margin: 0; }
#scichart-root { width: 100%; height: 100vh; }
  
async function axisVisibility(divElementId) {
  // #region ExampleA
  // Demonstrates how to show/hide axis parts SciChart.js
  const {
    SciChartSurface,
    NumericAxis,
    SciChartJSLightTheme,
    TextAnnotation,
    ECoordinateMode,
    EHorizontalAnchorPoint,
    EVerticalAnchorPoint
  } = SciChart;

  // or, for npm, import { SciChartSurface, ... } from "scichart"

  const {wasmContext, sciChartSurface} = await SciChartSurface.create(divElementId, {
    // Choose a light theme to make this obvious
    theme: new SciChartJSLightTheme()
  });

  // Create a X-Axis hiding elements
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
      axisTitle: "X Axis (Hiding elements)",
      // Show or hide individual elements of the axis
      drawMajorBands: true,
      drawLabels: false,
      drawMinorGridLines: false,
      drawMajorGridlines: true,
      drawMinorTicks: true,
      drawMajorTicks: false,
    })
  );

  sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
      // Hide the entire axis
      isVisible: false
    })
  );
  // #endregion
  // Add instructions
  const textAnnotation = new TextAnnotation({ x1: 0.5, y1: 0.5, text: "Y Axis is hidden. X Axis has some parts hidden", textColor: "#00000033", fontSize: 26,
    xCoordinateMode: ECoordinateMode.Relative, yCoordinateMode: ECoordinateMode.Relative,
    horizontalAnchorPoint: EHorizontalAnchorPoint.Center, verticalAnchorPoint: EVerticalAnchorPoint.Center})
  sciChartSurface.annotations.add(textAnnotation);
};

axisVisibility("scichart-root");


async function builderExample(divElementId) {
  // #region ExampleB
  // Demonstrates how to show/hide axis parts SciChart.js
  const {
    chartBuilder,
    EThemeProviderType,
    EAxisType,
  } = SciChart;

  // or, for npm, import { chartBuilder, ... } from "scichart"

  const {wasmContext, sciChartSurface} = await chartBuilder.build2DChart(divElementId, {
    surface: {theme: {type: EThemeProviderType.Dark }},
    xAxes: {
      type: EAxisType.NumericAxis,
      options: {
        axisTitle: "X Axis (Hiding elements)",
        // Show or hide individual elements of the axis
        drawMajorBands: true,
        drawLabels: false,
        drawMinorGridLines: false,
        drawMajorGridlines: true,
        drawMinorTicks: true,
        drawMajorTicks: false,
      }
    },
    yAxes: {
      type: EAxisType.NumericAxis,
      options: {
        // Hide the entire axis
        isVisible: false
      }
    }
  });
  // #endregion
};


// Uncomment this to use the builder example
  //builderExample("scichart-root");

  
A hidden axis still behaves like an axis with all the scaling that comes with it, just without the visual elements like labels and gridlines.

Using Hidden Axis to Scale a Series to Viewport

Other than styling, a hidden axis is very useful to scale a series to a viewport.

Say you had a chart with two series on the same Y-Axis, and with different amplitudes. You want to click a button to maximise a series to the viewport. You can do this with a hidden axis.

Here's a code sample below:

// Create a SciChartSurface
const {wasmContext, sciChartSurface} = await SciChartSurface.create(divElementId, {
  theme: new SciChartJsNavyTheme()
});

// Add some Series to the chart
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: "Series A" }),
  stroke: "#50C7E0",
  strokeThickness: 3,
}));
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues1, dataSeriesName: "Series B" }),
  stroke: "#F48420",
  strokeThickness: 3,
}));
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues2, dataSeriesName: "Series C" }),
  stroke: "#EC0F6C",
  strokeThickness: 3,
}));

// Default X-Axis
sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
    axisTitle: "X Axis",
  })
);

// Default YAxis
sciChartSurface.yAxes.add( new NumericAxis(wasmContext, {
  axisTitle: "Y Axis",
  growBy: new NumberRange(0.1, 0.1)
}));

// Hidden YAxis with ID=HiddenYAxis
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    id: "HiddenYAxis",
    isVisible: false,
    autoRange: EAutoRange.Always
  })
);

// Get the checboxes in the DOM (see index.html)
const checkboxes = Array.from(document.getElementsByClassName("checkbox"));

// Function invoked when a checkbox is checked/unchecked
const onCheckedChanged = (e) => {
  // find a renderableSeries by dataSeriesName matching checkbox id
  const series = sciChartSurface.renderableSeries.asArray()
    .find((rs) => rs.dataSeries.dataSeriesName === e.target.id);
  if (e.target.checked) {
    // If the series is checked, show it on the hidden YAxis with AutoRange.Always
    console.log("Maximising " + series.dataSeries.dataSeriesName);
    series.yAxisId = "HiddenYAxis";
  } else {
    // Else, put it back on the default axis / default scaling
    series.yAxisId = NumericAxis.DEFAULT_AXIS_ID;
    console.log("Setting " + series.dataSeries.dataSeriesName + " to default axis");
  }
};

// get checkboxes by class name and add event listener to change event
checkboxes.forEach((element) => {
    element.addEventListener("change", (e) => {
      onCheckedChanged(e);
      if (e.target.checked) {
        // uncheck other checkboxes
        checkboxes.filter(cb => cb.id !== e.target.id).forEach(cb => {
          cb.checked = false;
          onCheckedChanged({ target: cb });
        });
      }
    })
});

This results in the following output:

<div class="container">
    <div id="scichart-root" ></div>
    <div id="controls">
        <span class="item a">
            <input false type="checkbox" id="Series A" class="checkbox">
            <label for="Series A">Maximise Series A</label>
        </span>
        <span class="item b">
            <input false type="checkbox" id="Series B" class="checkbox">
            <label for="Series A">Maximise Series B</label>
        </span>
        <span class="item c">
            <input false type="checkbox" id="Series C" class="checkbox">
            <label for="Series A">Maximise Series C</label>
        </span>
    </div>
</div>

  
body { margin: 0; font-family: Arial; }
.container { width: 100%; height: 100vh; position: relative; }
#scichart-root { width: 100%; height: 100%; }
#controls {
    position: absolute;
    left: 20px;
    top: 20px;
    border: 1px solid #14233C;
    background-color: #364BA0;
    border-radius: 3px;
    color: #FFFFFF;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

#controls .item {
    display: flex;
    margin: 5px 0;
}

#controls .a {
    color: #50C7E0;
}
#controls .b {
    color: #F48420;
}
#controls .c {
    color: #EC0F6C;
}

  
async function axisVisibility(divElementId) {
  // Demonstrates how to maximise a specific series using hidden axis in SciChart.js
  const {
    SciChartSurface,
    NumericAxis,
    SciChartJsNavyTheme,
    TextAnnotation,
    ECoordinateMode,
    EHorizontalAnchorPoint,
    EVerticalAnchorPoint,
    FastLineRenderableSeries,
    XyDataSeries,
    EAutoRange,
    NumberRange
  } = SciChart;

  // or, for npm, import { SciChartSurface, ... } from "scichart"


  // Create some data for series
  const xValues = [];
  const yValues = [];
  const yValues1 = [];
  const yValues2 = [];
  for(let i = 0; i < 100; i++) {
    xValues.push(i);
    yValues.push(0.2 * Math.sin(i*0.1) - Math.cos(i * 0.01));
    yValues1.push(0.2 * Math.sin(i*0.1) - Math.cos(i * 0.01) * 0.5);
    yValues2.push(0.2 * Math.sin(i*0.1) - Math.cos(i * 0.01) * -0.6);
  }

  // #region ExampleA
  // Create a SciChartSurface
  const {wasmContext, sciChartSurface} = await SciChartSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme()
  });

  // Add some Series to the chart
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    dataSeries: new XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: "Series A" }),
    stroke: "#50C7E0",
    strokeThickness: 3,
  }));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues1, dataSeriesName: "Series B" }),
    stroke: "#F48420",
    strokeThickness: 3,
  }));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues2, dataSeriesName: "Series C" }),
    stroke: "#EC0F6C",
    strokeThickness: 3,
  }));

  // Default X-Axis
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
      axisTitle: "X Axis",
    })
  );

  // Default YAxis
  sciChartSurface.yAxes.add( new NumericAxis(wasmContext, {
    axisTitle: "Y Axis",
    growBy: new NumberRange(0.1, 0.1)
  }));

  // Hidden YAxis with ID=HiddenYAxis
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
      id: "HiddenYAxis",
      isVisible: false,
      autoRange: EAutoRange.Always
    })
  );

  // Get the checboxes in the DOM (see index.html)
  const checkboxes = Array.from(document.getElementsByClassName("checkbox"));

  // Function invoked when a checkbox is checked/unchecked
  const onCheckedChanged = (e) => {
    // find a renderableSeries by dataSeriesName matching checkbox id
    const series = sciChartSurface.renderableSeries.asArray()
      .find((rs) => rs.dataSeries.dataSeriesName === e.target.id);
    if (e.target.checked) {
      // If the series is checked, show it on the hidden YAxis with AutoRange.Always
      console.log("Maximising " + series.dataSeries.dataSeriesName);
      series.yAxisId = "HiddenYAxis";
    } else {
      // Else, put it back on the default axis / default scaling
      series.yAxisId = NumericAxis.DEFAULT_AXIS_ID;
      console.log("Setting " + series.dataSeries.dataSeriesName + " to default axis");
    }
  };

  // get checkboxes by class name and add event listener to change event
  checkboxes.forEach((element) => {
      element.addEventListener("change", (e) => {
        onCheckedChanged(e);
        if (e.target.checked) {
          // uncheck other checkboxes
          checkboxes.filter(cb => cb.id !== e.target.id).forEach(cb => {
            cb.checked = false;
            onCheckedChanged({ target: cb });
          });
        }
      })
  });
  // #endregion

  const textAnnotation = new TextAnnotation({ x1: 0.5, y1: 0.5, text: "Click the legend: Maximise Series with Hidden Axis",
    textColor: "#FFFFFF55", fontSize: 26,
    xCoordinateMode: ECoordinateMode.Relative, yCoordinateMode: ECoordinateMode.Relative,
    horizontalAnchorPoint: EHorizontalAnchorPoint.Center, verticalAnchorPoint: EVerticalAnchorPoint.Center})
  sciChartSurface.annotations.add(textAnnotation);
};

axisVisibility("scichart-root");