1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<style scoped>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp margin:10px 10px 10px 10px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp max-width: 800px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp height:400px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="intro">
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp<p>This example shows how to use group markers in a `Chart`.</p>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="example">
2431f6aca1be7f7a136c5df34022e3f902490075Tripp{{>charts-groupmarkers-source}}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<h3>Using Group Markers in a Chart</h3>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<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`,
d676c69348c891c2a261a6dbd4f450ddb2e312f3Trippyou 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
2431f6aca1be7f7a136c5df34022e3f902490075Trippyour chart. In this example, we'll take a large data set and display it on a `ComboSeries` with `groupMarkers`.</p>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp//set canvas as the defaultGraphicEngine
2431f6aca1be7f7a136c5df34022e3f902490075Tripp defaultGraphicEngine: "canvas"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp}).use('charts', function (Y)
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var myDataValues = getData();
2431f6aca1be7f7a136c5df34022e3f902490075Tripp //style the series
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var myseries = [
2431f6aca1be7f7a136c5df34022e3f902490075Tripp //instantiate chart with interactionType of planar and groupMarkers set to true
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var mychart = new Y.Chart({
2431f6aca1be7f7a136c5df34022e3f902490075Tripp interactionType:"planar",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp groupMarkers:true,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp dataProvider:myDataValues,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp categoryType:"time",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp categoryKey:"date",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp render:"#mychart",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp seriesCollection: myseries,