How to make changes on LineChart

Question

I tried below and it is not working.

<Charting:LineSeries Title="Line_1" Margin="0" 
FontSize="30" Tapped="LineSeries_Tapped" 
FontWeight="SemiBold"   BorderBrush="Red"  
IndependentValuePath="interval" 
DependentValuePath="size" IsSelectionEnabled="True">

 </Charting:Chart>

How to

1) change the fontsize for the IndependentValuePath and DependentValuePath? The above is not working.
2) Change the color of the IndependentValuePath and DependentValuePath? The above is not working.
3) How to get the value of the IndependentValuePath and DependentValuePath when the line or point of line chart is touched?

------- Edit_2

I combine both styles you have provided:

<Charting:Chart 
x:Name="LineChart" Grid.Column="1" FontSize="16" VerticalAlignment="Top" 
HorizontalAlignment="Left" Margin="94,27,0,0" 
FontWeight="SemiBold"  Width="651" Height="506">

<Charting:LineSeries 
Title="Station1" Margin="0" FontSize="16" Foreground="Blue" FontWeight="SemiBold" IndependentValuePath="Q_interval" DependentValuePath="Q_size" IsSelectionEnabled="True">

<Charting:LineSeries.Style>

(1)
  <Style TargetType="Charting:LineSeries">

      <Setter Property="IsTabStop" Value="False" />
      <Setter Property="PolylineStyle">
          <Setter.Value>
             <Style TargetType="Polyline">
             <Setter Property="StrokeThickness" Value="3" />
             <Setter Property="StrokeMiterLimit" Value="1" />
             </Style>
          </Setter.Value>
      </Setter>

      <Setter Property="Template">
         <Setter.Value>
         <ControlTemplate TargetType="Charting:LineSeries">
            <Canvas x:Name="PlotArea">
               <Polyline
                   Style="{TemplateBinding PolylineStyle}"
                            Stroke="Blue"
                            Points="{TemplateBinding Points}" />
             </Canvas>
         </ControlTemplate>
        </Setter.Value>
      </Setter>
   </Style>                    
</Charting:LineSeries.Style>

(2)

<Charting:LineSeries.DataPointStyle>                        
<Style TargetType="Charting:LineDataPoint">                            
    <Setter Property="Width" Value="20" />
    <Setter Property="Height" Value="20" />
    <Setter Property="Background" Value="Blue"/>
    <Setter Property="FontWeight" Value="SemiBold"/>
 </Style>
</Charting:LineSeries.DataPointStyle>

</Charting:LineSeries>              

</Charting:Chart>

with (1) and (2) I got the Dot and the stroke.

Thanks

Sunteen Wu · Accepted Answer · 2016-09-12T05:22:04.367

Firstly, for LineSeries element, the two properties you want to change style are DependentValueBinding and IndependentValueBinding.

1) change the fontsize for the IndependentValuePath and DependentValuePath? The above is not working.

For IndependentValueBinding property's style, it is defined by LineSeries parent element Chart, so directly set the fontsize property for the LineSeris element will take no effect. Set the Fontsize for the chart element will work.

<charting:Chart
   x:Name="LineChart"
   Title="Line Chart"
   Margin="70,0" 
   FontSize="30">

For DependentValueBinding property, it is actually a PolyLine, doesn't have FontSize property.

2) Change the color of the IndependentValuePath and DependentValuePath? The above is not working.

For the color of IndependentValueBinding, it is same with fontsize property, just set Foreground property for the Chart element. For the color of DependentValueBinding, it should change the color of PolyLine which is in ControlTemplate of LineSeries. Change the Stroke property of PolyLine will work.

<charting:LineSeries.Style>
    <Style TargetType="charting:LineSeries">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="PolylineStyle">
            <Setter.Value>
                <Style TargetType="Polyline">
                    <Setter Property="StrokeThickness" Value="10" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="charting:LineSeries">
                    <Canvas x:Name="PlotArea">
                        <Polyline
                            Style="{TemplateBinding PolylineStyle}"
                            Stroke="Red"
                            Points="{TemplateBinding Points}" />
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</charting:LineSeries.Style>

3) How to get the value of the IndependentValuePath and DependentValuePath when the line or point of line chart is touched?

In the tapped event, get the selected item and get the value you bind to the IndependentValueBinding and DependentValueBinding properties.

if (line1.SelectedItem != null)
{
    NameValueItem seleteditem = line1.SelectedItem as NameValueItem;
    System.Diagnostics.Debug.WriteLine(seleteditem.Name);
    System.Diagnostics.Debug.WriteLine(seleteditem.Value);
}

Here is the complete code contain features you want above, please try to set the properties as I mentioned above.

Xaml Code

