Tooltips Customization

In SciChart, you can fully customize tooltips for TooltipModifier, RolloverModifier and CursorModifier. Those customizations can be achieved via the ISeriesInfoProvider and ISeriesTooltip protocols. Moreover - tooltips can be made unique per a RenderableSeries instance via the setSeriesInfoProvider(renderableSeries.hitTest.ISeriesInfoProvider seriesInfoProvider) method.

We have several examples (listed below) which shows how to customize tooltips for the modifiers:

Note

All examples can be found in the SciChart Android Examples Suite as well as on GitHub:

To have fully custom tooltip for your modifier, you will need to provide custom ISeriesInfoProvider for your RenderableSeries via inheriting from SeriesInfoProviderBase<TRenderableSeries,TSeriesInfo> which contains some base functionality. From there - you might want to override one of the following (or both):

Customization of Rollover Modifier Tooltips

Let's consider Customization of Rollover Modifier Tooltips as an example, since customizations for other modifiers are nearly the same. Customization Rollover Modifier

Note

Full example sources are available in Android Chart Custom RolloverModifier

First thing, we will need to create custom ISeriesTooltip and implement internalUpdate(T seriesInfo) method in which we update tooltip instance based on passed in SeriesInfo<T> instance. Then, in custom ISeriesInfoProvider we override getSeriesTooltipInternal(Context context, TSeriesInfo seriesInfo, Class<?> modifierType) and provide our custom tooltip for RolloverModifier type, since we want to customize tooltips only for RolloverModifier. Finally, we provide our custom SeriesInfoProvider to our RenderableSeries instance via the corresponding property.

Let's see the code below:

class CustomSeriesInfoProvider extends DefaultXySeriesInfoProvider {
    @Override
    protected ISeriesTooltip getSeriesTooltipInternal(Context context, XySeriesInfo<?> seriesInfo, Class<?> modifierType) {
        if (modifierType == CursorModifier.class) {
            return new CustomSeriesInfoProvider.CustomXySeriesTooltip(context, seriesInfo);
        } else {
            return super.getSeriesTooltipInternal(context, seriesInfo, modifierType);
        }
    }

    class CustomXySeriesTooltip extends XySeriesTooltip {
        public CustomXySeriesTooltip(Context context, XySeriesInfo<?> seriesInfo) {
            super(context, seriesInfo);

            final DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
            final int padding = Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1f, displayMetrics));
            this.setPadding(padding, padding, padding, padding);
        }

        @Override
        protected void internalUpdate(XySeriesInfo seriesInfo) {
            final SpannableStringBuilder sb = new SpannableStringBuilder();
            if (seriesInfo.seriesName != null) {
                sb.append(seriesInfo.seriesName).append(" - ");
            }

            sb.append("X: ").append(seriesInfo.getFormattedXValue());
            sb.append(" Y: ").append(seriesInfo.getFormattedYValue());
            setText(sb);

            setTooltipBackgroundColor(0xff6495ed);
            setTooltipStroke(0xff4d81dd);
            setTooltipTextColor(ColorUtil.White);
        }
    }
}

final FastLineRenderableSeries line = new FastLineRenderableSeries();
line.setSeriesInfoProvider(new CustomSeriesInfoProvider());
Note

A custom Tooltip has to implement the ISeriesTooltip or extend the SeriesTooltipBase<T> class, which is derived from TextView.

Customization of Tooltip Modifier Tooltips

Customization Tooltip Modifier

Note

Full example source code is available in Android Chart Custom Tooltips

Customization of Cursor Modifier Tooltips

Customization Cursor Modifier

Note

Full example sources is available in Android Chart Custom Cursors

Axis Tooltips Customization

Axes tooltips for modifiers are customized the same way as Series Tooltips - via custom AxisTooltip and IAxisInfoProvider. Please see the code below, which is from the same Android Chart Custom RolloverModifier example:

class CustomAxisInfoProvider extends DefaultAxisInfoProvider {
    @Override
    protected IAxisTooltip getAxisTooltipInternal(Context context, AxisInfo axisInfo, Class<?> modifierType) {
        if (modifierType == RolloverModifier.class) {
            return new CustomAxisTooltip(context, axisInfo);
        } else {
            return super.getAxisTooltipInternal(context, axisInfo, modifierType);
        }
    }

    class CustomAxisTooltip extends AxisTooltip {
        public CustomAxisTooltip(Context context, AxisInfo axisInfo) {
            super(context, axisInfo);
            setTooltipBackground(0xff6495ed);
        }

        @Override
        protected boolean updateInternal(AxisInfo axisInfo) {
            final SpannableStringBuilder sb = new SpannableStringBuilder();
            sb.append("Axis ID: ").append(axisInfo.axisId).append(StringUtil.NEW_LINE);
            sb.append("Value: ").append(axisInfo.axisFormattedDataValue);

            setText(sb);

            return true;
        }
    }
}

final NumericAxis xAxis = new NumericAxis(getContext());
xAxis.setAxisInfoProvider(new CustomAxisInfoProvider());

Custom Axis Tooltip

Note

To allow or prevent modifiers when inside a scroll view, please visit the isDisallowInterceptTouchEvent api. Example of the scroll view can be found on GitHub