I am plotting some simple line series on an oxyplot chart, using WPF. When I click on a point on a line series the colour of the tooltip is a horrible green and the crosshair colour is black. I would like to change these.
<oxy:Plot x:Name="SliceStatsChart" Title="Slice Stats">
<oxy:Plot.Series>
<oxy:LineSeries Title="MaxV"/>
<oxy:LineSeries Title="MinV"/>
<oxy:LineSeries Title="AvgV"/>
<oxy:LineSeries Title="StdDev"/>
</oxy:Plot.Series>
<oxy:Plot.Axes>
<oxy:LinearAxis Position="Left" TicklineColor="White" Title= "Log10(V)"/>
<oxy:LinearAxis Position="Bottom" TicklineColor="White" Title= "Slice No"/>
</oxy:Plot.Axes>
Please could someone advice me how to modify the colours.
Thanks.
The cursor is named "Tracker" in OxyPlot. It's appearance can be modified by editing the DefaultTrackerTemplate. This example modifies the tracker control's background color and the color of the crosshair lines but of course there are much more ways to customize it:
<oxy:Plot x:Name="SliceStatsChart" Title="Slice Stats">
<oxy:PlotView.DefaultTrackerTemplate>
<ControlTemplate>
<oxy:TrackerControl Position="{Binding Position}" LineStroke="Red" Background="GhostWhite">
<oxy:TrackerControl.Content>
<TextBlock Text="{Binding}" Margin="5" />
</oxy:TrackerControl.Content>
</oxy:TrackerControl>
</ControlTemplate>
</oxy:PlotView.DefaultTrackerTemplate>
<oxy:Plot.Series>
<oxy:LineSeries Title="MaxV"/>
<oxy:LineSeries Title="MinV"/>
<oxy:LineSeries Title="AvgV"/>
<oxy:LineSeries Title="StdDev"/>
</oxy:Plot.Series>
<oxy:Plot.Axes>
<oxy:LinearAxis Position="Left" TicklineColor="White" Title="Log10(V)"/>
<oxy:LinearAxis Position="Bottom" TicklineColor="White" Title= "Slice No"/>
</oxy:Plot.Axes>
</oxy:Plot>
Related
I have a WPF-LiveChart(lvcharts.net) PieSeries Chart but it contains a white border .How can i Remove those white background .please see the Code
<lvc:PieChart Visibility="Visible" Name="TestCaseChart" Grid.Row="0" Grid.Column="1" Series="{Binding SeriesCollection}" InnerRadius="100" Width="180" Height="180" BorderThickness="0" BorderBrush="Transparent"></lvc:PieChart>
I tried the BorderBrush and BorderThickness properties but the Chart is not taking those properties.Basically my Screen background is black so it is awkward to see the white background on these charts series .
try this:
<lvc:PieChart LegendLocation="Bottom" DataClick="Chart_OnDataClick" Hoverable="False" DataTooltip="{x:Null}" ScrollBarFill="{x:Null}">
<lvc:PieChart.Series>
<lvc:PieSeries Title="Maria" Values="13" DataLabels="True"
LabelPoint="{Binding PointLabel}" Stroke="{x:Null}" StrokeThickness="0"/>
<lvc:PieSeries Title="Charles" Values="4" DataLabels="True"
LabelPoint="{Binding PointLabel}" Foreground="{x:Null}" Stroke="{x:Null}" StrokeThickness="0"/>
<lvc:PieSeries Title="Frida" Values="6" DataLabels="True"
LabelPoint="{Binding PointLabel}" Foreground="{x:Null}" Stroke="{x:Null}" StrokeThickness="0"/>
<lvc:PieSeries Title="Frederic" Values="2" DataLabels="True"
LabelPoint="{Binding PointLabel}" Foreground="{x:Null}" Stroke="{x:Null}" StrokeThickness="0"/>
</lvc:PieChart.Series>
</lvc:PieChart>
If I change the stringformat of axis, it works for the axis (see the black circle of the picture). But how can I change the stringformat of the track value (the red circle)?
I'd like to answer my own question based on Ramin's hint to me.
I dug into the source code a little bit, and found out there is a TrackerFormatString that I can change:
<oxy:LineSeries TrackerFormatString="{}{0}
{1}: {2:0.0}
{3}: {4:0.0}"/>
Please note the
in my code, that how a newline char is input in XAML.
Please also note the {} in the very beginning, that's kind of escape char in XAML.
if in c#, it's just:
{0}\n{1}: {2:0.0}\n{3}: {4:0.0}
You should set DefaultTrackerTemplate. Here a small example that shows you the way:
<Grid>
<oxy:Plot Title="AAA">
<oxy:Plot.Axes>
<oxy:LinearAxis Position="Left" Title="Left: " />
<oxy:LinearAxis Position="Bottom" Title="Bottom: " />
</oxy:Plot.Axes>
<oxy:Plot.Series>
<oxy:LineSeries x:Name="ls" ItemsSource="{Binding Points}"/>
</oxy:Plot.Series>
<oxy:Plot.DefaultTrackerTemplate>
<ControlTemplate>
<oxy:TrackerControl Position="{Binding Position}"
BorderThickness="1">
<oxy:TrackerControl.Content>
<StackPanel >
<DockPanel>
<TextBlock Text="{Binding XAxis.Title}" Foreground="Red" />
<TextBlock DockPanel.Dock="Right" Text="{Binding DataPoint.X}" Foreground="Red" />
</DockPanel>
<DockPanel>
<TextBlock Text="{Binding YAxis.Title}" Foreground="Green" />
<TextBlock DockPanel.Dock="Right" Text="{Binding DataPoint.Y}" Foreground="Green"
FontWeight="Bold" />
</DockPanel>
</StackPanel>
</oxy:TrackerControl.Content>
</oxy:TrackerControl>
</ControlTemplate>
</oxy:Plot.DefaultTrackerTemplate>
</oxy:Plot>
</Grid>
Hope it helps.
How i can fill grid when it is inside DataControlDetailDescriptor in devexpress in wpf
and what is itemsSourcePathand which value should i assign to this ItemsSourcePath.
dxg:DataControlDetailDescriptor ItemsSourcePath="AccessProfiles".
<dxg:GridControl AutoPopulateColumns="True" HorizontalAlignment="Left" Margin="-9,52,0,0" Name="gridControl1" VerticalAlignment="Top" Height="415" Width="623" MasterRowExpanding="gridControl1_MasterRowExpanding" AutoExpandAllGroups="True" >
<!--ItemsSource="{Binding Path=Bindd, Mode=OneWay}"-->
<dxg:GridControl.View>
<dxg:TableView Name="tableView1" ShowTotalSummary="True" />
</dxg:GridControl.View>
<dxg:GridControl.DetailDescriptor>
<dxg:DataControlDetailDescriptor x:Name="detail1" ItemsSourceBinding="{Binding Path=Bindd, Converter={StaticResource AlternationConverter1}}">
<dxg:DataControlDetailDescriptor.DataControl>
<dxg:GridControl Name="detailGrid" AutoPopulateColumns="True" >
<dxg:GridControl.View >
<dxg:TableView NavigationStyle="Row" ShowGroupPanel="False" ShowTotalSummary="True" />
</dxg:GridControl.View>
</dxg:GridControl>
</dxg:DataControlDetailDescriptor.DataControl>
</dxg:DataControlDetailDescriptor>
</dxg:GridControl.DetailDescriptor>
</dxg:GridControl>
I believe you should check the DataControlDetailDescriptor class documentation at first.
The DataControlDetailDescriptor.ItemsSourcePath property is also completely described with it's help-reference.
Related example: Create details with a grid and custom content and put them in a tabbed container
I'm using the chart control from the WPF Toolkit. How can I set the interval of the X axis?
I have the following XAML code:
<Grid Height="800">
<chartingToolkit:Chart Name="lineChart" Title="Pressure over Time"
VerticalAlignment="Top" Margin="20,50,20,0" Height="500">
<chartingToolkit:Chart.Axes>
<chartingToolkit:LinearAxis Title="Pressure" Orientation="Y" Interval="100" />
<chartingToolkit:LinearAxis Title="Time" Orientation="X" Interval="100" />
</chartingToolkit:Chart.Axes>
<chartingToolkit:LineSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" Name="Test"
IsSelectionEnabled="True" ClipToBounds="False">
</chartingToolkit:LineSeries>
</chartingToolkit:Chart>
<Button Width="100" Height="24" Margin="20,556,1058,220" Content="More" Name="Button1" />
</Grid>
The Y Axis works fine, it shows the interval of 100 but the X axis puts itself on the top (please see the added image) and the interval is the exact amounts of points. Why doesnt it listen to the Interval="100" property in the xaml? And why doesn't it place itself on the bottom?
For the location of the linearAxis, you can set the Location property to "Bottom"
in code:
<chartingToolkit:LinearAxis Title="Time" Orientation="X" Interval="100"
Location="Bottom" />
For the interval problem, i don't know...
Basically I have a chart with multiple bar series. The independent value for all the series are the same. So the chart's xaxes are rendered with stacked of same independent values.
If I want to make all series (except for the first one) xaxes' labels to not visible, how can i do that in the xaml declaration?
Can anyone please give me assistance on this?
Update:
I have come across example with the following code:
<toolkit:Chart x:Name="myChart" Width="600" Height="400">
<toolkit:LineSeries
Title="Tasks"
ItemsSource="{Binding}"
IndependentValueBinding="{Binding Month}"
DependentValueBinding="{Binding Task}">
</toolkit:LineSeries>
<toolkit:LineSeries
Title="Benefits"
ItemsSource="{Binding}"
IndependentValueBinding="{Binding Month}"
DependentValueBinding="{Binding Benefits}">
</toolkit:LineSeries>
<toolkit:Chart.Axes>
<toolkit:LinearAxis Orientation="Y" Location="Left" Title="First" />
<toolkit:LinearAxis Orientation="Y" Location="Right" Title="Second" />
</toolkit:Chart.Axes>
</toolkit:Chart>
If you plot the above code, you will see that both series will base the Y values from the left one. How can we change it so that first series will be plotted against Y values on the left and second series to be plotted against Y values on the right.
is that possible?
Thanks.
I think you can achieve what you want using the DependentRangeAxis properties of the LineSeries objects.
First, give each Y-axis an x:Name, for example TaskAxis and BenefitsAxis.
Then, you can tell a LineSeries to use an axis by adding to it the property
DependentRangeAxis="{Binding ElementName=TaskAxis}"
or
DependentRangeAxis="{Binding ElementName=BenefitsAxis}"
as appropriate.
The full XAML of the chart then becomes
<toolkit:Chart x:Name="myChart" Width="600" Height="400">
<toolkit:LineSeries
Title="Tasks"
ItemsSource="{Binding Path=Data1}"
IndependentValueBinding="{Binding Month}"
DependentValueBinding="{Binding Task}"
DependentRangeAxis="{Binding ElementName=TaskAxis}">
</toolkit:LineSeries>
<toolkit:LineSeries
Title="Benefits"
ItemsSource="{Binding Path=Data1}"
IndependentValueBinding="{Binding Month}"
DependentValueBinding="{Binding Benefits}"
DependentRangeAxis="{Binding ElementName=BenefitsAxis}">
</toolkit:LineSeries>
<toolkit:Chart.Axes>
<toolkit:LinearAxis Orientation="Y" Location="Left" Title="First" x:Name="TaskAxis" />
<toolkit:LinearAxis Orientation="Y" Location="Right" Title="Second" x:Name="BenefitsAxis" />
</toolkit:Chart.Axes>
</toolkit:Chart>
Another approach is to move the Axis objects inside the LineSeries. A demonstration of how to do this can be found here.