1. Home
  2. Forum
  3. Blazor
  4. Syncfusion Blazor BarChart with LineChart

Syncfusion Blazor BarChart with LineChart

Hello,

I am using Syncfusion Blazor Bar Chart. I got below requirement for clubbing a Bar chart with line as below. Is there a way to do this? Any leads?



10 Replies 1 reply marked as answer
DG Durga Gopalakrishnan Syncfusion Team May 26, 2021 12:49 PM UTC

Hi Jaish, 
 
Greetings from Syncfusion. 
 
Your requirement can be achieved using column series and line series in the chart. We have also prepared a sample for your reference. Please find the sample, code snippet and screenshot below. 
 
 
Code Snippet: 
 
// add your additional code here 
 
<SfChart Title="Hyaat Place Cedar Park 17-4-006" > 
    <ChartPrimaryYAxis LabelFormat="${value}"> 
    </ChartPrimaryYAxis> 
    <ChartSeriesCollection> 
        <ChartSeries DataSource="@ChartPoints" Fill="#3864c6" XName="Country" YName="GoldMedal" Type="ChartSeriesType.Column"> 
        </ChartSeries> 
        <ChartSeries DataSource="@ChartPoints"  Fill="#85dba0" XName="Country" YName="SilverMedal" Type="ChartSeriesType.Column"> 
        </ChartSeries> 
        <ChartSeries DataSource="@ChartPoints" Fill="#837fca" Width="3" XName="Country" YName="BronzeMedal" Type="ChartSeriesType.Line"> 
            <ChartMarker Visible="true" Width="5" Height="5" Fill="#837fca"> 
            </ChartMarker> 
        </ChartSeries> 
    </ChartSeriesCollection> 
</SfChart> 
 
// add your additional code here 
 
 
Screenshot: 
 
 
Let us know if you have any concerns. 
 
Regards, 
Durga G

JM Jaish Mathews May 26, 2021 04:19 PM UTC

That's great. I was looking for this graph. 
A small adjustment needed for values mapped to line diagram. Currently it has been mapped with Y axis dollar values. But we need an additional axis on right side showing % values. The line diagram values should map with that additional axis values. X axis can keep dates and no change there. Is there a support for this additional axis?

A sample diagram shows below



JM Jaish Mathews May 27, 2021 03:03 AM UTC

I could able to achieve this by below code using "ChartAxes". Only issue is that, for new axis, value "0" isn't intersect with X axis. It's somewhere in middle. I have negative values also in new axis? Is there a way to fix it so that value 0 always intersect with X axis. My code has pasted as well.


<SfChart Title="Hyaat Place Cedar Park 17-4-006" Theme="@Theme">
<ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1">
@*<ChartAxisLabelStyle Color="transparent"></ChartAxisLabelStyle>*@
<ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
<ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
<ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis Interval="1000000" LabelFormat="${value}">
<ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
<ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
</ChartPrimaryYAxis>
<ChartAxes>
<ChartAxis OpposedPosition="true" RowIndex="0" Name="yAxis2" LabelFormat="{value}%" Interval="10"  >
@*<ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
<ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>*@
<ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
<ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
</ChartAxis>
</ChartAxes>
<ChartSeriesCollection>
<ChartSeries DataSource="@ChartPoints" Fill="#85dba0" XName="BillDate" YName="ContractPrice" Name="ContractPrice" Type="ChartSeriesType.Column">
<ChartMarker>
<ChartDataLabel Visible="false" Position="LabelPosition.Top">
<ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
</ChartDataLabel>
</ChartMarker>
</ChartSeries>
<ChartSeries DataSource="@ChartPoints" Fill="#3864c6" XName="BillDate" YName="OverUnderBilling" Name="OverUnderBilling" Type="ChartSeriesType.Column">
<ChartMarker>
<ChartDataLabel Visible="false" Position="LabelPosition.Top">
<ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
</ChartDataLabel>
</ChartMarker>
</ChartSeries>
<ChartSeries DataSource="@ChartPoints" Fill="#837fca" Width="3" XName="BillDate"  YName="Profit" Name="Profit" YAxisName="yAxis2" Type="ChartSeriesType.Line">
<ChartMarker Visible="true" Width="5" Height="5" Fill="#837fca">
<ChartDataLabel Visible="false" Position="LabelPosition.Top">
<ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
</ChartDataLabel>
</ChartMarker>
</ChartSeries>
</ChartSeriesCollection>
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>
</SfChart>

