SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components

Welcome to the SciChart Community Forums!

Please use the forums below to ask questions about SciChart. Take a moment to read our Question asking guidelines on how to ask a good question and our support policy. We also have a tag=SciChart on Stackoverflow.com where you can earn rep for your questions!

Please note: SciChart team will only answer questions from customers with active support subscriptions. Expired support questions will be ignored. If your support status shows incorrectly, contact us and we will be glad to help.

0
0

I was wondering, if there is a way to change the chart layout. I would like to use as much space as I can. If you look the picture attached you will see that there is a lot space between XYAxis titles and the frame of the container. I would like to make the chart-grid bigger and the XYAxis titles smaller and close to the edge of the container.

Hope you can understand what I am trying to explain, sorry it is difficult to explain.

Thanks a lot 🙂

Images
  • You must to post comments
0
0

Hi there,

Please, set

Padding="0"

on your SciChartSurface to remove the spaces between frame and the chart, also there are styling properties in AxisBase class, such as TitleFontSize, TitleFontWeight, FontSize, FontWeight, Major/MinorTickLineStyle which allows you to customize control’s appearance. For example, this markup sets up size of axis ticks to 6 dpi:

        <Setter Property="MajorTickLineStyle">
            <Setter.Value>
                <Style TargetType="Line">
                    <Setter Property="StrokeThickness" Value="1" />
                    <Setter Property="X2" Value="6" />
                    <Setter Property="Y2" Value="6" />
                </Style>
            </Setter.Value>
        </Setter>

Please, try this out and let us know if it helps!

