SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
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?
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>
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.
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
That’s great! Thanks for the help!
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?
Please login first to submit.