@code{
private Theme Theme { get; set; }
public List<ColumnChartData> ChartPoints { get; set; } = new List<ColumnChartData>
{
new ColumnChartData { BillDate = "03/31/2016", ContractPrice = 5800000, OverUnderBilling = 330000, Profit = 10},
new ColumnChartData { BillDate = "03/31/2017", ContractPrice = 4000000, OverUnderBilling = 496009, Profit = 15 },
new ColumnChartData { BillDate = "03/31/2018", ContractPrice = 4300000, OverUnderBilling = -556000, Profit = 20 },
new ColumnChartData { BillDate = "03/31/2019", ContractPrice = 4500000, OverUnderBilling = -506000, Profit = 28 },
new ColumnChartData { BillDate = "03/31/2020", ContractPrice = 5000000, OverUnderBilling = -516000, Profit = -20 }
};
protected override void OnInitialized()
{

}
public class ColumnChartData
{
public string BillDate { get; set; }
public double ContractPrice { get; set; }
public double OverUnderBilling { get; set; }
public int Profit { get; set; }
}
}



DG Durga Gopalakrishnan Syncfusion Team May 27, 2021 10:47 AM UTC

Hi Jaish, 

We suggest you to specify the Minimum and Maximum range for both axis based on provided data points. We have modified sample and attached for your reference.  

<SfChart> 
    <ChartPrimaryYAxis Minimum="-3000000" Interval="1000000" Maximum="7000000"></ChartPrimaryYAxis> 
    <ChartAxes> 
         <ChartAxis Minimum="-30" Maximum="70"Interval="10"></ChartAxis> 
    </ChartAxes> 
</SfChart> 

 


Please revert us if you have any concerns. 

Regards, 
Durga G

Marked as answer
JM Jaish Mathews May 27, 2021 11:03 AM UTC

Great!!! I think this done the job.

DG Durga Gopalakrishnan Syncfusion Team May 28, 2021 05:49 AM UTC

Hi Jaish, 

Thanks for an update. Please get back to us if you need any further assistance.  

Regards, 
Durga G  


JM Jaish Mathews June 1, 2021 09:16 AM UTC

Just now I met with a scenario that multiple charts to load dynamically agaist a set list of thier own data and we loop though this data list. Each Chart data has its own MAX and MIN values. In that case, dynamically set MIN, MAX and Interval woud be a huge task I hope. For e.g. a list of below collection list for 6 Charts. Each list has different MAX, MIN and Interval. I will loop through the list of below list. How to adjust each list of chart data MAX, MIN and Interval, to align the 0 across new y axis with others? Currently 



private static List ChartPoints1 { get; set; } = new List
{
new ColumnChartData { BillDate = "12/31/2016", ContractPrice = 5800000, OverUnderBilling = 330000, Profit = 10},
new ColumnChartData { BillDate = "12/31/2017", ContractPrice = 4000000, OverUnderBilling = 496009, Profit = 15 },
new ColumnChartData { BillDate = "12/31/2018", ContractPrice = 4300000, OverUnderBilling = -556000, Profit = 20 },
new ColumnChartData { BillDate = "12/31/2019", ContractPrice = 4500000, OverUnderBilling = -506000, Profit = 28 },
new ColumnChartData { BillDate = "03/31/2020", ContractPrice = 5000000, OverUnderBilling = -516000, Profit = -20 },
new ColumnChartData { BillDate = "06/30/2020", ContractPrice = 5000000, OverUnderBilling = -516000, Profit = -20 },
new ColumnChartData { BillDate = "09/30/2020", ContractPrice = 5000000, OverUnderBilling = -516000, Profit = -20 }

};
private static List ChartPoints2 { get; set; } = new List
{
new ColumnChartData { BillDate = "12/31/2016", ContractPrice = 7800000, OverUnderBilling = 330000, Profit = 10},
new ColumnChartData { BillDate = "12/31/2017", ContractPrice = 4000000, OverUnderBilling = 496009, Profit = -15 },
new ColumnChartData { BillDate = "12/31/2018", ContractPrice = 4300000, OverUnderBilling = -556000, Profit = 20 },
new ColumnChartData { BillDate = "12/31/2019", ContractPrice = 4500000, OverUnderBilling = -506000, Profit = 50 },
new ColumnChartData { BillDate = "03/31/2020", ContractPrice = 5000000, OverUnderBilling = -786000, Profit = 20 },
new ColumnChartData { BillDate = "06/30/2020", ContractPrice = 5000000, OverUnderBilling = -786000, Profit = 20 },
new ColumnChartData { BillDate = "09/30/2020", ContractPrice = 5000000, OverUnderBilling = -786000, Profit = 20 }

};

