Re: [D] Superset Line Chart line witdh resize [superset]

via GitHub Sat, 19 Jul 2025 20:43:09 -0700


GitHub user ersandemir closed a discussion: Superset Line Chart  line witdh 
resize


Hi Superset Team,

I'm working on a custom ECharts-based timeseries chart plugin 
(plugin-chart-custom-line) and trying to allow users to control the 
lineStyle.width dynamically through a SliderControl.

What I did:
I created a custom plugin by copying the default ECharts Timeseries chart.

I added a SliderControl named lineWidth in controlPanel.tsx:

{
  name: 'lineWidth',
  config: {
    type: 'SliderControl',
    label: t('Line Width'),
    default: 2,
    min: 1,
    max: 10,
    step: 1,
    renderTrigger: true,
    description: t('Adjust the width of the line.'),
  },
}
I confirmed that the slider value is available in formData by logging 
formData.lineWidth inside transformProps.ts.

The transformed series is generated via transformSeries() from transformers.ts.

In transformers.ts, I modified the lineStyle as follows:

lineStyle: {
  width: formData.lineWidth ?? 2,
},

The problem:
Despite updating the lineStyle.width dynamically from the SliderControl, the 
rendered chart does not reflect the new line width when the slider is changed.

Things I verified:
formData.lineWidth does receive the updated value on slider change.
renderTrigger: true is correctly set on the slider control.
I manually tested with a static value (e.g., width: 10) and it works — so the 
config is applied, just not dynamically.

🔍 Suspected issue:
It seems the updated echartOptions are being passed, but Echart.setOption() 
might not fully re-render the series line style unless deep changes are 
detected.

❓What I'm asking:
Is there anything additional I need to do to force a full re-render of the 
chart when a visual property like lineStyle.width changes?

Is there a preferred way in Superset custom plugins to reflect style changes 
like this via SliderControl?

Should I force-refresh the chart in some specific lifecycle method?

📂 Folder structure reference:

plugin-chart-custom-line/
├── src/
│   ├── Timeseries/
│   │   ├── Regular/
│   │   │   ├── Line/
│   │   │   │   ├── controlPanel.tsx  ← Slider added here
│   │   ├── transformers.ts           ← lineStyle updated here
│   │   ├── transformProps.ts         ← calls transformSeries()
│   │   ├── EchartsTimeseries.tsx     ← uses echartOptions from transformProps
Any help or guidance would be greatly appreciated 🙏
Thanks in advance for your great work!
@sudo

<img width="408" height="392" alt="image" 
src="https://github.com/user-attachments/assets/be78a4fc-bcba-43d2-9203-8c17583ca893";
 />


GitHub link: https://github.com/apache/superset/discussions/34223

----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to: 
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Re: [D] Superset Line Chart line witdh resize [superset]

Reply via email to