-
Notifications
You must be signed in to change notification settings - Fork 776
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CandleChart problem #848
Comments
Hi @Hugeen2014, Query 1: How to set up green candles so that they, like the red ones, are completely painted green? We have analyzed your requirement and achieved your requirement using the enableSolidCandles. By using this property, you can enable or disable the solid candles. By default, is set to be false. The fill color of the candle will be defined by its opening and closing values. We have shared a code snippet, user guide documentation for your reference below. UG: https://help.syncfusion.com/flutter/cartesian-charts/chart-types/candle-chart Code snippet: ` ` Query 2: How to indent the chart field so that the candles on the right do not start from the very right edge of the screen? Regarding this query, we suggest you to use a plotOffset property. This property is used to offset the rendering of the axis at the start and end position. We have shared a user guide documentation for your reference below. UG Link: https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#offset-the-rendering Please check and get back to us if you require further assistance. Regards, |
Hi @Hugeen2014, Query1: It is possible to configure a line chart in SfCartesianChart so that the color of each line is set depending on its direction. We have achieved your requirement by utilizing the ‘pointColorMapper’. We have provided a condition that determines the color of each data point based on the pervious data point. The color is set to red if the current sales are higher than the pervious sales and green otherwise. Query2: How to configure a line chart so that when a new line is added, the first line goes beyond the left edge of the screen (coordinate "0" along the "X" axis) and then you can scroll to see the history. By using the ‘onRendererCreated’ callback, we have add a new data point to the chart data, whenever a tap is performed on the chart the _chartSeriesController.updateDataSource() method pass the index to the newly added data point, we have handled it in the ‘onChartTouchInteractionUp’ callback. Query3: What parameters are used to configure the size of the field where a touch is registered in onChartTouchInteractionUp and onChartTouchInteractionDown? We have used the showDialog method within the ‘onChartTouchInteractionUp’ callback to display a dialog box when the chart is tapped. Inside the dialog box, we provided details about the tapped data point, including the current sales value and the previous sales value. This dialog box explains you the tap position. Similarly, you can use the ‘onChartTouchInteractionDown’ callback. We have shared a code snippet sample and output for your reference. You can modify the sample based on your needs. Code Snippet: ` List? chartData; @OverRide int _getRandomInt(int min, int max) { List _addDataPoint() { @OverRide SfCartesianChart _buildAddPointsChart() { List<LineSeries<ChartSampleData, num>> _getAddPointSeries() { ` Regards, |
Thank you for your help. When using a graph, the Y=0 axis (the horizontal line where Y is zero) can be anywhere depending on the data and the graph's scale settings. This line usually represents the point where Y intersects X and may not correspond to the physical center of the screen. My goal is to determine if the click was above or below the Y=0 horizontal line on the chart and a different approach would need to be taken. I'll need to figure out where Y=0 is on the graph, which depends on the Y-axis settings of my graph. This usually requires more complex calculations, including knowledge of the scale and range of Y values that are represented on the graph. To more accurately determine the click position relative to the Y=0 axis of the graph, I would need to convert the click coordinates to data coordinates used by the graph, which may require using the Syncfusion graph library API. Unfortunately, a simple MediaQuery cannot provide this functionality without additional data about the graph configuration and its current state. void main() { class MyApp extends StatelessWidget { @OverRide class ChartSampleData { ChartSampleData(this.x, this.y); class DepositCounter { double get deposit => _deposit; // Getter for deposit void processBet(bool isBuy, double betAmount) { class AddDataPoints extends StatefulWidget { @OverRide class _AddDataPointsState extends State { List? chartData; @OverRide
} int _getRandomInt(int min, int max) { List _addDataPoint() { @OverRide SfCartesianChart _buildAddPointsChart() {
} List<LineSeries<ChartSampleData, num>> _getAddPointSeries() { To.Syncfusion.mp4 |
Hi @Hugeen2014, To determine the position of a click above or below the Y=0 axis, in the onChartTouchInteractionUp callback, we have converted the coordinate point (0,0) into pixels using pointToPixel method. By using this pixel, we have determined the vertical position of the Y=0 axis. When a tap occurs, the vertical position (tapArgs.position.dy) of the tap is compared with the position of the Y=0 axis (yPointLocation.dy). If the tap is below the Y=0 axis, it triggers a dialog displayed to convey the tap information. Conversely, if the tap is above the Y=0 axis, it triggers a different dialog with the corresponding information. We have shared a modified code snippet, and a sample for your reference. You can modify the sample based on your needs. Code snippet: `
` Regards, |
Hello.
I ran into two problems. Please help me decide.
I am attaching a photo.
Here is my code
body: SafeArea(
child: Stack(
children: [
Column(
children: [
Expanded(
child: SizedBox(
width: double.infinity,
height: double.infinity,
child: SfCartesianChart(
plotAreaBorderColor: Colors.deepPurple,
backgroundColor: Colors.transparent,
margin: const EdgeInsets.fromLTRB(0, 0, 0, 0),
series: [
CandleSeries<ChartSampleData, DateTime>(
dataSource: _chartData,
xValueMapper: (ChartSampleData sales, _) => sales.x!,
lowValueMapper: (ChartSampleData sales, _) =>
sales.low!,
highValueMapper: (ChartSampleData sales, _) =>
sales.high!,
openValueMapper: (ChartSampleData sales, _) =>
sales.open!,
closeValueMapper: (ChartSampleData sales, _) =>
sales.close!,
bearColor: Colors
.red, // Цвет медвежьего (закрытие < открытия)
bullColor: Colors
.green, // Цвет бычьего (закрытие > открытия)
)
],
primaryXAxis: DateTimeAxis(
dateFormat: DateFormat.Hm(),
majorGridLines: const MajorGridLines(width: 1),
),
primaryYAxis: NumericAxis(
minimum: -100,
maximum: 100,
interval: 10,
numberFormat:
NumberFormat.simpleCurrency(decimalDigits: 0),
),
),
),
),
],
),
],
),
),
backgroundColor: Colors.white, // Серый цвет для фона Scaffold
);
}
List getChartData() {
return [
ChartSampleData(
x: DateTime(0, 0, 0, 0, 1), // 0 часов, 1 минут
open: 0,
high: 15,
low: -3,
close: 10,
),
ChartSampleData(
x: DateTime(0, 0, 0, 0, 2), // 0 часов, 2 минут
open: 10,
high: 35,
low: 5,
close: 30,
),
ChartSampleData(
x: DateTime(0, 0, 0, 0, 3), // 0 часов, 2 минут
open: 30,
high: 40,
low: 0,
close: 10,
),
ChartSampleData(
x: DateTime(0, 0, 0, 0, 4), // 0 часов, 4 минут
open: 15,
high: 25,
low: -33,
close: -10,
),
ChartSampleData(
x: DateTime(0, 0, 0, 0, 5), // 0 часов, 5 минут
open: -10,
high: 0,
low: -15,
close: -30,
),
ChartSampleData(
x: DateTime(0, 0, 0, 0, 6), // 0 часов, 6 минут
open: -40,
high: -5,
low: -45,
close: -10,
),
];
}
}
class ChartSampleData {
ChartSampleData({this.x, this.open, this.close, this.low, this.high});
final DateTime? x;
final num? open;
final num? close;
final num? low;
final num? high;
}
The text was updated successfully, but these errors were encountered: