Chart upgrades and spacing improvements

[hughess]

Description

• Echarts upgrade to 5.6.0
• Axis label tooltip for truncated labels
• Datazoom echarts theme adjustments to include handles
• Echarts grid adjustments
• Move padding and margin settings to parent chart container
• Add leftPadding and rightPadding props to charts for full control of label cutoff
• x label fixes
  • All x-labels now show by default on string x-axes
  • Truncate when labels overflow, with tooltip to show column name on hover
  • Option to wrap using xLabelWrap

Examples

Spacing

Before

After

X Axis Labels

Before

After - truncate (Default)

After - wrap (xLabelWrap=true)

DataZoom (via echartsOptions)

     <LineChart 
            data={orders_by_month}
            x=month
            y=sales_usd0k 
            yAxisTitle="Sales per Month"
            echartsOptions={{
                dataZoom: {
                    show: true,
                    bottom: 10
                },
                grid: {
                    bottom: 50
                }
            }}
        />

Before

After

Checklist

• For UI or styling changes, I have added a screenshot or gif showing before & after
• I have added a changeset
• I have added to the docs where applicable