This example demonstrates how to render an Event Drops chart, based upon a declaratively created Line chart.

Static ID - set a static ID for the region, sales in this example, to be used in a Dynamic Action JavaScript reference.

Chart Type - set to Line. Use the declarative options to define a Line chart, as you normally would.

Line Type - Set this series-level attribute to None, so no lines will be visible for the chart series.

Marker - Set the series-level attribute Show to Yes, and Shape to Circle, or another shape of your choosing.

Time Axis Type - Set this chart-level attribute to Mixed Frequency

Major Tick and Minor Tick - set these axis-level attributes to Off, so that no bar are visible on the chart.

Source SQL Query -

JavaScript Code - Use this chart-level attribute to customize your chart attributes and data, in order to customize it to meet the requirements of the Event Drops chart:

function( options ) {
    
    var yAxisLineRefs    = [],
        seriesNamesArray = [];
    
    // Setup a callback function which gets called when data is retrieved, it allows to manipulate the series
    options.dataFilter = function( data ) {
        
        for ( var i = 0; i < data.series.length; i++ ) {
            
            for ( var j = 0; j < data.series[ i ].items.length; j++ ) {
                // Set series 'value' to unique index associated with the series e.g. Series 0: value = 0; Series 1: value = 1; etc
                data.series[ i ].items[ j ].value = i;
            } 
            
            // Create reference line to separate each series
            yAxisLineRefs.push({ 
                type: 'line', 
                color: 'rgba(196,206,215,1)', 
                value: i + 0.5 
            });
           
            // Array of series names, for use in eventNames function
            seriesNamesArray.push( data.series[ i ].name );
        }

        return data;
    };
    
    this.seriesName = seriesNamesArray;
    
    // Function to convert series value with series name - for use in setting yAxis.tickLabel via a 'After Refresh' Dynamic Action
    this.eventNamesFn = { 
        format: function( value ) {
            return seriesName [ value ];
        }
    };
    
    // Set additional yAxis attributes
    $.extend ( options.yAxis, { 
        referenceObjects: yAxisLineRefs 
    } );
    
    // Set chart initialization options
    return options;
}

Dynamic Action - Define an After Refresh dynamic action, with one True action that will Execute JavaScript Code:

apex.region('sales').widget().ojChart('option','yAxis.tickLabel.converter', eventNamesFn );

For more information on the Event Drops chart settings, refer to the Oracle JET Cookbook Event Drops example.