Best regards,
Yuriy

  • vaquita50
    Thanks very much Yuriy.... It worked...Thanks, thanks so much :)
  • vaquita50
    Hi Guys...Yes... it is me again... sorry! :) I have a tricky question and I hope you can help me. I am developing a different screen now where I have multiple charts and I need to synchronize the zoom. I am creating the charts "dynamically". basically, I have a list of charts and for each chart, I create an instance of the chartViewModel. Here is my code.
    private void CreateCharts(IEnumerable<ChartPoints> chartDataPoints)
            {
                Views.Clear();
    
                if (chartDataPoints==null)
                    return;
    
                foreach (var chartData in chartDataPoints)
                {
                    var workspaceDataParameter = new WorkspaceDataParameter<UIViewModelsBase> { ParentViewModel = this };
                    workspaceDataParameter.Parameters.AddRange(new List<object> { chartData });
                    var chartWorkspace = new ValidatingAwareWorkspace(null, ViewKeys.ChartView, workspaceDataParameter, chartData.ChartName, false);
                    Views.Add(chartWorkspace);
                }
            }
    
    public class ChartPoints : List<XYPoint>
        {
            public IList<DateTime> XData { get { return this.Select(x => x.X).ToArray();} }
            public IList<double> YData { get { return this.Select(x => x.Y).ToArray(); } }
            public int ChartId { get; set; }
            public string ChartName { get; set; }
        }
    
        public class XYPoint
        {
            public DateTime X { get; set; }
            public double Y { get; set; }
        }
    The ChartViewModel:
    private WorkspaceDataParameter<UIViewModelsBase> _parentWorkspaceDataParameter;
    
            protected override void OnViewLoaded()
            {
                var workspaceAware = (IWorkSpaceAware)ViewAwareStatus.View;
                _parentWorkspaceDataParameter = (WorkspaceDataParameter<UIViewModelsBase>)workspaceAware.WorkSpaceContextualData.DataValue;
    
                // Set default shared XAxis VisibleRange which multiple charts will bind to
                SharedXVisibleRange=new DateRange(DateTime.Now.AddMonths(-1), DateTime.Now);
                SetupOverviewChartViewModel();
    
            }
    
            private void SetupOverviewChartViewModel()
            {
                // Create a dataset on the ChartViewModel
                ChartData = new DataSeriesSet<DateTime, double>();
    
                // Add the data-series
                var dataSeries = ChartData.AddSeries();
                var xyData = _parentWorkspaceDataParameter.Parameters.FirstOrDefault();
    
                ChartName = (((ChartPoints) (xyData))).ChartName;
                // Append X,Y data
                dataSeries.Append((((ChartPoints)(xyData))).XData, (((ChartPoints)(xyData))).YData);
            }
    
            public void ViewSelectedItem(TimeLineItem userEvent)
            {
                //WindowTitle = userEvent.IsEditing ? "Edit User Event" : "Add User Event";
                var timeLineViewModel = new TimeLineViewModel(userEvent);
                UIVisualizerService.ShowDialog(PopupKeys.UserEventPopup, timeLineViewModel);
            }
    
            private static readonly PropertyChangedEventArgs ChartNameChangeArgs = ObservableHelper.CreateArgs<ChartViewModel>(x => x.ChartName);
            private string _chartName;
            public string ChartName
            {
                get { return _chartName; }
                set
                {
                    _chartName = value;
                    NotifyPropertyChanged(ChartNameChangeArgs);
                }
            }
    
            private readonly static PropertyChangedEventArgs ChartDataChangeArgs = ObservableHelper.CreateArgs<ChartViewModel>(x => x.ChartData);
            private IDataSeriesSet<DateTime, double> _chartData;
            public IDataSeriesSet<DateTime, double> ChartData
            {
                get { return _chartData; }
                set
                {
                    _chartData = value;
                    NotifyPropertyChanged(ChartDataChangeArgs);
                }
            }
    
            private readonly static PropertyChangedEventArgs SharedXVisibleRangeChangeArgs = ObservableHelper.CreateArgs<ChartViewModel>(x => x.SharedXVisibleRange);
            private DateRange _sharedXVisibleRange;
            public DateRange SharedXVisibleRange
            {
                get { return _sharedXVisibleRange; }
                set
                {
                    if (_sharedXVisibleRange == value) return;
                    _sharedXVisibleRange = value;
                    NotifyPropertyChanged(SharedXVisibleRangeChangeArgs);
                }
            }
    The ChartView.xaml:
     <UserControl.Resources>
            <converters:ToStringConverter x:Key="toStringConverterConverter" />
        </UserControl.Resources>
        <Grid>
            <SciChart:SciChartSurface x:Name="sciChartSurface"
                                      Padding="0" MouseLeftButtonDown="OnSciChartMouseLeftButtonDown"
                                      DataSet="{Binding ChartData}" 
                                      SciChart:ThemeManager.Theme="Chrome" 
                                      HorizontalContentAlignment="Stretch" 
                                      VerticalContentAlignment="Stretch"
                                      MouseLeave="OnSciChartMouseLeave" 
                                      MouseEnter="OnSciChartMouseEnter">
                <SciChart:SciChartSurface.RenderableSeries>
                    <SciChart:FastLineRenderableSeries SeriesColor="Red"/>
                </SciChart:SciChartSurface.RenderableSeries>
    
                <!--  Declare Axes  -->
                <SciChart:SciChartSurface.YAxis>
                    <SciChart:NumericAxis Margin="0 0 0 0" AxisTitle="{Binding ChartName}" AxisAlignment="Left"  FontSize="10" TitleFontSize="10">
                        <SciChart:NumericAxis.GrowBy>
                            <SciChart:DoubleRange Min="0.1" Max="0.1"/>
                        </SciChart:NumericAxis.GrowBy>
                    </SciChart:NumericAxis>
                </SciChart:SciChartSurface.YAxis>
                <SciChart:SciChartSurface.XAxis>
                    <SciChart:DateTimeAxis AxisTitle="Time" VisibleRange="{Binding SharedXVisibleRange, Mode=TwoWay}" Margin="0 0 0 0" FontSize="10" TitleFontSize="10" 
                                           DrawMajorGridLines="True"
                                           DrawMinorGridLines="True"  
                                           TextFormatting="HH:mm MMM dd" 
                                           SubDayTextFormatting="HH:mm:ss MMM dd">
                        <SciChart:DateTimeAxis.GrowBy>
                            <SciChart:DoubleRange Min="0.1" Max="0.1"/>
                        </SciChart:DateTimeAxis.GrowBy>
                    </SciChart:DateTimeAxis>
                </SciChart:SciChartSurface.XAxis>
    
                <!--  Declare ChartModifiers  -->
                <SciChart:SciChartSurface.ChartModifier>
                    <SciChart:ModifierGroup Margin="0 0 0 0" FontSize="8">
                        <SciChart:ModifierGroup SciChart:MouseManager.MouseEventGroup="myCustomGroup">
                            <SciChart:RubberBandXyZoomModifier IsEnabled="True"
                                                    IsXAxisOnly="True" 
                                                    ReceiveHandledEvents="True" />
                            <SciChart:ZoomPanModifier IsEnabled="False"/>
                            <SciChart:MouseWheelZoomModifier IsEnabled="False"/>
                            <SciChart:RolloverModifier x:Name="rolloverModifier" 
                                                       IsEnabled="True" 
                                                       ReceiveHandledEvents="True"/>
                            <SciChart:CursorModifier IsEnabled="False" ReceiveHandledEvents="True"/>
                            <SciChart:YAxisDragModifier/>
                            <SciChart:XAxisDragModifier/>
                            <SciChart:ZoomExtentsModifier/>
                        </SciChart:ModifierGroup>
                    </SciChart:ModifierGroup>
                </SciChart:SciChartSurface.ChartModifier>
            </SciChart:SciChartSurface>
    
            <Border Grid.Row="1"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    Background="#77FFFFFF"
                    BorderBrush="#55000000"
                    BorderThickness="2">
                <ItemsControl x:Name="rolloverLegend"
                              DataContext="{Binding ElementName=rolloverModifier}" 
                              ItemsSource="{Binding RolloverData.SeriesInfo}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Row="0" Grid.Column="0"
                                           FontSize="12"
                                           FontWeight="Bold"
                                           Foreground="Black"
                                           Text="Y Axis:"/>
                                <TextBlock Grid.Row="0" Grid.Column="1"
                                           FontSize="12"
                                           FontWeight="Normal"
                                           Foreground="Red"
                                           Text="{Binding  YValue, Converter={StaticResource toStringConverterConverter}}" />
                                <TextBlock Grid.Row="1" Grid.Column="0"
                                           FontSize="12"
                                           FontWeight="Bold"
                                           Foreground="Black"
                                           Text="DateTime:"/>
                                <TextBlock Grid.Row="1" Grid.Column="1"
                                           FontSize="12"
                                           FontWeight="Normal"
                                           Foreground="Red"
                                           Text="{Binding  XValue, Converter={StaticResource toStringConverterConverter}}" />
                            </Grid>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Border>
    
        </Grid>
    
    the ChartView.xaml.cs:
    public ChartView()
            {
                InitializeComponent();
                this.Loaded += MultiChartMouseEvents_Loaded;
            }
    
            #region IWorkSpaceAware Members
    
            /// <summary>
            /// WorkSpaceContextualData Dependency Property
            /// </summary>
            public static readonly DependencyProperty WorkSpaceContextualDataProperty = DependencyProperty.Register("WorkSpaceContextualData", typeof(object), typeof(ChartView),
                    new FrameworkPropertyMetadata((WorkspaceData)null));
    
            /// <summary>
            /// Gets or sets the WorkSpaceContextualData property.  
            /// </summary>
            public WorkspaceData WorkSpaceContextualData
            {
                get { return (WorkspaceData)GetValue(WorkSpaceContextualDataProperty); }
                set { SetValue(WorkSpaceContextualDataProperty, value); }
            }
    
            #endregion
    
            private void OnSciChartMouseLeave(object sender, EventArgs e)
            {
                rolloverLegend.Visibility = Visibility.Collapsed;
            }
            private void OnSciChartMouseEnter(object sender, EventArgs e)
            {
                rolloverLegend.Visibility = Visibility.Visible;
            }
    
            void MultiChartMouseEvents_Loaded(object sender, RoutedEventArgs e)
            {
                sciChartSurface.AnimateZoomExtents(TimeSpan.FromMilliseconds(1000));
            }
    
    
            private void OnSciChartMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                if (e.ClickCount == 2)
                {
                    var chartWidth = sciChartSurface.ActualWidth;
                    var ticks = (((DateTime)(((sciChartSurface.XAxis).VisibleRange).Max)) - ((DateTime)(((sciChartSurface.XAxis).VisibleRange).Min))).Ticks;
                    var ticksPerPixel = ticks / chartWidth;
    
                    var dateClickedInTicks = ((DateTime)(((sciChartSurface.XAxis).VisibleRange).Min)).Ticks +
                                                ticksPerPixel * e.GetPosition(sciChartSurface).X;
    
                    var dateClicked = new DateTime((long)dateClickedInTicks);
    
                    var vm = DataContext as ChartViewModel;
                    var newItem = new TimeLineItem { Date = dateClicked };
                    newItem.IsEditing = false;
                    if (vm != null) vm.ViewSelectedItem(newItem);
                }
            }
        }
    }
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.