Localization of the WPF Chart can be customized by using the CurrentUICulture property in the WPF Chart. You can change the language by assigning the culture name of the desired language to this property. Set CurrentUICulture to the application public MainWindow() { InitializeComponent(); System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo("fr-FR"); } Steps to localize based on CurrentUICulture using Resource files Create new folder, named as Resources in the application. Right-click on the Resources folder, select Add, and then click New Item. In the Add New Item dialog, select the Resource File option and name the file as Syncfusion.SfChart.WPF.<culture name>.resx. For example, name it as Syncfusion.SfChart.WPF.fr-FR.resx to add localization support for the French language. The culture name that indicates the name of language and country. Now, add the Name/Value pair in Resource Designer of Syncfusion.SfChart.WPF.fr-FR.resx file and change its corresponding value to the corresponding culture. The following image illustrates the WPF Chart successfully localized in French culture, showing the changes made according to the provided localization steps. For more details, please refer to the project on GitHub. Conclusion I hope you enjoyed learning how to localize labels in WPF Chart control. You can refer to our WPF Chart Feature Tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Chart Examples to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This article explains how to apply lazy loading to financial charts. Blazor Charts provides lazy loading support for financial charts such as Hilo, Hilo Open-Close, and Candle charts. Lazy loading enables the chart to load data on demand. The OnScrollChanged event is triggered by the chart, allowing us to retrieve the minimum and maximum axis ranges and then load the corresponding data into the chart. You can enable lazy loading for financial chart by setting the ChartSeries Type to Candle. The below code example demonstrates how to apply lazy loading for candle chart. @using Syncfusion.Blazor.Charts @using System.Collections.ObjectModel @if (StockDetails != null) { <SfChart Title="Lazy Loading Chart"> <ChartEvents OnScrollChanged="@ScrollChange"></ChartEvents> <ChartPrimaryXAxis> <ChartAxisScrollbarSettings Enable="true" PointsLength="1000"></ChartAxisScrollbarSettings> </ChartPrimaryXAxis> <ChartSeriesCollection> <ChartSeries DataSource="@StockDetails" XName="X" High="High" Low="Low" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Candle" Open="Open" Close="Close"> </ChartSeries> </ChartSeriesCollection> </SfChart> } else { <p>Chart Loading</p> } @code { int count = 1; Random random = new Random(); public ObservableCollection<Data> StockDetails; protected override void OnInitialized() { StockDetails = this.GetData(); } public void ScrollChange(ScrollEventArgs e) { this.StockDetails = GetRangeData(Convert.ToInt32(e.CurrentRange.Minimum), Convert.ToInt32(e.CurrentRange.Maximum)); this.StateHasChanged(); } public ObservableCollection<Data> GetRangeData(int min, int max) { ObservableCollection<Data> data = new ObservableCollection<Data>(); for (; min <= max; min++) { data.Add(new Data { X = min, Y= random.Next(10, 100), High = random.Next(150, 200), Low = random.Next(100, 150), Open = random.Next(100, 150), Close = random.Next(150, 200) }); } return data; } public ObservableCollection<Data> GetData() { ObservableCollection<Data> data = new ObservableCollection<Data>(); for (; count <= 100; count++) { data.Add(new Data { X = count, Y = random.Next(10, 100), High = random.Next(150, 200), Low = random.Next(100, 150), Open = random.Next(100, 150), Close = random.Next(150, 200) }); } return data; } public class Data { public double X { get; set; } public double Y { get; set; } public double High { get; set; } public double Low { get; set; } public double Open { get; set; } public double Close { get; set; } } } Output The following screenshot illustrates the output of the code snippet. Live Sample for LazyLoading Candle Chart
This article explains how to display volume data for financial chart in the React Chart. Customize to display volume data in the financial chart Step 1: First, initialize the datasource. financial-data.js exports.chartValues = [ { period: new Date('2012-04-02'), open: 85.9757, high: 90.6657, low: 85.7685, close: 90.5257, volume: 660187068 }, { period: new Date('2012-04-09'), open: 89.4471, high: 92, low: 86.2157, close: 86.4614, volume: 912634864 }, { period: new Date('2012-04-16'), open: 87.1514, high: 88.6071, low: 81.4885, close: 81.8543, volume: 1221746066 }, { period: new Date('2012-04-23'), open: 81.5157, high: 88.2857, low: 79.2857, close: 86.1428, volume: 965935749 }, { period: new Date('2012-04-30'), open: 85.4, high: 85.4857, low: 80.7385, close: 80.75, volume: 615249365 }, { period: new Date('2012-05-07'), open: 80.2143, high: 82.2685, low: 79.8185, close: 80.9585, volume: 541742692 }, { period: new Date('2012-05-14'), open: 80.3671, high: 81.0728, low: 74.5971, close: 75.7685, volume: 708126233 }, { period: new Date('2012-05-21'), open: 76.3571, high: 82.3571, low: 76.2928, close: 80.3271, volume: 682076215 }, { period: new Date('2012-05-28'), open: 81.5571, high: 83.0714, low: 80.0743, close: 80.1414, volume: 480059584 }, { period: new Date('2012-06-04'), open: 80.2143, high: 82.9405, low: 78.3571, close: 82.9028, volume: 517577005 }]; Step 2: Initialize the CandleSeries, ColumnSeries, and other required properties. Afterward, bind the volume data to the yName of the column series by using the yName property. Then map the other values such as high, low, open, and close of the CandleSeries to their respective high, low, open, and close properties. Index.js <ChartComponent id="charts" primaryXAxis={{ valueType: 'DateTime', crosshairTooltip: { enable: true }, majorGridLines: { width: 0 } }} primaryYAxis={{ title: 'Volume', labelFormat: '{value}M', opposedPosition: true, majorGridLines: { width: 1 }, lineStyle: { width: 0 } }} title="AAPL Historical"> <Inject services={[CandleSeries, Tooltip, DateTime, ColumnSeries]}/> <SeriesCollectionDirective> <SeriesDirective type="Column" dataSource={chartValues} animation={{ enable: true }} xName="period" yName="volume" enableTooltip={false} name="Volume" /> <SeriesDirective type="Candle" yAxisName="secondary" bearFillColor="#2ecd71" bullFillColor="#e74c3d" dataSource={chartValues} animation={{ enable: true }} xName="period" low="low" high="high" open="open" close="close" /> </SeriesCollectionDirective> </ChartComponent> Step 3: Initialize the secondary axis in the axes property, set opposedPosition to true, and provide a name for the axis for mapping with the series. <AxesDirective> <AxisDirective name="secondary" maximum={150} minimum={55} opposedPosition={true} /> </AxesDirective> Step 4: Then map the secondary axis to the candle series by using the yAxisName property. <SeriesDirective type="Candle" yAxisName="secondary" dataSource={chartValues} xName="period" low="low" high="high" open="open" close="close" /> The following screenshot portrays the results of the code snippet mentioned above. Screenshot: View Sample in Stackblitz Conclusion I hope you enjoyed learning how to display volume data for financial series in the React Chart Component. You can refer to our React Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Chart example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
In this article we explain how to display the volume data in financial chart using the Flutter SfCartesianChart widget. In our Flutter cartesian chart the volume data of the financial chart can be displayed using the ColumnSeries. Step 1: First, declare and initialize the chartData with the required data source. // Initialize the data source final List<ChartSampleData> chartData = <ChartSampleData>[ ChartSampleData( x: DateTime(2012,04,02), open: 85.9757, high: 90.6657, low: 85.7685, close: 90.5257, volume: 660187068 ), ChartSampleData( x: DateTime(2012,04,09), open: 89.4471, high: 92, low: 86.2157, close: 86.4614, volume: 912634864 ), ChartSampleData( x: DateTime(2012,04,16), open: 87.1514, high: 88.6071, low: 81.4885, close: 81.8543, volume: 1221746066 ), ChartSampleData( x: DateTime(2012,04,23), open: 81.5157, high: 88.2857, low: 79.2857, close: 86.1428, volume: 965935749 ), ChartSampleData( x: DateTime(2012,04,30), open: 85.4, high: 85.4857, low: 80.7385, close: 80.75, volume: 615249365 ), ChartSampleData( x: DateTime(2012,05,07), open: 80.2143, high: 82.2685, low: 79.8185, close: 80.9585, volume: 541742692 ), ChartSampleData( x: DateTime(2012,05,14), open: 80.3671, high: 81.0728, low: 74.5971, close: 75.7685, volume: 708126233 ), ChartSampleData( x: DateTime(2012,05,21), open: 76.3571, high: 82.3571, low: 76.2928, close: 80.3271, volume: 682076215 ), ChartSampleData( x: DateTime(2012,05,28), open: 81.5571, high: 83.0714, low: 80.0743, close: 80.1414, volume: 480059584 ), ChartSampleData( x: DateTime(2012,06,04), open: 80.2143, high: 82.9405, low: 78.3571, close: 82.9028, volume: 517577005 ) ]; class ChartSampleData { ChartSampleData( {this.x, this.open, this.high, this.low, this.close, this.volume}); final DateTime? x; final num? open; final num? high; final num? low; final num? close; final num? volume; } Step 2: Initialize the SfCartesianChart widget with CandleSeries, ColumnSeries and other required properties. Then bind the volume data to the yValueMapper of the column series and map the other values like high, low, open and close of the candle series to highValueMapper, lowValueMapper, openValueMapper and closeValueMapper respectively. SfCartesianChart( primaryXAxis: DateTimeAxis(), primaryYAxis: NumericAxis(initialVisibleMinimum: 50, initialVisibleMaximum: 100), series: <CartesianSeries<ChartSampleData, DateTime>>[ CandleSeries<ChartSampleData, DateTime>( dataSource: chartData, xValueMapper: (ChartSampleData data, _) => data.x, openValueMapper: (ChartSampleData data, _) => data.open, closeValueMapper: (ChartSampleData data, _) => data.close, highValueMapper: (ChartSampleData data, _) => data.high, lowValueMapper: (ChartSampleData data, _) => data.low), ColumnSeries<ChartSampleData, DateTime>( dataSource: chartData, xValueMapper: (ChartSampleData data, _) => data.x, yValueMapper: (ChartSampleData data, _) => data.volume) ], ) Step 3: Initialize the secondary axis in the axes property, set the opposedPosition as true and name the axis for mapping with the series. SfCartesianChart( axes: <ChartAxis>[ NumericAxis( name: 'Y-Axis', opposedPosition: true ) ], ) Step 4: Map the secondary axis to the column series by using the yAxisName property. SfCartesianChart( Series: <CartesianSeries<ChartSampleData, DateTime>>[ ColumnSeries<ChartSampleData, DateTime>( yAxisName: 'Y-Axis', // Other required properties ) ] ) View the Github Sample here.
In this article, we explain how to render a candlestick chart using Syncfusion® Flutter Cartesian Chart widget. Our Cartesian chart widget provides financial chart support. The candlestick provides information about the open, close, high and low price over a particular period. Here if the opening price is higher than the closing price, the candle is filled and if the closing is higher than the opening price, then candle is unfilled. The wick at top represents the highest price and the wick at lower represents the lowest price of a particular period. Follow these instructions to render a candlestick chart: Step 1: Initialize the required data source with x, open, high, low and close values. List<ChartSampleData> chartData = [ ChartSampleData( x: DateTime(2016, 01, 11), open: 98.97, high: 101.19, low: 95.36, close: 97.13), ChartSampleData( x: DateTime(2016, 01, 18), open: 98.41, high: 101.46, low: 93.42, close: 101.42), ChartSampleData( x: DateTime(2016, 01, 25), open: 101.52, high: 101.53, low: 92.39, close: 97.34), ChartSampleData( x: DateTime(2016, 02, 01), open: 96.47, high: 97.33, low: 93.69, close: 94.02), ChartSampleData( x: DateTime(2016, 02, 08), open: 93.13, high: 96.35, low: 92.59, close: 93.99), ChartSampleData( x: DateTime(2016, 02, 15), open: 95.02, high: 98.89, low: 94.61, close: 96.04), ChartSampleData( x: DateTime(2016, 02, 22), open: 96.31, high: 98.0237, low: 93.32, close: 96.91), ChartSampleData( x: DateTime(2016, 02, 29), open: 96.86, high: 103.75, low: 96.65, close: 103.01), ChartSampleData( x: DateTime(2016, 03, 07), open: 102.39, high: 102.83, low: 100.15, close: 102.26), ChartSampleData( x: DateTime(2016, 03, 16), open: 106.5, high: 106.5, low: 106.5, close: 106.5), ]; Step 2: Initialize the SfCartesianChart widget with the candle series and map the required parameters i.e xValueMapper, lowValueMapper, highValueMapper, openValueMapper, and closeValueMapper. SfCartesianChart( series: <CandleSeries<ChartSampleData, DateTime>>[ CandleSeries<ChartSampleData, DateTime>( dataSource: chartData, // To bind x value xValueMapper: (ChartSampleData sales, _) => sales.x, // To bind low value lowValueMapper: (ChartSampleData sales, _) => sales.low, // To bind high value highValueMapper: (ChartSampleData sales, _) => sales.high, // To bind open value openValueMapper: (ChartSampleData sales, _) => sales.open, // To bind close value closeValueMapper: (ChartSampleData sales, _) => sales.close ) ] ) To know more about candle chart, refer to the Syncfusion® Flutter Cartesian Charts user guide. Screenshot View the Github Sample here.
Financial Charts are a staple of analytical reports in the financial world. Financial data for stock price charts should include high, low, open, and close prices for a day. By default, Essential Chart fills a data point with red color when the close price is less than the open price value and fills with green color when the close price is higher than the open price. In general, red color data point indicates decrease in price and green color indicates increase in price. You can customize the default fill color used to indicate increase or decrease in price by using the properties, bearFillColor and bullFillColor. The color used in bearFillColor property represents increase in stock price and the bullFillColor property represents decrease in stock price. The following code example illustrates this. JS $("#container").ejChart({ series: [{ type: 'candle', points: [ { x: new Date(1950, 1, 12), high: 125, low: 70, open: 115, close: 90 }, { x: new Date(1953, 1, 12), high: 150, low: 60, open: 120, close: 70 }, { x: new Date(1956, 1, 12), high: 200, low: 140, open: 160, close: 190 }, { x: new Date(1959, 1, 12), high: 160, low: 90, open: 140, close: 110 }, { x: new Date(1962, 1, 12), high: 200, low: 100, open: 180, close: 120 }, { x: new Date(1965, 1, 12), high: 100, low: 45, open: 70, close: 50 }, { x: new Date(1968, 1, 12), high: 150, low: 70, open: 140, close: 130 } . . . . . . . . . . ], bearFillColor: 'blue', bullFillColor: 'brown' }], }); Chart before changing the bearFillColor and bullFillColor properties. Red color indicates decrease in price and green color indicates increase in price. Figure SEQ Figure \* ARABIC 1: Chart before changing the bearFillColor and bullFillColor properties Chart after changing the bearFillColor to blue and bullFillColor to brown. Brown color represents decrease in price and blue color represents increase in price. Figure SEQ Figure \* ARABIC 2: Chart after changing the bearFillColor and bullFillColor JS Playground sample link: BearFillColor and BullFillColor
Financial Charts are a staple of analytical reports in the financial world. Financial data for stock price charts should include high, low, open, and close prices for a day. By default, Essential Chart fills a data point with red color when the close price is less than the open price value and fills with green color when the close price is higher than the open price. In general, red color data point indicates decrease in price and green color indicates increase in price. You can customize the default fill color used to indicate increase or decrease in price by using the properties BearFillColor and BullFillColor. The color used in the BearFillColor property represents increase in stock price and the BullFillColor property represents decrease in stock price. The following code example illustrates this. CSHTML @(Html.EJ().Chart("container") .Series(ser=> ser.Type(SeriesType.Candle) .BearFillColor("blue") .BullFillColor("brown") . . . . . . . . . . . . . . . . . . ) ) Chart before changing the BearFillColor and BullFillColor properties. Red color indicates decrease in price and green color indicates increase in price. Figure SEQ Figure \* ARABIC 1: Chart before changing the BearFillColor and BullFillColor properties Chart after changing the BearFillColor to blue and BullFillColor to brown. Brown color represents decrease in price and blue color represents increase in price Figure SEQ Figure \* ARABIC 2: Chart after changing the BearFillColor and BullFillColor ConclusionI hope you enjoyed learning about what is the use of BearFillColor and BullFillColor properties in financial charts.You can refer to our ASP.NET MVC Chartfeature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Chartexample to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Financial Charts are a staple of analytical reports in the financial world. Financial data for stock price charts should include high, low, open, and close prices for a day. By default, Essential Chart fills a data point with red color when the close price is less than the open price value and fills with green color when the close price is higher than the open price. In general, red color data point indicates decrease in price and green color indicates increase in price. You can customize the default fill color used to indicate increase or decrease in price by using the properties BearFillColor and BullFillColor. The color used in the BearFillColor property represents increase in stock price and the BullFillColor property represents decrease in stock price. The following code example illustrates this. ASP <ej:Chart ID="container" CanResize="true" runat="server"> <Series> <ej:Series Type="Candle" BearFillColor="blue" BullFillColor="brown"> . . . . . . . . . . . . . . . . . . . . . . . . . . . </ej:Series> </Series> </ej:Chart> Chart before changing the BearFillColor and BullFillColor properties. Red color indicates decrease in price and green color indicates increase in price. Figure SEQ Figure \* ARABIC 1: Chart before changing the BearFillColor and BullFillColor properties Chart after changing the BearFillColor to blue and BullFillColor to brown. Brown color represents decrease in price and blue color represents increase in price. Figure SEQ Figure \* ARABIC 2: Chart after changing the BearFillColor and BullFillColorNote:A new version of Essential Studio for ASP.NET is available. Versions prior to the release of Essential Studio 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy.The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio for ASP.NET. Although Syncfusion will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below.You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
HiLoOpenClose chart is used in stock analysis. This chart expects high, low, open and close values for every point in the series. These values should represent the High, Low, Open and Close values of the stock for that period. The property drawMode in series determines whether the series should be drawn with Open or Close value or with both values. By default the drawMode is both and it takes the following enum values. open—points will be drawn with the opening value of the period. close— points will be drawn with the closing value of the period. both— points will be drawn with both opening and closing values of the period. HiLoOpenClose series with open and close values HiloOpenClose series will represent both open and close values if the value of drawMode property is both. The following code snippet illustrates <div id="container"></div> <script type="text/javascript"> $(function () { $("#container").ejChart( { series: [{ // . . . type: 'hiloopenclose', drawMode:'both' , //. . . }] }); }); </script> The following screenshot displays both open and close values represented in HiloOpenClose chart. JS Playground sample link: Open and Close HiLoOpenClose series with only Open values HiLoOpenClose series will represent only open values if the value of drawMode property is set to open. The following code snippet illustrates this <div id="container"></div> <script type="text/javascript"> $(function () { $("#container").ejChart( { series: [{ // . . . type: 'hiloopenclose', drawMode:'open' , //. . . }] }); }); </script> The following screenshot displays only open values represented in HiloOpenClose chart. JS Playground sample link: Open HiLoOpenClose series with only Close values HiLoOpenclose series will represent only close values if the value of drawMode property is set to close. The following code snippet illustrates this <div id="container"></div> <script type="text/javascript"> $(function () { $("#container").ejChart( { series: [{ // . . . type: 'hiloopenclose', drawMode:'close' , //. . . }] }); }); </script> The following screenshot displays only close values represented in HiloOpenClose chart. JS Playground sample link: Close
Essential Chart supports different types of Chart like Area charts, Line Charts, Financial charts, Bar charts, Accumulation Charts, Pie Chart, Polar And Radar Charts, Other Charts, Bubble Chart and Scatter chart. For each Chart we can add any number of series. To add points to series Points.Add() method is used. To add a series into Chart Control Series.Add() method is used. To select the particular type of chart ChartSeriesType enumeration is used. The following code snippet illustrates how to create a Bar Chart C# // Creating first series ChartSeries series1 = this.chartControl1.Model.NewSeries("Server1",ChartSeriesType.Bar); series1.Text = series1.Name; series1.Points.Add(0, 25); series1.Points.Add(1, 49); series1.Points.Add(2, 38); series1.Points.Add(3, 43); series1.Points.Add(4, 32); // Creating second series ChartSeries series2 = this.chartControl1.Model.NewSeries("Server 2", ChartSeriesType.Bar); series2.Text = series2.Name; series2.Points.Add(0, 43); series2.Points.Add(1, 45); series2.Points.Add(2, 40); series2.Points.Add(3, 36); series2.Points.Add(4, 42); // Adding the series into Chart control this.chartControl1.Series.Add(series1); this.chartControl1.Series.Add(series2); VB ' Creating first series Dim series1 As ChartSeries = Me.chartControl1.Model.NewSeries("Server1" , ChartSeriesType.Bar ) series1.Text = series1.Name series1.Points.Add(0, 25) series1.Points.Add(1, 49) series1.Points.Add(2, 38) series1.Points.Add(3, 43) series1.Points.Add(4, 32) ' Creating second series Dim series2 As ChartSeries = Me.chartControl1.Model.NewSeries("Server 2" , ChartSeriesType.Bar) series2.Text = series2.Name series2.Points.Add(0, 43) series2.Points.Add(1, 45) series2.Points.Add(2, 40) series2.Points.Add(3, 36) series2.Points.Add(4, 42) ' Adding the series into Chart control Me.chartControl1.Series.Add(series1) Me.chartControl1.Series.Add(series2)
