Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- { headerName: 'Security Chart', field: 'SecurityChartData', width: 300, suppressMenu: true , cellRenderer: this.sparkLine }
- sparkLine() {
- const dataAttr = "7, 5, 6, 6, 4 ".split('; ') ;
- const data = dataAttr[0].split(', ').map(Number);
- const options = {
- series: [{
- data,
- pointStart: 1
- }],
- chart: {
- type: dataAttr || 'area'
- }
- }
- return <SparkLine options={options} />
- }
- import React, { Component } from 'react' ;
- import Highcharts from 'highcharts' ;
- const defaultOptions = {
- chart: {
- backgroundColor: null,
- borderWidth: 0,
- type: 'area',
- margin: [2, 0, 2, 0],
- width: 250,
- height: 40,
- style: {
- overflow: 'visible',
- align : 'center'
- },
- // small optimalization, saves 1-2 ms each sparkline
- skipClone: true
- },
- title: {
- text: ''
- },
- credits: {
- enabled: false
- },
- xAxis: {
- labels: {
- enabled: false
- },
- title: {
- text: null
- },
- startOnTick: false,
- endOnTick: false,
- tickPositions: []
- },
- yAxis: {
- endOnTick: false,
- startOnTick: false,
- labels: {
- enabled: false
- },
- title: {
- text: null
- },
- tickPositions: [0]
- },
- legend: {
- enabled: false
- },
- tooltip: {
- backgroundColor: 'red',
- borderWidth: 1,
- hideDelay: 0,
- shared: true,
- padding: 8,
- borderColor: 'white',
- borderRadius: 3,
- positioner: function (w, h, point) {
- return { x: point.plotX - w / 2, y: point.plotY - h };
- }
- },
- plotOptions: {
- series: {
- animation: false,
- lineWidth: 1,
- shadow: false,
- states: {
- hover: {
- lineWidth: 1
- }
- },
- marker: {
- radius: 1,
- states: {
- hover: {
- radius: 2
- }
- }
- },
- fillOpacity: 0.25
- },
- column: {
- negativeColor: '#910000',
- borderColor: 'silver'
- }
- },
- series: [{
- data: [1,2,3]
- }]
- };
- export default class SparkLine extends Component {
- constructor (props) {
- super(props)
- }
- componentDidMount () {
- const options = Highcharts.merge(defaultOptions, this.props.options)
- this.chart = Highcharts.chart(this.container, options)
- }
- componentWillUnmount () {
- this.chart.destroy()
- }
- render () {
- return (
- <td
- ref={container => this.container = container}
- >
- </td>
- )
- }
- }
Add Comment
Please, Sign In to add comment