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!

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.