Acoustic charts

This is an integration of echarty with chart2music.
ECharts currently does not support keyboard commands. Thanks to chart2music we can now provide enhanced accessibility with hotkey controlled sounds. Developers could add their custom hotkeys too.
The example below will “play” bar and scatter charts separately, do zoom with +/- keys and more.
Start by clicking on the chart and hit ‘H’ to see available hotkeys.

dates <- paste('June',1:8)
adjClose <- c(148.71, 151.21, 145.38, 146.14, 148.71, 147.96, 142.96, 137.13)
volume <- c(74.2866, 72.3481, 88.4714, 71.5984, 67.8082, 53.9502, 69.473, 91.437)
jcode <- paste(
"const dates= ['",paste0(dates, collapse="','"),"'], 
 adjClose= [",paste0(adjClose, collapse=","),"],
 volume= [",paste0(volume, collapse=","),"];
 zoom= {s:0, e:100}; 
 const barLinePlot= function(echa1, cc) {
 const slices= ['Adjusted Close', 'Volume'];
 c2mChart({ 
    type: ['line','bar'], //title: 'echarty demo',
    element: document.getElementById('echa1'), cc: cc,
    axes: { x: { label: 'Day'},
            y: { label: 'Adjusted Close'},  y2: { label: 'Volume'} },
    data: {'Adjusted Close': adjClose.map(function(y, x) { return { x, y }; }), 
           Volume: volume.map(function(y2, x) {return { x, y2 };}) },
    options: {
        onFocusCallback: function({slice, index}) {  
            tmp= slices.indexOf(slice); 
            chart.dispatchAction({ type: 'downplay', seriesIndex: [0,1] });
            chart.dispatchAction({ type: 'highlight', dataIndex: index, seriesIndex:tmp });
      },
        customHotkeys: [{
            key: {key: '+'},    keyDescription: '+', title: 'Zoom In',
            callback: function({ index }) {
                s = Math.min(49, zoom.s +10);
                e = Math.max(51, zoom.e -10);
                chart.dispatchAction({type: 'dataZoom', start: s, end: e });
            }
        },
        {
            key: {key: '-'}, keyDescription: '-',   title: 'Zoom Out',
            callback: function({ index }) {
                s = Math.max(0, zoom.s -10);
                e = Math.min(100, zoom.e +10);
                chart.dispatchAction({type: 'dataZoom', start: s, end: e });
            }
        }] 
    } }) }; 
barLinePlot(
    document.getElementById('echa1'),
    document.getElementById('cc')
);"
)

library(echarty); library(htmltools)
p <- ec.init(load= c('https://cdn.jsdelivr.net/npm/chart2music'), 
    elementId= 'echa1', js= c('','',jcode),
    #title= list( text="echarty demo" ),
    xAxis= list(list( name="Time", type='category', data=dates )),
    yAxis= list(list( name="Adjusted Close", scale=T),
              list( name="Volume", max= max(volume)*2.5 )),
    dataZoom= list(type='inside'),
    series= list(
    list(type="line", data= adjClose, 
        symbolSize= 15, itemStyle=list(color='blue'),
        emphasis= list(itemStyle=list(color='magenta')) ),
    list(type="bar", data=volume, yAxisIndex=2,
        itemStyle=list(color='green'),
        emphasis=list(itemStyle=list(color='magenta')) )
    )
)
p$x$on <- list(list(
  event= 'datazoom',
  handler= htmlwidgets::JS("function (p) {
        if (p.batch==null) zoom = {s: p.start, e: p.end };
        else zoom = {s: p.batch[0].start, e: p.batch[0].end };
    }")
))
browsable(tagList( p, div(id='cc')))