#

# Example: Group Marker Chart

This example shows how to use group markers in a `Chart`.

### Using Group Markers in a Chart

By default, charts render a marker for each data point in a series. This is useful for interactivity and custom styling but when there are many data points, performance can suffer. With a `ComboSeries`, you can set `showMarkers` to false and `interactionType` to `planar` for larger data sets, but this is of no help with a histogram. Additionally, you may still prefer visual markers for each data point in your chart. In this example, we'll take a large data set and display it on a `ComboSeries` with `groupMarkers`.

#### CSS

    #mychart {
        margin:10px 10px 10px 10px;
        width:90%;
        max-width: 800px;
        height:400px;
    }

#### HTML

    <div id="mychart"></div>

#### JavaScript

    //set canvas as the defaultGraphicEngine
    YUI({
        defaultGraphicEngine: "canvas"
    }).use('charts', function (Y)
    {
        var myDataValues = getData();

        //style the series
        var myseries = [
            {
                styles: {
                    line: {
                        weight: 1
                    }
                }
            },
            {
                styles: {
                    line: {
                        weight: 1
                    }
                }
            }

        ];

        //instantiate chart with interactionType of planar and groupMarkers set to true
        var mychart = new Y.Chart({
                interactionType:"planar",
                groupMarkers:true,
                dataProvider:myDataValues,
                categoryType:"time",
                categoryKey:"date",
                render:"#mychart",
                seriesCollection: myseries,
            });

    });