3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp<style scoped>

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp#mychart {

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp margin:10px 10px 10px 10px;

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp width:90%;

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp max-width: 800px;

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp height:400px;

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp}

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp</style>

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp<div class="intro">

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp<p>This example shows how to use group markers in a `Chart`.</p>

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp</div>

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp<div class="example">

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp{{>charts-groupmarkers-source}}

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp</div>

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp<h3>Using Group Markers in a Chart</h3>

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp<p>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`,

3f47e89ca53e21838a6d27cdd0465201bb108ab4Trippyou 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

3f47e89ca53e21838a6d27cdd0465201bb108ab4Trippyour chart. In this example, we'll take a large data set and display it on a `ComboSeries` with `groupMarkers`.</p>

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp```

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp//set canvas as the defaultGraphicEngine

3f47e89ca53e21838a6d27cdd0465201bb108ab4TrippYUI({

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp defaultGraphicEngine: "canvas"

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp}).use('charts', function (Y)

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp{

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp var myDataValues = getData();

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp //style the series

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp var myseries = [

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp {

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp styles: {

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp line: {

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp weight: 1

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp }

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp }

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp },

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp {

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp styles: {

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp line: {

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp weight: 1

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp }

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp }

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp }

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp ];

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp //instantiate chart with interactionType of planar and groupMarkers set to true

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp var mychart = new Y.Chart({

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp interactionType:"planar",

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp groupMarkers:true,

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp dataProvider:myDataValues,

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp categoryType:"time",

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp categoryKey:"date",

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp render:"#mychart",

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp seriesCollection: myseries,

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp width:800,

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp height:400

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp });

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp});

3f47e89ca53e21838a6d27cdd0465201bb108ab4Tripp```