Visibility of Axis Elements
In SciChart.js all the elements of an axis may be hidden or shown invidually, with the following code:
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:
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");