How to detect changes in chart layout and chart dataset in SpreadJS?

How to detect changes in chart layout and chart dataset in SpreadJS?

Posted by: luisdaniel.madrigal on 3 July 2025, 4:06 pm EST

• 

  luisdaniel.madrigal

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 3 July 2025, 4:06 pm EST

  Hello Mescius Support Team,

  We are currently using SpreadJS in our company, and I’m looking for a way to detect when a user modifies a chart, either by:

  • Changing the chart dataset (e.g., updating the data range or series), or
  • Adjusting the chart layout (e.g., resizing or repositioning the chart)

  I’ve been searching the documentation but haven’t found an event or callback that tracks these interactions. Is there an official way to listen for such changes or a recommended approach to achieve this?

  Thank you for your assistance!

  Best regards,

• 

  chirag.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 4 July 2025, 2:36 am EST - Updated 4 July 2025, 2:41 am EST

  Hi,

  It is possible to detect the user modifications to charts in SpreadJS. Please refer to the following approaches:

  • Chart Layout Changes (resize or reposition): Use the ShapeChanged event to monitor changes to x, y, width, or height properties:

       spread.bind(GC.Spread.Sheets.Events.ShapeChanged, function (e, info) {
         if (info.shape.chartCollection && ["x", "y", "width", "height"].includes(info.propertyName)) {
           // custom logic
         }
       });

  • Chart Data Source Changes: Use the command listener to detect updates made through the Designer:

       spread.commandManager().addListener("app", (args) => {
         if (args.command.cmd === "Designer.updateChartAllSeries") {
           // custom logic
         }
       });

  You can further refer to the attached code snippet that uses the above code snippet and listens to chart data and layout changes seamlessly (see below).

  Please let us know if you require any further assistance.

  References:

  • ShapeChanged Event: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Events#shapechanged

  Attachment: https://jscodemine.mescius.io/share/Npzwih7nek6OehWlAuLOpA/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fapp.js"%2C"%2Fstyles.css"]%2C"ActiveFile"%3A"%2Fapp.js"}

  Working:

  

  Best Regards,
  
  Chirag Gupta

• 

  luisdaniel.madrigal

  • Post Options:
  • Link
    Copy

  Posted 8 July 2025, 10:22 am EST

  Thank you for your prompt and detailed response!
  
  The information and instructions you provided were exactly what I needed. I really appreciate the support — it’s been very helpful.

  Best regards,