# Customizing Points 1. [Overview](https://developers.google.com/chart/interactive/docs/points#overview) 2. [Some simple examples](https://developers.google.com/chart/interactive/docs/points#simple_example) 3. [Rotations](https://developers.google.com/chart/interactive/docs/points#rotations) 4. [Customizing individual points](https://developers.google.com/chart/interactive/docs/points#individual) ## Overview In many Google Charts, data values are displayed at precise points. A line chart is just a set of these points connected by lines, and a scatter chart is nothing but points. In all charts but the scatter chart, these points are zero-sized by default. You can control their size with the `pointSize` option, and their shape with the `pointShape` option. Above, you can see a chart with six series, each with `pointSize` 30 but a different `pointShape`. Options ``` var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 7 }, pointSize: 30, series: { 0: { pointShape: 'circle' }, 1: { pointShape: 'triangle' }, 2: { pointShape: 'square' }, 3: { pointShape: 'diamond' }, 4: { pointShape: 'star' }, 5: { pointShape: 'polygon' } } }; ``` Full HTML ```

``` ## Some simple examples Unlike the chart in the previous section, most charts have just one series. Here's an example of a line chart with 20pt circular points: Since the default `pointShape` is the circle, we can leave it out of the options: Options ``` var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, curveType: 'function', pointSize: 20, }; ``` Full HTML ```

``` You can change it from "circle" to another shape by setting `pointShape` to "triangle", "square", "diamond", "star", or "polygon": Options ``` var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, colors: ['#795548'], pointSize: 20, pointShape: 'square' }; ``` Full HTML ```

``` The 'star' and 'polygon' shapes let you customize the number of sides, both defaulting to five. Some four-sided stars: Options ``` var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, colors: ['#EF851C'], pointSize: 30, pointShape: { type: 'star', sides: 4 } }; ``` Full HTML ```

``` Stars can be further customized with the `dent` option, which controls how concave the star is. When the dent is close to zero, the star will be starfish-like; as the dent approaches one, it'll bloat past an equilateral polygon. Here are dents ranging from 0.05 to 0.8 for five sided stars: Options ``` var options = { legend: 'none', hAxis: { textPosition: 'none' }, vAxis: { textPosition: 'none', gridlines: { count: 0 }, baselineColor: 'white' }, colors: ['#E94D20', '#ECA403', '#63A74A', '#15A0C8', '#4151A3', '#703593', '#981B48'], pointSize: 20, annotations: { stemColor: 'white', textStyle: { fontSize: 16 } }, series: { 0: { pointShape: { type: 'star', sides: 5, dent: 0.05 } }, 1: { pointShape: { type: 'star', sides: 5, dent: 0.1 } }, 2: { pointShape: { type: 'star', sides: 5, dent: 0.2 } }, 3: { pointShape: { type: 'star', sides: 5 } }, 4: { pointShape: { type: 'star', sides: 5, dent: 0.5 } }, 5: { pointShape: { type: 'star', sides: 5, dent: 0.7 } }, 6: { pointShape: { type: 'star', sides: 5, dent: 0.8 } }, } }; ``` Full HTML ```

``` ## Rotations All point shapes can be rotated with the `rotation` option, specified in degrees. For instance, we can make our triangles point downward in the following area chart by rotating them 180 degrees: Options ``` var options = { legend: 'none', colors: ['#15A0C8'], pointSize: 30, pointShape: { type: 'triangle', rotation: 180 } }; ``` Full HTML ```

``` ## Customizing individual points By default, the styles applied to a point apply to all points in the series. If you want to change the appearance of a particular data point, you can do so by styling it. In the following chart, we increase the size of one of the points, lower the opacity to 0.3, and change the shape and color: \

``` The following style customizations are available: - `fill-color` (Specified as a hex string.) - `shape-dent` - `shape-rotation` - `shape-sides` - `shape-type` - `stroke-color` (Specified as a hex string.) - `stroke-width` (Specified as a hex string.) - `size` - `visible` (Whether the point is visible or not.) The opacity is controlled not through a style, but with the `dataOpacity` option.