)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

What is the use of commonSeriesOptions in the Chart?

Platform: jQuery |
Control: ejChart |
Published Date: May 26, 2015 |
Last Revised Date: July 3, 2019

The commonSeriesOptions property allows you to customize marker, data label and other properties of all the series in the Chart. All the properties except the points property in the series are customizable by using the commonSeriesOptions property.

For example, changing the marker shape in the commonSeriesOptions changes the marker shape of all the series. To customize the marker and other properties for a specific series, you need to provide the values to the properties of that specific series in the series collection. In general, values provided to the series in series collection overrides the values provided through commonSeriesOptions. Refer to the following code example.

JS

$("#container").ejChart({
    //Enabling marker for all series through commonSeriesOptions
    commonSeriesOptions: {
        marker: {
            visible:true
        }
    },
    series: [{
        points: [
            { x: 1, y: 25 }, { x: 2, y: 36 }, { x: 3, y:41 }, { x: 4, y: 61 }
        ],
        //Customizing marker specifically for first series
        marker: {
            visible: true,
            size: { width: 10, height: 10 },
            fill: 'blue'
        }
    },
    {
        points: [
            { x: 1, y: 35 }, { x: 2, y: 26 }, { x: 3, y: 51 }, { x: 4, y: 69 }
        ]
    },
    {
        points: [
            { x: 1, y: 72 }, { x: 2, y: 29 }, { x: 3, y: 48 }, { x: 4, y: 39 }
        ]
    },
    {
        points: [
            { x: 1, y: 52 }, { x: 2, y: 58 }, { x: 3, y: 32 }, { x: 4, y: 11 }
        ]
    }]
    . . . . . . .
    . . . . . . .
});

 

The following screenshot displays the Chart with markers enabled by using the commonSeriesOptions and the marker fill color is customized specifically for the first series by using series collection.

commonSeriesOptions uses in chart

JS Playground sample link: CommonSeriesOptions

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon