Whenever I have a chart question, I always start with Quickly implementing PlotlyJS examples with Chart as a solid reference. The key is passing “data” and ”layout” generated from a JS Query to the chart using the “Plotly JSON” instead of the “UI Form” option in the chart.
Using this approach, you can group your data by product for each period either directly in the (new) JS Query “data” object or passing results of a SQL Query to the JS Query “data” object. This way, you control the grouping of the data before sending it to be charted.
You regarding color, do you have a defined pattern for adding new colors for new products? If this information were in a table in a DB somewhere, you could include a join to that table when you are getting your grouped product data and add the “color” field to the results. You should then be able to pull an array of colors that aligns to the product groups from the SQL results to use as the color definition in your JS Query.
Also note that you will want to put a trigger somewhere to fire the new JS Query when your data updates so that the chart updates as well.
It may take some trial and error to pass the query results into the JS Query in the way you want as well as to set the various layout variables to process them into the chart, but once you get it working, it is pretty powerful and flexible.