<charting:Chart
    x:Name="LineChart"
    Title="Line Chart"
    Margin="70,0"
    Foreground="Red"
    FontSize="30">
    <charting:LineSeries
        x:Name="line1"
        Title="Population in 2005"
        DependentValueBinding="{Binding Value}"
        IndependentValueBinding="{Binding Name}"
        IsSelectionEnabled="True"
        Tapped="LineSeries_Tapped">
        <charting:LineSeries.Style>
            <Style TargetType="charting:LineSeries">
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="PolylineStyle">
                    <Setter.Value>
                        <Style TargetType="Polyline">
                            <Setter Property="StrokeThickness" Value="10" />
                            <Setter Property="StrokeMiterLimit" Value="1" />
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="charting:LineSeries">
                            <Canvas x:Name="PlotArea">
                                <Polyline
                                    Style="{TemplateBinding PolylineStyle}"
                                    Stroke="Red"
                                    Points="{TemplateBinding Points}" />
                            </Canvas>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </charting:LineSeries.Style>
    </charting:LineSeries>     
</charting:Chart>

Code behind

public sealed partial class MainPage : Page
{
    private Random _random = new Random();
    public MainPage()
    {
        this.InitializeComponent();
        var items1 = new List<NameValueItem>();
        var items2 = new List<NameValueItem>();
        var items3 = new List<NameValueItem>();
        for (int i = 0; i < 3; i++)
        {
            items1.Add(new NameValueItem { Name = "Name" + i, Value = _random.Next(10, 100) });   
        }
        this.RunIfSelected(this.LineChart, () => ((LineSeries)this.LineChart.Series[0]).ItemsSource = items1);     

    }


    private void RunIfSelected(UIElement element, Action action)
    {
        action.Invoke();
    }

    private void LineSeries_Tapped(object sender, TappedRoutedEventArgs e)
    {
        if (line1.SelectedItem != null)
        {
            NameValueItem seleteditem = line1.SelectedItem as NameValueItem;
            System.Diagnostics.Debug.WriteLine(seleteditem.Name);
            System.Diagnostics.Debug.WriteLine(seleteditem.Value);
        }

    }
}
public class NameValueItem
{
    public string Name { get; set; }
    public int Value { get; set; }
}

Sorry did not response sooner. I will try it out and get back here. UWP is awesome. I need to work hard on it. — MilkBottle, Sep 07 '16 at 11:47
Please look at my new edit_2. What seems to be the problem in new Chart? How to use the style in my Chart in your New Chart? — MilkBottle, Sep 12 '16 at 04:28
I create another thread to avoid confusion on the same subject but different issue. Hope you can take a look at it here: http://stackoverflow.com/questions/39443609/how-to-handle-line-chart-that-keep-expanding-in-both-independent-and-dependentva — MilkBottle, Sep 12 '16 at 05:06
I updated my answer, please just test my completed code. The `FontSize=30` is what you want. I will look into your new thread. Please ensure you have resolved this thread. — Sunteen Wu, Sep 12 '16 at 05:24
This refer to Y-axis. I want the x-axis fontsize bigger. This refer to the line or stroke size. I want the Point or BreakPoint represented by a DOT. I want this DOT bigger. Thanks — MilkBottle, Sep 12 '16 at 06:54
The fontsize of chart can change the Y axix as well as X axis. The style of Datapoints can be changed by DataPointStyle, for this I will give you a new reply since comment cannot show the code. — Sunteen Wu, Sep 12 '16 at 07:16
Somehow, the FontSize of chart cannot change the fontsize for x-axis. I set 30, the Y axis get very Big but nothing happen to x axis.The above Edit_2 is the one i used. I will mark it solved. But hope you can find out what I did wrong so I dont repeat this question again. Thanks — MilkBottle, Sep 12 '16 at 07:53
OK, in that case, I need a screenshot about the x axis don't change. Let's end up this thread and go to the new thread you created. I uploaded a demo to github in your new thread. If conveniently please download my demo and try to reproduce the only remain issue about x axis in my demo and updated the demo. — Sunteen Wu, Sep 12 '16 at 08:02

score 0 · Answer 2 · answered Sep 12 '16 at 07:19

For make the point bigger, you can update the LineDataPoint style as follows. Change the Width and Height property will work. The Width and Height defined properties of the Ellipse in the control template.

<charting:Chart
        x:Name="LineChart"
        Title="Line Chart"
        Margin="70,0"
        Foreground="Red"
        FontSize="10">
        <charting:LineSeries
            x:Name="line1"
            Title="Population in 2005"
            DependentValueBinding="{Binding Value}"
            IndependentValueBinding="{Binding Name}"
            IsSelectionEnabled="True"
            Tapped="LineSeries_Tapped" >
            <charting:LineSeries.DataPointStyle>
                <Style TargetType="charting:LineDataPoint"> 
                    <Setter Property="Width" Value="20" />
                    <Setter Property="Height" Value="20" />                      
                </Style>
            </charting:LineSeries.DataPointStyle>
        </charting:LineSeries>
    </charting:Chart>

How to make changes on LineChart

2 Answers2