Hi,
New to using Scichart JS, is it possible to change the series colour of the overview chart?
See screenshot, I have a FastColumnRenderableSeries as the main chart, and using FastMountainRenderableSeries for the overview. I would like to change the colour of the overview chart.
Tried setting the stroke colour etc, as in the example but can not seem to make it work.
Kind Regards,
James
- James Usherwood asked 2 years ago
- You must login to post comments
Yes, you can customise the appearance and data of the overview to anything you like
Take a look at this documentation page. This has some basic ways to change series colour of properties of the series/axis on the overview control
Modifying the Overview Chart
The SciChartOverview.create() method returns an instance of SciChartOverview, which exposes properties for accessing and customizing the underlying chart. The most important is overviewSciChartSurface which is the actual SciChartSurface used by the overview.
import { SciChartJSLightTheme } from 'scichart/Charting/Themes/SciChartJSLightTheme'; import { Thickness } from 'scichart/Core/Thickness'; // ... // add styling to the overview component overview.applyTheme(new SciChartJSLightTheme()); // Default padding is 10 overview.overviewSciChartSurface.padding = Thickness.fromNumber(0); // overviewXAxis provides a shortcut to overviewSciChartSurface.xAxes.get(0) overview.overviewXAxis.isVisible = true; overview.overviewXAxis.isInnerAxis = true; overview.overviewXAxis.drawMinorGridLines = false; overview.overviewXAxis.labelProvider.precision = 0; // Setting an id on the series makes it easier to get and customise it on the overview overview.overviewSciChartSurface.renderableSeries.getById("MainSeries").stroke = "#0a6fc2";
However, if you look at some of our examples, they contain some ways to customise the overview a bit more deeply.
For example, the JavaScript Candlestick Chart example. This shows a method for how we can actually instantiate different series types for the data on the overview, or even show or hide certain series.
Check out the part in the example source code where it sets the getOverviewSeries function
// Add Overview chart. This will automatically bind to the parent surface
// displaying its series. Zooming the chart will zoom the overview and vice versa
const overview = await SciChartOverview.create(sciChartSurface, divOverviewId, {
theme: appTheme.SciChartJsTheme,
transformRenderableSeries: getOverviewSeries
});
// Override the Renderableseries to display on the scichart overview
const getOverviewSeries = (defaultSeries: IRenderableSeries) => {
if (defaultSeries.type === ESeriesType.CandlestickSeries) {
// Swap the default candlestick series on the overview chart for a mountain series. Same data
return new FastMountainRenderableSeries(defaultSeries.parentSurface.webAssemblyContext2D, {
dataSeries: defaultSeries.dataSeries,
fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
{ color: appTheme.VividSkyBlue + "77", offset: 0 },
{ color: "Transparent", offset: 1 }
]),
stroke: appTheme.VividSkyBlue
});
}
// hide all other series
return undefined;
};
Normally when an overview is created, every series on the main chart gets mirrored on the overview chart. You can intercept this with getOverviewSeries(). For each series passed in, decide if you want to create a different series type, or return undefined if you want to hide it.
Let me know if this helps!
Best regards
Andrew
- Andrew Burnett-Thompson answered 2 years ago
- You must login to post comments
Please login first to submit.