Pre loader

Custom Legends showing dashed lines

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

I have some complex data & am showing each dataset as a different colour, but I would like to be able to customise the legends.

I am interested in having 2 legends, one with each data set, showing the colour, and preferably, limited to a set number with the option to scroll, and the other showing that solid lines are the left Y axis, and the dashed lines are the right Y axis.

My question is, is there a way to apply a custom skin to the Legend & is there a way to show dashed lines instead of just a big coloured square in the legend?

Version
v2.2.1.2391
  • You must to post comments
1
0

Hi Peter,

You can customize legend item appearance this way:
1. define custom layout for legend item ( I’m using the same layout as default item and you can replace LegendPointMarker on custom View which draws anything you want )

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/legendItemMargin"
android:orientation="horizontal">

<CheckBox
    android:id="@+id/isVisible"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:textSize="@dimen/legendTextSize"
    android:layout_marginLeft="@dimen/legendItemCheckBoxNegativeMargin"
    android:layout_marginTop="@dimen/legendItemCheckBoxNegativeMargin"
    android:layout_marginRight="@dimen/legendItemCheckBoxNegativeMargin"
    android:layout_marginBottom="@dimen/legendItemCheckBoxNegativeMargin" />

<com.scichart.charting.visuals.legend.LegendPointMarker
    android:id="@+id/pointMarker"
    android:layout_width="@dimen/legendItemPointMarkerWidth"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:layout_margin="@dimen/legendItemPointMarkerMargin"
    android:layout_marginTop="@dimen/legendItemPointMarkerMargin" />

<TextView
    android:id="@+id/name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical|start"
    android:layout_marginEnd="@dimen/legendItemSeriesNameRightMargin"
    android:layout_marginStart="@dimen/legendItemSeriesNameLeftMargin"
    android:textSize="@dimen/legendTextSize"
    android:textStyle="bold" />

</LinearLayout>
  1. Then you need to create a custom class which implements ILegendItem ( wrapper for legend View ) and ILegendItemFactory ( factory which can create items ) interfaces:

    class CustomLegendItemFactory implements ILegendItemsFactory {
    
    @Override
    public ILegendItem createLegendItem(ViewGroup parent) {
        return new CustomLegendItem(LayoutInflater.from(parent.getContext()).inflate(R.layout.custom_legend_item, null));
    }
    }
    
    class CustomLegendItem extends LegendItemBase {
    protected final TextView name;
    protected final CheckBox checkBox;
    protected final LegendPointMarker pointMarker;
    
    public CustomLegendItem(@NonNull View itemView) {
        super(itemView);
    
        name = (TextView) itemView.findViewById(com.scichart.charting.R.id.name);
        checkBox = (CheckBox) itemView.findViewById(com.scichart.charting.R.id.isVisible);
        pointMarker = (LegendPointMarker) itemView.findViewById(com.scichart.charting.R.id.pointMarker);
    }
    
    @Override
    public void bindSeriesInfo(Object source, SciChartLegend legend) {
        final SeriesInfo seriesInfo = (SeriesInfo) source;
    
        name.setText(seriesInfo.seriesName);
        checkBox.setChecked(seriesInfo.isVisible());
        checkBox.setVisibility(legend.getShowCheckboxes() ? View.VISIBLE : View.GONE);
        checkBox.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                IRenderableSeries renderableSeries = seriesInfo.renderableSeries;
                renderableSeries.setIsVisible(((CheckBox) view).isChecked());
                renderableSeries.invalidateElement();
            }
        });
        pointMarker.setColor(seriesInfo.seriesColor);
        pointMarker.setVisibility(legend.getShowSeriesMarkers() ? View.VISIBLE : View.GONE);
    
        ThemeManager.applyTheme(this, legend.getTheme(), legend.getContext());
    }
    
    @Override
    public void applyThemeProvider(IThemeProvider themeProvider) {
        final FontStyle legendLabelTextStyle = themeProvider.getDefaultLabelTextStyle();
        legendLabelTextStyle.initTextView(name);
    }
    }
    

    You’ll need to customize bindSeriesInfo() here and instead of pointMarker get your own View and set color to draw.

  2. And finally use factory to create LegendModifier and add it into chart’s modifier collection:

                legendModifier = new LegendModifier(new SciChartLegend(getActivity()), new SeriesInfoLegendAdapter(new CustomLegendItemFactory()), true);
    
            ModifierGroup modifierGroup = sciChartBuilder.newModifierGroup()
                    .withModifier(legendModifier)
                    .build();
    

By default SciChart library has next dimension which is used by Legend items:

<dimen name="legendTextSize">10sp</dimen>
<dimen name="legendItemMargin">4dp</dimen>
<dimen name="legendItemPointMarkerMargin">4dp</dimen>
<dimen name="legendItemPointMarkerWidth">40dp</dimen>
<dimen name="legendItemSeriesNameLeftMargin">4dp</dimen>
<dimen name="legendItemSeriesNameRightMargin">1dp</dimen>

<!--use negative margin to reduces empty space around check box-->
<dimen name="legendItemCheckBoxNegativeMargin">-5dp</dimen>

Hope this will help you!

Best regards,
Yura

  • You must to post comments
0
0

That’s great! Thanks for the help!

  • You must to post comments
0
0

I have a problem with finding “@dimen/legendItemMargin” and other dimens that are from SciChart.

Error APT0000: No resource found that matches the given name (at ‘layout_margin’ with value ‘@dimen/legendItemMargin’). (APT0000)

Its Xamarin.Android project.

Any help?

  • Yura Khariton
    That’s probably because those dimensions are defined in native SciChart library and Xamarin.Android wrapper doesn’t wrap them. Just try to redefine those dimensions in your project. I’m going to update my answer and add dimensions which are used by default by SciChart
  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies