Hi, We have checked your reported query regarding icons not displaying properly. To check the issue, we created a React spreadsheet local sample on our end using the provided RUclips video. However, we encountered no problems, as all the icons were displayed properly. For your convenience, we have shared the video demonstration and the sample which we have prepared on our end for your reference below. Sample: www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-616222890619214? Video Link: www.syncfusion.com/downloads/support/directtrac/general/ze/Video-6162221771796263? Additionally, please refer to the below documentation regarding the dependent CSS style references needed for the React spreadsheet component. UG Link: ej2.syncfusion.com/react/documentation/spreadsheet/getting-started?#adding-css-reference If you still face the issue on your end, please share the following details to help us validate and provide a better solution quickly. The version of the spreadsheet you are currently using. Clear details about which icons are not showing properly, including a screenshot or video demonstration. The code snippet of the CSS style references being used on your end. If you are using any other custom CSS style reference, then kindly share those details along with the code snippet.
Hi, We have checked your reported query of opening the .xls file in the Spreadsheet component by choosing the file from the html input. And it can be achieved by using the onChange event of the input element and open method (ej2.syncfusion.com/react/documentation/api/spreadsheet/#open) of our Spreadsheet component. In the onChange event of the input element, we will get the file which is selected, and we can open the file by passing the selected file in the open method of our Spreadsheet component. For your convenience, we have prepared the code snippet, sample and video demonstration and attached below for your reference, Code snippet: const Default = () => { let spreadsheet; const fileUpload = (args) => { //Open the selected file in the Spreadsheet using the open method. spreadsheet.open({ file: args.target.files[0] }); } return (
{ spreadsheet = ssObj; }}>
); } Stackblitz sample: stackblitz.com/edit/react-4i6ddj-jb63ai?file=index.js Video link: www.syncfusion.com/downloads/support/directtrac/general/ze/Input_file_upload693087909 For more information regarding the open/save, please check the below documentation, Documentation link: ej2.syncfusion.com/react/documentation/spreadsheet/open-save
Hello @AAfzal-lk2nf, Our paid and free versions both have the same features and support. You can check here to see if you qualify for our Community (free) license. It's available for companies with 5 or fewer developers and less than $1 Mil USD in annual revenue. bit.ly/395t17c
Hi, We have checked your reported query and we suspect that you want to open the file stream into our Spreadsheet. And it is possible by converting the File stream into the file and open into the Spreadsheet. For your convenience, we have prepared the react sample in which we make a fetch call to the server to load the Excel file into the spreadsheet on a button click like in the below code snippet, // Fetch call to server to load the Excel. You can use your localhost URL here. fetch('localhost:7016/Home/Open', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ FileName: 'Sample' }), }) .then((response) => response.json()) .then((data) => { // Load the JSON data into the spreadsheet. spreadsheet.openFromJson({ file: data }); })
On our local server, we have added an Excel file inside the Files folder. We will read that Excel file as a stream and convert the stream into a FormFile. Then, we will process the Excel file using the Workbook Open API and share the workbook as JSON to the client side. Below mentioned the server-side code block for reference, public IActionResult Open([FromBody] FileOptions options) { OpenRequest open = new OpenRequest(); string filePath = _env.ContentRootPath.ToString() + \\Files\\ + options.FileName + ".xlsx"; FileStream fileStream = new FileStream(filePath, FileMode.Open); // Getting the file stream from the file path. IFormFile formFile = new FormFile(fileStream, 0, fileStream.Length, "", options.FileName + ".xlsx"); // converting MemoryStream to IFormFile open.File = formFile; var result = Workbook.Open(open); // Processing the Excel file and return the workbook JSON. fileStream.Close(); return Content(result); }
On the client side, we will get the workbook JSON data and load it into the spreadsheet using our openFromJson method. Below attached the sample, local Web API and video demonstration for your reference, React Sample link: www.syncfusion.com/downloads/support/directtrac/general/ze/my-react-app-1577711747 Local Web API: www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11672591259 Note: Launch the service first and then run the client-side sample. Video link: www.syncfusion.com/downloads/support/directtrac/general/ze/Open_From_server-1519887098
Hi, Thank you for reaching out. We suspect that you have used our online EJ2 service link for open/save action due to server traffic issues that may occur. For demo purposes, we have published our web service open/save action and mentioned it in our demo site. You can also use this demo URL on your end or else you can use local service for open/save action. And we have published our API services in the GitHub location, for more details please refer to the below links. Service sample Location: github.com/SyncfusionExamples/EJ2-Spreadsheet-WebServices/ ej2.syncfusion.com/react/documentation/spreadsheet/open-save/ You have used the above web service for open/save action, to resolve your reported issue on your end. To create the local web service, please refer to the below link. www.syncfusion.com/kb/13200/how-to-remove-trial-version-tab-created-in-spreadsheet
Hi, We have checked your reported query and we suspect that you want to open the file stream into our Spreadsheet. And it is possible by converting the File stream into the file and open into the Spreadsheet. For your convenience, we have prepared the react sample in which we make a fetch call to the server to load the Excel file into the spreadsheet on a button click like in the below code snippet, // Fetch call to server to load the Excel. You can use your localhost URL here. fetch('localhost:7016/Home/Open', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ FileName: 'Sample' }), }) .then((response) => response.json()) .then((data) => { // Load the JSON data into the spreadsheet. spreadsheet.openFromJson({ file: data }); })
On our local server, we have added an Excel file inside the Files folder. We will read that Excel file as a stream and convert the stream into a FormFile. Then, we will process the Excel file using the Workbook Open API and share the workbook as JSON to the client side. Below mentioned the server-side code block for reference, public IActionResult Open([FromBody] FileOptions options) { OpenRequest open = new OpenRequest(); string filePath = _env.ContentRootPath.ToString() + \\Files\\ + options.FileName + ".xlsx"; FileStream fileStream = new FileStream(filePath, FileMode.Open); // Getting the file stream from the file path. IFormFile formFile = new FormFile(fileStream, 0, fileStream.Length, "", options.FileName + ".xlsx"); // converting MemoryStream to IFormFile open.File = formFile; var result = Workbook.Open(open); // Processing the Excel file and return the workbook JSON. fileStream.Close(); return Content(result); }
On the client side, we will get the workbook JSON data and load it into the spreadsheet using our openFromJson method. Below attached the sample, local Web API and video demonstration for your reference, React Sample link: www.syncfusion.com/downloads/support/directtrac/general/ze/my-react-app-1577711747 Local Web API: www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11672591259 Note: Launch the service first and then run the client-side sample. Video link: www.syncfusion.com/downloads/support/directtrac/general/ze/Open_From_server-1519887098 Kindly, check the above details in your end and if it does not meet your requirement, please share the detailed description of your requirement along with the screenshot or video. Based on that, we will check and provide you the better solution quickly.
Hello, Thank you for reaching out. You can use the height property to set the height for the spreadsheet. www.syncfusion.com/kb/13177/how-to-render-spreadsheet-in-full-screen-mode.
Hi, Thank you for reaching out. Query #1: Change data in spreadsheet. You can change the cell value in the spreadsheet programmatically by using the updateCell or updateRange method. For more information, please visit the below link. ej2.syncfusion.com/react/documentation/api/spreadsheet/#updatecell ej2.syncfusion.com/react/documentation/api/spreadsheet/#updaterange Query #2: Get the cell values from the spreadsheet. To get the cell values in the spreadsheet, you can use the getData method. For more details, please refer to the below link. ej2.syncfusion.com/react/documentation/api/spreadsheet/#getdata support.syncfusion.com/kb/article/11861/how-to-get-the-modified-data-as-key-value-pair-in-javascript-spreadsheet Query #3: Sent data to server-side API. We suspect that you need to save the spreadsheet modified data into your database. And it can be achievable in our spreadsheet by using our getData or saveAsJson method. For more information regarding the server-side customization, please visit the below links. To save the data to the database, please check with the below attached link. support.syncfusion.com/kb/article/10925/how-to-load-and-save-a-sql-table-in-spreadsheet-using-cellsave-event support.syncfusion.com/kb/article/10471/how-to-save-and-retrieve-javascript-spreadsheet-data-as-a-byte-array-in-the-database support.syncfusion.com/kb/article/10357/how-to-save-and-retrieve-the-javascript-spreadsheet-data-as-json-in-database
Hi, Thank you for reaching out. Query #1: Change data in spreadsheet. You can change the cell value in the spreadsheet programmatically by using the updateCell or updateRange method. For more information, please visit the below link. ej2.syncfusion.com/react/documentation/api/spreadsheet/#updatecell ej2.syncfusion.com/react/documentation/api/spreadsheet/#updaterange Query #2: Get the cell values from the spreadsheet. To get the cell values in the spreadsheet, you can use the getData method. For more details, please refer to the below link. ej2.syncfusion.com/react/documentation/api/spreadsheet/#getdata support.syncfusion.com/kb/article/11861/how-to-get-the-modified-data-as-key-value-pair-in-javascript-spreadsheet Query #3: Sent data to server-side API. We suspect that you need to save the spreadsheet modified data into your database. And it can be achievable in our spreadsheet by using our getData or saveAsJson method. For more information regarding the server-side customization, please visit the below links. To save the data to the database, please check with the below attached link. support.syncfusion.com/kb/article/10925/how-to-load-and-save-a-sql-table-in-spreadsheet-using-cellsave-event support.syncfusion.com/kb/article/10471/how-to-save-and-retrieve-javascript-spreadsheet-data-as-a-byte-array-in-the-database support.syncfusion.com/kb/article/10357/how-to-save-and-retrieve-the-javascript-spreadsheet-data-as-json-in-database
Hi Shreya, Your requirement can be achieved by setting the showRibbon property as false. For your convenience, we have prepared the sample that hides the toolbar using this property. Sample Link: stackblitz.com/edit/react-mseuwk?file=index.js API Link: ej2.syncfusion.com/react/documentation/api/spreadsheet#showribbon
Hello, We can look into this and get back to you but response times via our RUclips videos are slower than our regular support. Have you opened a support ticket or tried our live chat? www.syncfusion.com/support/directtrac/incidents/newincident If you have a retail or flat license, you also have access to our support chat.
Please use the saveAsJson method in the spreadsheet. This method returns the whole spreadsheet model as JSON data. For more details, please refer to the below links. ej2.syncfusion.com/react/documentation/api/spreadsheet/#saveasjson
Hi, Thank you for reaching out. Please elaborate on this term, usestate data. Do you want to load data (array of objects) or load excel file to the spreadsheet? For more details regarding the data binding feature in the spreadsheet refer to the following links and let us know if you need any further assistance. ej2.syncfusion.com/react/documentation/spreadsheet/data-binding/ ej2.syncfusion.com/angular/demos/#/bootstrap5/spreadsheet/cell-data-binding ej2.syncfusion.com/angular/demos/#/bootstrap5/spreadsheet/remote-data-binding
@@SyncfusionInc Yes. Array of objects. Can you please make a video of how to pass remote data from Mssql to export in a excel document with chart autogenerated without spreadsheet component displayed on the site like it's embedded. Can syncfusion work for this app? This is a serious potential customer by the way.
and then augenerate charts based on the array objects. Lastly, we do not want the speadsheet embedded on the page. We want it downloaded with a click of a button.
Hello Jude, If you don’t need to view SQL data in EJ2 React spreadsheet, you can use our XLSIO library to export the data as excel file. And XLSIO library do not have any direct support to import data from SQL. Instead, the SQL data can be converted to data table at your end, and it can be imported to Excel to achieve your requirement. We have prepared a sample to import data from DataTable into Excel and create a chart with imported data. Sample Link: www.syncfusion.com/downloads/support/directtrac/general/ze/T415839_Web-442318473.zip
Why icons not showing?
Hi,
We have checked your reported query regarding icons not displaying properly. To check the issue, we created a React spreadsheet local sample on our end using the provided RUclips video. However, we encountered no problems, as all the icons were displayed properly.
For your convenience, we have shared the video demonstration and the sample which we have prepared on our end for your reference below.
Sample: www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-616222890619214?
Video Link: www.syncfusion.com/downloads/support/directtrac/general/ze/Video-6162221771796263?
Additionally, please refer to the below documentation regarding the dependent CSS style references needed for the React spreadsheet component.
UG Link: ej2.syncfusion.com/react/documentation/spreadsheet/getting-started?#adding-css-reference
If you still face the issue on your end, please share the following details to help us validate and provide a better solution quickly.
The version of the spreadsheet you are currently using.
Clear details about which icons are not showing properly, including a screenshot or video demonstration.
The code snippet of the CSS style references being used on your end.
If you are using any other custom CSS style reference, then kindly share those details along with the code snippet.
@@SyncfusionInc Thank you for response,
I removed this line from css file and its working fine now:
* {
font-family: "Cairo", sans-serif;
}
We are glad that it worked.
Hi actually, I am selecting the xls file from html input and now i want that file to open through spreadsheet component. How?
Hi,
We have checked your reported query of opening the .xls file in the Spreadsheet component by choosing the file from the html input. And it can be achieved by using the onChange event of the input element and open method (ej2.syncfusion.com/react/documentation/api/spreadsheet/#open) of our Spreadsheet component. In the onChange event of the input element, we will get the file which is selected, and we can open the file by passing the selected file in the open method of our Spreadsheet component. For your convenience, we have prepared the code snippet, sample and video demonstration and attached below for your reference,
Code snippet:
const Default = () => {
let spreadsheet;
const fileUpload = (args) => {
//Open the selected file in the Spreadsheet using the open method.
spreadsheet.open({ file: args.target.files[0] });
}
return (
{ spreadsheet = ssObj; }}>
);
}
Stackblitz sample: stackblitz.com/edit/react-4i6ddj-jb63ai?file=index.js
Video link: www.syncfusion.com/downloads/support/directtrac/general/ze/Input_file_upload693087909
For more information regarding the open/save, please check the below documentation,
Documentation link: ej2.syncfusion.com/react/documentation/spreadsheet/open-save
This is really awesome and powerful, I am planning to use this in a project of mine, I was curious is this free??
Hello @AAfzal-lk2nf,
Our paid and free versions both have the same features and support. You can check here to see if you qualify for our Community (free) license. It's available for companies with 5 or fewer developers and less than $1 Mil USD in annual revenue.
bit.ly/395t17c
Can this display the content directly after reading the xlsx file stream？
Hi,
We have checked your reported query and we suspect that you want to open the file stream into our Spreadsheet. And it is possible by converting the File stream into the file and open into the Spreadsheet.
For your convenience, we have prepared the react sample in which we make a fetch call to the server to load the Excel file into the spreadsheet on a button click like in the below code snippet,
// Fetch call to server to load the Excel. You can use your localhost URL here.
fetch('localhost:7016/Home/Open', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ FileName: 'Sample' }),
})
.then((response) => response.json())
.then((data) => {
// Load the JSON data into the spreadsheet.
spreadsheet.openFromJson({ file: data });
})
On our local server, we have added an Excel file inside the Files folder. We will read that Excel file as a stream and convert the stream into a FormFile. Then, we will process the Excel file using the Workbook Open API and share the workbook as JSON to the client side. Below mentioned the server-side code block for reference,
public IActionResult Open([FromBody] FileOptions options)
{
OpenRequest open = new OpenRequest();
string filePath = _env.ContentRootPath.ToString() + \\Files\\ + options.FileName + ".xlsx";
FileStream fileStream = new FileStream(filePath, FileMode.Open); // Getting the file stream from the file path.
IFormFile formFile = new FormFile(fileStream, 0, fileStream.Length, "", options.FileName + ".xlsx"); // converting MemoryStream to IFormFile
open.File = formFile;
var result = Workbook.Open(open); // Processing the Excel file and return the workbook JSON.
fileStream.Close();
return Content(result);
}
On the client side, we will get the workbook JSON data and load it into the spreadsheet using our openFromJson method.
Below attached the sample, local Web API and video demonstration for your reference,
React Sample link: www.syncfusion.com/downloads/support/directtrac/general/ze/my-react-app-1577711747
Local Web API: www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11672591259
Note: Launch the service first and then run the client-side sample.
Video link: www.syncfusion.com/downloads/support/directtrac/general/ze/Open_From_server-1519887098
I am getting "This page isn’t working" while saving the excel file. is there any work around for that?
Hi,
Thank you for reaching out.
We suspect that you have used our online EJ2 service link for open/save action due to server traffic issues that may occur.
For demo purposes, we have published our web service open/save action and mentioned it in our demo site. You can also use this demo URL on your end or else you can use local service for open/save action.
And we have published our API services in the GitHub location, for more details please refer to the below links.
Service sample Location: github.com/SyncfusionExamples/EJ2-Spreadsheet-WebServices/
ej2.syncfusion.com/react/documentation/spreadsheet/open-save/
You have used the above web service for open/save action, to resolve your reported issue on your end.
To create the local web service, please refer to the below link.
www.syncfusion.com/kb/13200/how-to-remove-trial-version-tab-created-in-spreadsheet
Can this display the content directly after reading the xlsx file stream？
Hi,
We have checked your reported query and we suspect that you want to open the file stream into our Spreadsheet. And it is possible by converting the File stream into the file and open into the Spreadsheet.
For your convenience, we have prepared the react sample in which we make a fetch call to the server to load the Excel file into the spreadsheet on a button click like in the below code snippet,
// Fetch call to server to load the Excel. You can use your localhost URL here.
fetch('localhost:7016/Home/Open', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ FileName: 'Sample' }),
})
.then((response) => response.json())
.then((data) => {
// Load the JSON data into the spreadsheet.
spreadsheet.openFromJson({ file: data });
})
On our local server, we have added an Excel file inside the Files folder. We will read that Excel file as a stream and convert the stream into a FormFile. Then, we will process the Excel file using the Workbook Open API and share the workbook as JSON to the client side. Below mentioned the server-side code block for reference,
public IActionResult Open([FromBody] FileOptions options)
{
OpenRequest open = new OpenRequest();
string filePath = _env.ContentRootPath.ToString() + \\Files\\ + options.FileName + ".xlsx";
FileStream fileStream = new FileStream(filePath, FileMode.Open); // Getting the file stream from the file path.
IFormFile formFile = new FormFile(fileStream, 0, fileStream.Length, "", options.FileName + ".xlsx"); // converting MemoryStream to IFormFile
open.File = formFile;
var result = Workbook.Open(open); // Processing the Excel file and return the workbook JSON.
fileStream.Close();
return Content(result);
}
On the client side, we will get the workbook JSON data and load it into the spreadsheet using our openFromJson method.
Below attached the sample, local Web API and video demonstration for your reference,
React Sample link: www.syncfusion.com/downloads/support/directtrac/general/ze/my-react-app-1577711747
Local Web API: www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11672591259
Note: Launch the service first and then run the client-side sample.
Video link: www.syncfusion.com/downloads/support/directtrac/general/ze/Open_From_server-1519887098
Kindly, check the above details in your end and if it does not meet your requirement, please share the detailed description of your requirement along with the screenshot or video. Based on that, we will check and provide you the better solution quickly.
@@SyncfusionInc
Thank you, my problem has been resolved
Hi, Nice Video !!
I would like to know if it's possible to increase the spreadsheet height and if yes how can I do that.
Thanks
Hello,
Thank you for reaching out. You can use the height property to set the height for the spreadsheet.
www.syncfusion.com/kb/13177/how-to-render-spreadsheet-in-full-screen-mode.
is this possible to change some data, grab it, then send it to the API?
Hi,
Thank you for reaching out.
Query #1: Change data in spreadsheet.
You can change the cell value in the spreadsheet programmatically by using the updateCell or updateRange method. For more information, please visit the below link.
ej2.syncfusion.com/react/documentation/api/spreadsheet/#updatecell
ej2.syncfusion.com/react/documentation/api/spreadsheet/#updaterange
Query #2: Get the cell values from the spreadsheet.
To get the cell values in the spreadsheet, you can use the getData method. For more details, please refer to the below link.
ej2.syncfusion.com/react/documentation/api/spreadsheet/#getdata
support.syncfusion.com/kb/article/11861/how-to-get-the-modified-data-as-key-value-pair-in-javascript-spreadsheet
Query #3: Sent data to server-side API.
We suspect that you need to save the spreadsheet modified data into your database. And it can be achievable in our spreadsheet by using our getData or saveAsJson method. For more information regarding the server-side customization, please visit the below links.
To save the data to the database, please check with the below attached link.
support.syncfusion.com/kb/article/10925/how-to-load-and-save-a-sql-table-in-spreadsheet-using-cellsave-event
support.syncfusion.com/kb/article/10471/how-to-save-and-retrieve-javascript-spreadsheet-data-as-a-byte-array-in-the-database
support.syncfusion.com/kb/article/10357/how-to-save-and-retrieve-the-javascript-spreadsheet-data-as-json-in-database
Hi,
Thank you for reaching out.
Query #1: Change data in spreadsheet.
You can change the cell value in the spreadsheet programmatically by using the updateCell or updateRange method. For more information, please visit the below link.
ej2.syncfusion.com/react/documentation/api/spreadsheet/#updatecell
ej2.syncfusion.com/react/documentation/api/spreadsheet/#updaterange
Query #2: Get the cell values from the spreadsheet.
To get the cell values in the spreadsheet, you can use the getData method. For more details, please refer to the below link.
ej2.syncfusion.com/react/documentation/api/spreadsheet/#getdata
support.syncfusion.com/kb/article/11861/how-to-get-the-modified-data-as-key-value-pair-in-javascript-spreadsheet
Query #3: Sent data to server-side API.
We suspect that you need to save the spreadsheet modified data into your database. And it can be achievable in our spreadsheet by using our getData or saveAsJson method. For more information regarding the server-side customization, please visit the below links.
To save the data to the database, please check with the below attached link.
support.syncfusion.com/kb/article/10925/how-to-load-and-save-a-sql-table-in-spreadsheet-using-cellsave-event
support.syncfusion.com/kb/article/10471/how-to-save-and-retrieve-javascript-spreadsheet-data-as-a-byte-array-in-the-database
support.syncfusion.com/kb/article/10357/how-to-save-and-retrieve-the-javascript-spreadsheet-data-as-json-in-database
hi,
how can we hide the toolbar in functional based components.
Hi Shreya,
Your requirement can be achieved by setting the showRibbon property as false. For your convenience, we have prepared the sample that hides the toolbar using this property.
Sample Link: stackblitz.com/edit/react-mseuwk?file=index.js
API Link: ej2.syncfusion.com/react/documentation/api/spreadsheet#showribbon
@@SyncfusionInc showRibbon={false}
showRibbon={false}
Is there any way I can save the spreadsheet data in a json file??
Hello,
We can look into this and get back to you but response times via our RUclips videos are slower than our regular support. Have you opened a support ticket or tried our live chat? www.syncfusion.com/support/directtrac/incidents/newincident
If you have a retail or flat license, you also have access to our support chat.
Please use the saveAsJson method in the spreadsheet. This method returns the whole spreadsheet model as JSON data. For more details, please refer to the below links.
ej2.syncfusion.com/react/documentation/api/spreadsheet/#saveasjson
How do I make the excel spreedsheet display usestate data?
Hi,
Thank you for reaching out. Please elaborate on this term, usestate data. Do you want to load data (array of objects) or load excel file to the spreadsheet? For more details regarding the data binding feature in the spreadsheet refer to the following links and let us know if you need any further assistance.
ej2.syncfusion.com/react/documentation/spreadsheet/data-binding/
ej2.syncfusion.com/angular/demos/#/bootstrap5/spreadsheet/cell-data-binding
ej2.syncfusion.com/angular/demos/#/bootstrap5/spreadsheet/remote-data-binding
@@SyncfusionInc Yes. Array of objects. Can you please make a video of how to pass remote data from Mssql to export in a excel document with chart autogenerated without spreadsheet component displayed on the site like it's embedded. Can syncfusion work for this app? This is a serious potential customer by the way.
and then augenerate charts based on the array objects. Lastly, we do not want the speadsheet embedded on the page. We want it downloaded with a click of a button.
Hello Jude,
If you don’t need to view SQL data in EJ2 React spreadsheet, you can use our XLSIO library to export the data as excel file. And XLSIO library do not have any direct support to import data from SQL. Instead, the SQL data can be converted to data table at your end, and it can be imported to Excel to achieve your requirement.
We have prepared a sample to import data from DataTable into Excel and create a chart with imported data.
Sample Link: www.syncfusion.com/downloads/support/directtrac/general/ze/T415839_Web-442318473.zip
@@SyncfusionIncso this can't be done in reactjs using your library. I see it can be done in visual basic