Move Chart

Move Chart

Posted by: dpandey on 14 October 2025, 4:41 am EST

• 

  dpandey

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 October 2025, 4:41 am EST - Updated 14 October 2025, 4:47 am EST

  I am trying to implement this move chart functionality .Is there any way that i can directly import or use this functionality of spreadJs?
  
  

  

  3394×1924 630 KB

  

  3398×1870 595 KB

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 14 October 2025, 7:51 am EST

  Hi,

  As I understand, you want to move a chart programmatically within the Designer component.

  You can use the

  "Designer.moveChart"

  command, which handles moving charts within the dialog. To move a chart by code, you can execute the command as shown below:

  spread.commandManager().execute({
    cmd: "Designer.moveChart",
    chart: chart,
    sheetName: "Sheet1",
    targetSheetName: "Sheet2"
  });

  You can also refer to the attached sample: Sample.zip where I added a “Move Chart” button. When clicked, it moves the chart from one sheet to another. Similarly, you can use this command as needed based on your requirements.

  If my understanding of your requirement is not correct, could you please provide more details or some examples? This will help us better understand your use case and assist you more effectively.

  Regards,
  
  Priyam

• 

  dpandey

  • Post Options:
  • Link
    Copy

  Posted 16 October 2025, 5:57 pm EST

  This is when we are using SpreadJs Designer , what if we are not then is there any way or commands for that in SpreadJS.

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 17 October 2025, 4:56 am EST - Updated 17 October 2025, 5:01 am EST

  Hi,

  As per my understanding, you would like to implement the chart move functionality in SpreadJS similar to the one available in the Designer component.

  The built-in chart move behavior is only available in the Designer component, and SpreadJS does not provide a direct command or API for this. However, you can achieve similar functionality by creating a custom function. You can copy the desired chart from the source sheet to the target or a new sheet and then remove it from the original sheet.

  I’ve created a sample demonstrating this behavior: https://jscodemine.mescius.io/share/gEwU9tjh4EiAvdcTpv3Bvw/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  In this sample, a “Move Chart” button triggers the

  moveChart

  function, which performs the chart transfer. You can implement a similar approach based on your requirements.

  Code Snippet:

  function moveChart(spread, sheetName, chartName, targetSheetName, isAddToNewSheet) {
      let sheet = spread.getSheetFromName(sheetName);
      console.log("Move chart");
      // get the chart and its properties
      let chart = spread.getActiveSheet().charts.get(chartName);
      let chartType = chart.chartType();
      let height = chart.height();
      let width = chart.width();
      let dataRange = chart.dataRange();
      let dataOrientation = chart.getDataOrientation();
      let colorScheme = chart.colorScheme();
  
      // get target sheet and add chart
      let targetSheet = spread.getSheetFromName(targetSheetName);
      if (isAddToNewSheet) {
          spread.addSheet();
          targetSheet = spread.getSheet(spread.sheets.length - 1);
      }
      if (targetSheet) {
          targetSheet.charts.add(chartName, chartType, 0, 0, width, height, dataRange, dataOrientation, colorScheme);
          // remove the chart 
          sheet.charts.remove(chartName);
          spread.setActiveSheet(targetSheet.name());
      }
  }
  

  GIF:

  References:

  • ChartCollection API: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Charts.ChartCollection#class-chartcollection)
  • Chart API: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Charts.Chart#class-chart)
  • Worksheet API: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet)

  Regards,
  
  Priyam