How to use marker in JavaScript ejChart?

Markers are similar to adornments that is used to represent points in a series. When you place mouse on a marker, it gets highlighted automatically. Refer to the Data Labels for using data labels in chart.

JavaScript Chart supports using marker to represent points in a series. You can set Marker to all series or specific series based on the requirement. To enable marker for all the series in chart, it is declared within commonSeriesOptions of chart.

The online sample with markers in series is available in the following link Chart Symbols

The visible property of marker is enabled to display marker. You can customize marker size, shape etc.

The following code example explains how to set marker for all series.

JS

$("#container").ejChart({
    commonSeriesOptions: {
        type: 'spline', animation: true,
        marker:{
            shape: 'circle',
            size: {
                height: 10, width: 10
            },
            border:{color: "green", width: 3}, fill: "yellow", opacity: 0.5,
            visible: true
        }
    }
});

Screenshot

Following screenshot shows Chart with markers customized using commonSeriesOptions

The following code example explains how to set marker for specific series.

JS

$("#container").ejChart({
    series: [{
        type: 'spline', animation: true,
        marker:{
            shape: 'circle',
            size: {
                height: 10, width: 10
            },
            border:{color: "green", width: 3}, fill: "yellow", opacity: 0.5,
            visible: true
        }
    }]
});

Screenshot

Following screenshot shows Chart with marker specifically customized for first series in series collection

Conclusion

I hope you enjoyed learning on how to use markers in JavaScript Chart.