Sparkline
info
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| autoDraw | Trace the length of the line when first rendered. | boolean | false |
| autoLineWidth | Automatically expand bars to use space efficiently. | boolean | false |
| autoDrawDuration | Amount of time (in ms) to run the trace animation. | number | 2000 |
| autoDrawEasing | The easing function to use for the trace animation. | string | 'ease' |
| color | Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page. | string | 'primary' |
| fill | Using the fill property allows you to better customize the look and feel of your sparkline. | boolean | false |
| gradient | An array of colors to use as a linear-gradient. | Array | ['#f72047', '#ffd200', '#1feaea'] |
| gradientDirection | The direction the gradient should run. | string | 'top' |
| height | Height of the SVG trendline or bars. | string|number | 75 |
| labelSize | The label font size. | string|number | 7 |
| labels | An array of string labels that correspond to the same index as its data counterpart. | array | [] |
| lineWidth | The thickness of the line, in px. | string|number | 2 |
| showLabels | Show labels below each data point. | boolean | false |
| radius | For create shapes with rounded corners. | number | 10 |
| smooth | number of px to use as a corner radius. true defaults to 8, false is 0 | boolean|string|number | 10 |
| type | Choose between a trendline or bars. | string | 'trend' |
| tabindex | It determines the order of switching from one component to another with the tab key. | string | |
| value | An array of numbers. | array | [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0] |
| width | Width of the SVG trendline or bars | string|number | 300 |
| visible | Visibility of Sparkline component. | boolean | true |
Samples Component
