Synchronized charts in ASP.NET CORE Chart Component
25 Sep 202324 minutes to read
Tooltip synchronization
The tooltip can be synchronized across multiple charts using the ShowTooltip
and HideTooltip
methods. When we hover over a data point in one chart, we call the ShowTooltip
method for the other charts to display related information in other connected charts simultaneously.
In the ShowTooltip
method, specify the following parameters programmatically to enable tooltip for a particular chart:
-
X
- Data point x-value or x-coordinate value. -
Y
- Data point y-value or y-coordinate value.
<div class="control-section">
<div class="row">
<div class="col" id="container1">
<ejs-chart id="lineContainer1" load="load" title="US to EURO" chartMouseMove="chartMouseMove1"
chartMouseLeave="chartMouseLeave1" chartMouseUp="chartMouseUp1">
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime"
minimum="new DateTime(2023, 2, 18)" maximum="new DateTime(2023, 8, 18)" labelFormat="MMM d">
<e-majorgridlines width="0"></e-majorgridlines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis labelFormat="n2" minimum="0.86" maximum="0.96" interval="0.025">
<e-majorticklines width="0"></e-majorticklines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryyaxis>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-series-collection>
<e-series width="2" xName="USD" yName="EUR" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
<e-series-emptypointsettings
mode="@Syncfusion.EJ2.Charts.EmptyPointMode.Drop"></e-series-emptypointsettings>
</e-series>
</e-series-collection>
<e-chart-tooltipsettings enable="true" shared="true" header=""
format="<b>€${point.y}</b> <br> ${point.x} 2023" enableMarker="false"></e-chart-tooltipsettings>
<e-chart-titlestyle textAlignment="@Syncfusion.EJ2.Charts.Alignment.Near"></e-chart-titlestyle>
</ejs-chart>
</div>
<div class="col" id="container2">
<ejs-chart id="lineContainer2" load="load" title="US to INR" chartMouseMove="chartMouseMove2"
chartMouseLeave="chartMouseLeave2" chartMouseUp="chartMouseUp2">
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime"
minimum="new DateTime(2023, 2, 18)" maximum="new DateTime(2023, 8, 18)" labelFormat="MMM d">
<e-majorgridlines width="0"></e-majorgridlines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis labelFormat="n1" minimum="79" maximum="85" interval="1.5">
<e-majorticklines width="0"></e-majorticklines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryyaxis>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-series-collection>
<e-series width="2" opacity="0.6" xName="USD" yName="INR"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Area">
<e-series-border width="2"></e-series-border>
</e-series>
</e-series-collection>
<e-chart-tooltipsettings enable="true" shared="true" header=""
format="<b>₹${point.y}</b> <br> ${point.x} 2023" enableMarker="false"></e-chart-tooltipsettings>
<e-chart-titlestyle textAlignment="@Syncfusion.EJ2.Charts.Alignment.Near"></e-chart-titlestyle>
</ejs-chart>
</div>
</div>
</div>
<script src="chart/user-interaction/synchronization/crosshair/sync-data.js"></script>
<script>
var chart1;
var chart2;
var ChartPoints = synchronizedData;
function load(args) {
var selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast'));
args.chart.series[0].dataSource = ChartPoints;
args.chart.primaryXAxis.interval = ej.base.Browser.isDevice ? 2 : 1;
args.chart.primaryXAxis.edgeLabelPlacement = ej.base.Browser.isDevice ? 'None' : 'Shift';
args.chart.primaryXAxis.labelRotation = ej.base.Browser.isDevice ? -45 : 0;
args.chart.tooltip.fadeOutDuration = ej.base.Browser.isDevice ? 2500 : 1000;
}
function chartMouseMove1(args) {
chart1 = document.getElementById('lineContainer1').ej2_instances[0];
chart2 = document.getElementById('lineContainer2').ej2_instances[0];
if ((!ej.base.Browser.isDevice && !chart1.isTouch && !chart1.isChartDrag) || chart1.startMove) {
chart2.startMove = chart1.startMove;
chart2.showTooltip(args.x, args.y);
}
}
function chartMouseMove2(args) {
chart1 = document.getElementById('lineContainer1').ej2_instances[0];
chart2 = document.getElementById('lineContainer2').ej2_instances[0];
if ((!ej.base.Browser.isDevice && !chart2.isTouch && !chart2.isChartDrag) || chart2.startMove) {
chart1.startMove = chart4.startMove;
chart1.showTooltip(args.x, args.y);
}
}
function chartMouseLeave1(args) {
chart2 = document.getElementById('lineContainer2').ej2_instances[0];
chart2.hideTooltip();
}
function chartMouseLeave2(args) {
chart1 = document.getElementById('lineContainer1').ej2_instances[0];
chart1.hideTooltip();
}
function chartMouseUp1(args) {
chart1 = document.getElementById('lineContainer1').ej2_instances[0];
chart2 = document.getElementById('lineContainer2').ej2_instances[0];
if (ej.base.Browser.isDevice && chart1.startMove) {
chart2.hideTooltip();
}
}
function chartMouseUp2(args) {
chart1 = document.getElementById('lineContainer1').ej2_instances[0];
chart2 = document.getElementById('lineContainer2').ej2_instances[0];
if (ej.base.Browser.isDevice && chart2.startMove) {
chart1.hideTooltip();
}
}
</script>
<style>
#control-container {
padding: 0px !important;
}
.row {
display: flex;
}
.col {
width: 50%;
margin: 10px;
height: 270px;
}
</style>
public IActionResult Index()
{
return View();
}
Crosshair synchronization
The crosshair can be synchronized across multiple charts using the ShowCrosshair
and HideCrosshair
methods. When we hover over one chart, we call the ShowCrosshair
method for the other charts to align with data points in other connected charts, simplifying data comparison and analysis.
In the ShowCrosshair
method, specify the following parameters programmatically to enable crosshair for a particular chart:
-
X
- Specifies the x-value of the point or x-coordinate. -
Y
- Specifies the y-value of the point or y-coordinate.
<div class="control-section">
<div class="row">
<div class="col" id="container1">
<ejs-chart id="lineContainer1" load="load" title="US to EURO" chartMouseMove="chartMouseMove1"
chartMouseLeave="chartMouseLeave1" chartMouseUp="chartMouseUp1">
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime"
minimum="new DateTime(2023, 2, 18)" maximum="new DateTime(2023, 8, 18)" labelFormat="MMM d">
<e-majorgridlines width="0"></e-majorgridlines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis labelFormat="n2" minimum="0.86" maximum="0.96" interval="0.025">
<e-majorticklines width="0"></e-majorticklines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryyaxis>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-series-collection>
<e-series width="2" xName="USD" yName="EUR" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Spline">
<e-series-emptypointsettings
mode="@Syncfusion.EJ2.Charts.EmptyPointMode.Drop"></e-series-emptypointsettings>
</e-series>
</e-series-collection>
<e-chart-titlestyle textAlignment="@Syncfusion.EJ2.Charts.Alignment.Near"></e-chart-titlestyle>
<e-chart-crosshairsettings enable=true lineType="@Syncfusion.EJ2.Charts.LineType.Vertical"
dashArray="2,2"></e-chart-crosshairsettings>
</ejs-chart>
</div>
<div class="col" id="container2">
<ejs-chart id="lineContainer2" load="load" title="US to INR" chartMouseMove="chartMouseMove2"
chartMouseLeave="chartMouseLeave2" chartMouseUp="chartMouseUp2">
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime"
minimum="new DateTime(2023, 2, 18)" maximum="new DateTime(2023, 8, 18)" labelFormat="MMM d">
<e-majorgridlines width="0"></e-majorgridlines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis labelFormat="n1" minimum="79" maximum="85" interval="1.5">
<e-majorticklines width="0"></e-majorticklines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryyaxis>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-series-collection>
<e-series width="2" opacity="0.6" xName="USD" yName="INR"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Area">
<e-series-border width="2"></e-series-border>
</e-series>
</e-series-collection>
<e-chart-titlestyle textAlignment="@Syncfusion.EJ2.Charts.Alignment.Near"></e-chart-titlestyle>
<e-chart-crosshairsettings enable=true lineType="@Syncfusion.EJ2.Charts.LineType.Vertical"
dashArray="2,2"></e-chart-crosshairsettings>
</ejs-chart>
</div>
</div>
</div>
<script src="chart/user-interaction/synchronization/crosshair/sync-data.js"></script>
<script>
var chart1;
var chart2;
var ChartPoints = synchronizedData;
function load(args) {
var selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast'));
args.chart.series[0].dataSource = ChartPoints;
args.chart.primaryXAxis.interval = ej.base.Browser.isDevice ? 2 : 1;
args.chart.primaryXAxis.edgeLabelPlacement = ej.base.Browser.isDevice ? 'None' : 'Shift';
args.chart.primaryXAxis.labelRotation = ej.base.Browser.isDevice ? -45 : 0;
}
function chartMouseMove1(args) {
chart1 = document.getElementById('lineContainer1').ej2_instances[0];
chart2 = document.getElementById('lineContainer2').ej2_instances[0];
if ((!ej.base.Browser.isDevice && !chart1.isTouch && !chart1.isChartDrag) || chart1.startMove) {
chart2.startMove = chart1.startMove;
chart2.showCrosshair(args.x, args.y);
}
}
function chartMouseMove2(args) {
chart1 = document.getElementById('lineContainer1').ej2_instances[0];
chart2 = document.getElementById('lineContainer2').ej2_instances[0];
if ((!ej.base.Browser.isDevice && !chart2.isTouch && !chart2.isChartDrag) || chart2.startMove) {
chart1.startMove = chart2.startMove;
chart1.showCrosshair(args.x, args.y);
}
}
function chartMouseLeave1(args) {
chart2 = document.getElementById('lineContainer2').ej2_instances[0];
chart2.hideCrosshair();
}
function chartMouseLeave2(args) {
chart1 = document.getElementById('lineContainer1').ej2_instances[0];
chart1.hideCrosshair();
}
function chartMouseUp1(args) {
chart1 = document.getElementById('lineContainer1').ej2_instances[0];
chart2 = document.getElementById('lineContainer2').ej2_instances[0];
if (ej.base.Browser.isDevice && chart1.startMove) {
chart2.hideCrosshair();
}
}
function chartMouseUp2(args) {
chart1 = document.getElementById('lineContainer1').ej2_instances[0];
chart2 = document.getElementById('lineContainer2').ej2_instances[0];
if (ej.base.Browser.isDevice && chart2.startMove) {
chart1.hideCrosshair();
}
}
</script>
<style>
#control-container {
padding: 0px !important;
}
.row {
display: flex;
}
.col {
width: 50%;
margin: 10px;
height: 270px;
}
</style>
public IActionResult Index()
{
return View();
}
Zooming synchronization
You can maintain constant zoom levels across multiple charts using the ZoomComplete
event. In the ZoomComplete
event, obtain the ZoomFactor
and ZoomPosition
values of the particular chart, and then apply those values to the other charts.
<div class="control-section">
<div class="row">
<div class="col" id="container1">
<ejs-chart id="lineContainer1" load="load" title="US to EURO" zoomComplete="zoomComplete">
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime"
minimum="new DateTime(2023, 2, 18)" maximum="new DateTime(2023, 8, 18)" labelFormat="MMM d">
<e-majorgridlines width="0"></e-majorgridlines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis labelFormat="n2" minimum="0.86" maximum="0.96" interval="0.025">
<e-majorticklines width="0"></e-majorticklines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryyaxis>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-series-collection>
<e-series width="2" xName="USD" yName="EUR" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
<e-series-emptypointsettings
mode="@Syncfusion.EJ2.Charts.EmptyPointMode.Drop"></e-series-emptypointsettings>
</e-series>
</e-series-collection>
<e-chart-zoomsettings enableMouseWheelZooming="true" enableSelectionZooming="true"
enableScrollbar="false" enablePinchZooming="true" enableDeferredZooming="true" enablePan="true"
mode="@Syncfusion.EJ2.Charts.ZoomMode.X" toolbarItems="ViewBag.toolBarItems"></e-chart-zoomsettings>
<e-chart-titlestyle textAlignment="@Syncfusion.EJ2.Charts.Alignment.Near"></e-chart-titlestyle>
</ejs-chart>
</div>
<div class="col" id="container2">
<ejs-chart id="lineContainer2" load="load" title="US to INR" zoomComplete="zoomComplete">
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime"
minimum="new DateTime(2023, 2, 18)" maximum="new DateTime(2023, 8, 18)" labelFormat="MMM d">
<e-majorgridlines width="0"></e-majorgridlines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis labelFormat="n1" minimum="79" maximum="85" interval="1.5">
<e-majorticklines width="0"></e-majorticklines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryyaxis>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-series-collection>
<e-series width="2" opacity="0.6" xName="USD" yName="INR"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.SplineArea">
<e-series-border width="2"></e-series-border>
</e-series>
</e-series-collection>
<e-chart-zoomsettings enableMouseWheelZooming="true" enableSelectionZooming="true"
enableScrollbar="false" enablePinchZooming="true" enableDeferredZooming="true" enablePan="true"
mode="@Syncfusion.EJ2.Charts.ZoomMode.X" toolbarItems="ViewBag.toolBarItems"></e-chart-zoomsettings>
<e-chart-titlestyle textAlignment="@Syncfusion.EJ2.Charts.Alignment.Near"></e-chart-titlestyle>
</ejs-chart>
</div>
</div>
</div>
<script src="chart/user-interaction/synchronization/crosshair/sync-data.js"></script>
<script>
var chart1;
var chart2;
var charts = [];
var zoomFactor = 0;
var zoomPosition = 0;
var ChartPoints = synchronizedData;
function load(args) {
var selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast'));
args.chart.series[0].dataSource = ChartPoints;
args.chart.primaryXAxis.interval = ej.base.Browser.isDevice ? 2 : 1;
args.chart.primaryXAxis.edgeLabelPlacement = ej.base.Browser.isDevice ? 'None' : 'Shift';
args.chart.primaryXAxis.labelRotation = ej.base.Browser.isDevice ? -45 : 0;
}
function zoomComplete(args) {
if (args.axis.name === 'primaryXAxis') {
zoomFactor = args.currentZoomFactor;
zoomPosition = args.currentZoomPosition;
zoomCompleteFunction(args);
}
}
function zoomCompleteFunction(args) {
chart1 = document.getElementById('lineContainer1').ej2_instances[0];
chart2 = document.getElementById('lineContainer2').ej2_instances[0];
charts = [chart1, chart2];
for (var i = 0; i < charts.length; i++) {
if (args.axis.series[0].chart.element.id !== charts[i].element.id) {
charts[i].primaryXAxis.zoomFactor = zoomFactor;
charts[i].primaryXAxis.zoomPosition = zoomPosition;
charts[i].zoomModule.isZoomed = args.axis.series[0].chart.zoomModule.isZoomed;
charts[i].zoomModule.isPanning = args.axis.series[0].chart.zoomModule.isPanning;
}
}
}
</script>
<style>
#control-container {
padding: 0px !important;
}
.row {
display: flex;
}
.col {
width: 50%;
margin: 10px;
height: 270px;
}
</style>
public IActionResult Index()
{
ViewBag.toolBarItems = new String[] { "Pan", "Reset" };
return View();
}
Selection synchronization
You can select the data across multiple charts using the SelectionComplete
event. In the SelectionComplete
event, obtain the selected values of the particular chart, and then apply those values to the other charts.
<div class="control-section">
<div class="row">
<div class="col" id="container1">
<ejs-chart id="lineContainer1" load="load" title="US to EURO" zoomComplete="zoomComplete"
selectionComplete="selectionComplete" selectionMode="Point" selectionPattern="Box">
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime"
minimum="new DateTime(2023, 2, 18)" maximum="new DateTime(2023, 8, 18)" labelFormat="MMM d">
<e-majorgridlines width="0"></e-majorgridlines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis labelFormat="n2" minimum="0.86" maximum="0.96" interval="0.025">
<e-majorticklines width="0"></e-majorticklines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryyaxis>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-series-collection>
<e-series width="2" xName="USD" yName="EUR" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
<e-series-emptypointsettings
mode="@Syncfusion.EJ2.Charts.EmptyPointMode.Drop"></e-series-emptypointsettings>
</e-series>
</e-series-collection>
<e-chart-zoomsettings enableSelectionZooming="true"
mode="@Syncfusion.EJ2.Charts.ZoomMode.X"></e-chart-zoomsettings>
<e-chart-titlestyle textAlignment="@Syncfusion.EJ2.Charts.Alignment.Near"></e-chart-titlestyle>
</ejs-chart>
</div>
<div class="col" id="container2">
<ejs-chart id="lineContainer2" load="load" title="US to INR" zoomComplete="zoomComplete"
selectionComplete="selectionComplete" selectionMode="Point" selectionPattern="Box">
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime"
minimum="new DateTime(2023, 2, 18)" maximum="new DateTime(2023, 8, 18)" labelFormat="MMM d">
<e-majorgridlines width="0"></e-majorgridlines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis labelFormat="n1" minimum="79" maximum="85" interval="1.5">
<e-majorticklines width="0"></e-majorticklines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryyaxis>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-series-collection>
<e-series width="2" xName="USD" yName="INR"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Spline">
<e-series-border width="2"></e-series-border>
</e-series>
</e-series-collection>
<e-chart-zoomsettings enableSelectionZooming="true"
mode="@Syncfusion.EJ2.Charts.ZoomMode.X"></e-chart-zoomsettings>
<e-chart-titlestyle textAlignment="@Syncfusion.EJ2.Charts.Alignment.Near"></e-chart-titlestyle>
</ejs-chart>
</div>
</div>
</div>
<script src="chart/user-interaction/synchronization/crosshair/sync-data.js"></script>
<script>
var chart1;
var chart2;
var count;
var charts = [];
var zoomFactor = 0;
var zoomPosition = 0;
var ChartPoints = synchronizedData;
function load(args) {
var selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast'));
args.chart.series[0].dataSource = ChartPoints;
args.chart.primaryXAxis.interval = ej.base.Browser.isDevice ? 2 : 1;
args.chart.primaryXAxis.edgeLabelPlacement = ej.base.Browser.isDevice ? 'None' : 'Shift';
args.chart.primaryXAxis.labelRotation = ej.base.Browser.isDevice ? -45 : 0;
}
function zoomComplete(args) {
if (args.axis.name === 'primaryXAxis') {
zoomFactor = args.currentZoomFactor;
zoomPosition = args.currentZoomPosition;
zoomCompleteFunction(args);
}
}
function zoomCompleteFunction(args) {
chart1 = document.getElementById('lineContainer1').ej2_instances[0];
chart2 = document.getElementById('lineContainer2').ej2_instances[0];
charts = [chart1, chart2];
for (var i = 0; i < charts.length; i++) {
if (args.axis.series[0].chart.element.id !== charts[i].element.id) {
charts[i].primaryXAxis.zoomFactor = zoomFactor;
charts[i].primaryXAxis.zoomPosition = zoomPosition;
charts[i].zoomModule.isZoomed = args.axis.series[0].chart.zoomModule.isZoomed;
charts[i].zoomModule.isPanning = args.axis.series[0].chart.zoomModule.isPanning;
}
}
}
function selectionComplete(args) {
selectionCompleteFunction(args);
}
function selectionCompleteFunction(args) {
if (count == 0) {
for (var j = 0; j < args.selectedDataValues.length; j++) {
args.selectedDataValues[j].point = args.selectedDataValues[j].pointIndex;
args.selectedDataValues[j].series = args.selectedDataValues[j].seriesIndex;
}
for (var i = 0; i < charts.length; i++) {
if (args.chart.element.id !== charts[i].element.id) {
charts[i].selectedDataIndexes = args.selectedDataValues;
count += 1;
charts[i].dataBind();
}
}
count = 0;
}
}
</script>
<style>
#control-container {
padding: 0px !important;
}
.row {
display: flex;
}
.col {
width: 50%;
margin: 10px;
height: 270px;
}
</style>
public IActionResult Index()
{
return View();
}