private static List ChartPoints3 { get; set; } = new List
{
new ColumnChartData { BillDate = "12/31/2016", ContractPrice = 7800000, OverUnderBilling = 330000, Profit = 10},
new ColumnChartData { BillDate = "12/31/2017", ContractPrice = 5000000, OverUnderBilling = 496009, Profit = 15 },
new ColumnChartData { BillDate = "12/31/2018", ContractPrice = 4300000, OverUnderBilling = -556000, Profit = 20 },
new ColumnChartData { BillDate = "12/31/2019", ContractPrice = 4500000, OverUnderBilling = -506000, Profit = -50 },
new ColumnChartData { BillDate = "03/31/2020", ContractPrice = 5000000, OverUnderBilling = -786000, Profit = -90 },
new ColumnChartData { BillDate = "06/30/2020", ContractPrice = 5000000, OverUnderBilling = -786000, Profit = -90 },
new ColumnChartData { BillDate = "09/30/2020", ContractPrice = 5000000, OverUnderBilling = -786000, Profit = -90 }

};

private static List ChartPoints4 { get; set; } = new List
{
new ColumnChartData { BillDate = "12/31/2016", ContractPrice = 7325000 , OverUnderBilling = -262886, Profit = 10},
new ColumnChartData { BillDate = "12/31/2017", ContractPrice = 26440386, OverUnderBilling = 0, Profit = 15 }
};

private static List ChartPoints5 { get; set; } = new List
{
new ColumnChartData { BillDate = "12/31/2016", ContractPrice = 141913, OverUnderBilling = 12086, Profit = 10},
new ColumnChartData { BillDate = "12/31/2017", ContractPrice = 375040, OverUnderBilling = -8350, Profit = 15 },
new ColumnChartData { BillDate = "12/31/2018", ContractPrice = 354881, OverUnderBilling = 0, Profit = 15 }

};

private static List ChartPoints6 { get; set; } = new List
{
new ColumnChartData { BillDate = "12/31/2016", ContractPrice = 4530230 , OverUnderBilling = 74082, Profit = 10},
new ColumnChartData { BillDate = "12/31/2017", ContractPrice = 46446531 , OverUnderBilling = 0, Profit = 15 },
new ColumnChartData { BillDate = "12/31/2018", ContractPrice = 46446531, OverUnderBilling = 0, Profit = 15 }

};.



DG Durga Gopalakrishnan Syncfusion Team June 1, 2021 01:42 PM UTC

Hi Jaish, 

By default, when range(minimum, maximum and interval) is not specified, then y axis range will be calculated automatically based on provided data points and axis line height. When there are multiple series, each series has different data set, so we need to specify range for each axis based on data points to achieve your requirement. 

Regards, 
Durga G

JM Jaish Mathews June 3, 2021 05:36 AM UTC

OK. Is there any rule to follow for setting each Chart data MAX, MIN and Interval so that 2nd Y axis 0 value will be aligned with main X and Y axis 0? Just setting these values making the mentioned 0 value misaligned.

DG Durga Gopalakrishnan Syncfusion Team June 6, 2021 03:04 PM UTC

Hi Jaish, 

As of now, we don’t have any rule to specify the minimum, maximum and interval based on all axis. We request you to specify the ranges based on data points provided for each axis based on corresponding series. Please revert us if you have any concerns. 

Regards, 
Durga G

Loader.
Up arrow icon