How do I make a chart like this using Sync Fusion
Hi Jesse Warren,
In SfCartesianChart, HistogramSeries will be rendered based on the counts between the specific range of the given y values. Here we can determine the range that should be consider for getting the number of counts using the binInterval property.
For example, assume we have given 6 data points between 10 to 20 and 3 data points between 20 to 30 and the binInterval is 10, then HistogramSeries will be rendered with two segments with a y value of 6 and 3 respectively.
To achieve your requirement, we can combine both the HistogramSeries and LineSeries with the valid data points and the chart can be zoomed with the help of ZoomPanBehavior.
Kindly refer the
code snippet below:
|
SfCartesianChart( primaryXAxis: NumericAxis(), primaryYAxis: NumericAxis( name: 'primaryYAxis', ), series: <ChartSeries<ChartSampleData, num>>[ HistogramSeries<ChartSampleData, num>( dataSource: _histogramData, yValueMapper: (ChartSampleData sales, int index) => sales.y, binInterval: 10, color: Colors.tealAccent.shade400, ), LineSeries<ChartSampleData, num>( dataSource: _data, xValueMapper: (ChartSampleData sales, int index) => sales.x, yValueMapper: (ChartSampleData sales, int index) => sales.y, color: Colors.amberAccent.shade400, markerSettings: const MarkerSettings( isVisible: true, ), ), ], zoomPanBehavior: _zoomPanBehavior, ), |
Snapshot:
Also attached the sample below for your reference.
Regards,
Hari Hara Sudhan. K
Attachment: 183259_e28162c1.zip
Hi,
We have analyzed your query and we suspect that you need to render the histogram series and line series in two separate charts. To achieve this, we have rendered the histogram series at left-side and line series at right-side in two different charts and enabled the isTransposed property for both the charts.
In the left-side chart, to render the histogram series from right-side to left-side, we have used the isInversed property to the YAxis. In the right-side chart, we have rendered the line series and the histogram series.
Kindy refer the code snippet below:
|
@override Widget build(BuildContext context) { return Scaffold( body: Row( children: [ Expanded( flex: 1, child: SfCartesianChart( isTransposed: true, primaryXAxis: NumericAxis( interval: 5, ), primaryYAxis: NumericAxis( visibleMaximum: 05, interval: 1, isInversed: true, ), series: <ChartSeries<ChartSampleData, num>>[ HistogramSeries<ChartSampleData, num>( width: 1, spacing: 0, dataSource: _histogramData, yValueMapper: (ChartSampleData sales, int index) => sales.y, binInterval: 05, color: Colors.tealAccent, borderColor: Colors.green, borderWidth: 2, ), ], ), ), Expanded( flex: 3, child: SfCartesianChart( isTransposed: true, primaryXAxis: NumericAxis( visibleMinimum: 0, visibleMaximum: 25, interval: 5, opposedPosition: true, ), primaryYAxis: NumericAxis( visibleMaximum: 05, interval: 1, ), series: <ChartSeries<ChartSampleData, num>>[ HistogramSeries<ChartSampleData, num>( width: 1, spacing: 0, dataSource: _histogramData1, yValueMapper: (ChartSampleData sales, int index) => sales.y, binInterval: 05, color: Colors.tealAccent, borderColor: Colors.green, borderWidth: 2, ), LineSeries<ChartSampleData, num>( dataSource: _data, xValueMapper: (ChartSampleData sales, int index) => sales.x, yValueMapper: (ChartSampleData sales, int index) => sales.y, color: Colors.red, markerSettings: const MarkerSettings( isVisible: true, ), ), ], ), ), ], ), ); } |
Snapshot:
Also attached the sample below for your reference. If you have further details, kindly get back to us.
Regards,
Hari Hara Sudhan. K
Attachment: 183259_f9a28de.zip
