render() { return ( <Line data={this.data} width={100} height={300} options={this.options} /> ) }
render() { const divStyle ={ "marginTop" : "10px" } return ( <div className="block" style={divStyle}> <Line data={this.state} width={400} height={255}/> </div> ); }
render() { return ( <div> <Modal id = "line" type= {<Line data={this.state.data} options={{}} />} /> </div> ) }
render() { // Construct the `data` object in the format the `Line` component expects. const data = { labels: this.timeLabels, datasets: [{ label: this.powerLineLabel, data: this.state.totalOutputPowerHistory, backgroundColor: this.powerLineBackgroundColor, borderColor: this.powerLineBorderColor, borderWidth: 1, pointBackgroundColor: this.powerLineBorderColor, pointRadius: this.state.pointRadius, pointHoverRadius: this.state.pointRadius }] }; return ( <div className='power-output-chart--chart-wrapper'> <Line data={data} options={this.options} legend={this.legend}/> </div> ); }
render () { let { dayReports, admin } = this.props; if (!dayReports) return <b>LOADING</b>; console.log({ admin }) return ( <div> { admin && ( <div> <h2>unrealized vs realized return %</h2> <Line data={processDayReports.unrealizedVsRealized(dayReports)} /> </div> ) } <h2>forPurchase PM</h2> <Line data={processDayReports.spyVsForPurchase(dayReports)} /> <h2>pick to execution %</h2> <Line data={processDayReports.pickToExecutionPerc(dayReports)} /> <h2>fill perc %</h2> <Line data={processDayReports.fillPerc(dayReports)} /> </div> ) }
<Line data={dataLine} options={{ responsive: true }} /> </SectionContainer>
const Graph = ({ title, data, dataProp, dataFn, curQuote, pickPrice, avgBuyPrice }) => { const values = data[dataProp]; if (!values) return null; console.log({ avgBuyPrice }) const annotations = title === 'Price observer' && curQuote ? [ annotateBox(curQuote), annotateLine(pickPrice, 'pickPrice', 'blue', 100, 20), ...avgBuyPrice ? [annotateLine(avgBuyPrice, 'avgBuyPrice', 'orange', -100, -20)] : [], ] : []; return ( <div> <h2>{title}</h2> <Line plugins={[ChartAnnotation]} data={dataFn(data)} options={{ annotation: { annotations } }} /> </div> ) }
render() { return <Line data={data} />; }
</div> <div className="main chartjs-2-wrapper"> <Line data={this.state.chartData} options={{}}
render(){ return ( <div className="chart"> <Line data={this.state.chartData} options={{ title:{ display:this.props.displayTitle, text:this.props.location, fontSize:25 }, legend:{ display:this.props.displayLegend, position:this.props.legendPosition } }} /> </div> ) }
const LineChart = ({ dateAnalysis, props }) => { return ( <Line data={{ labels: dateAnalysis.map(({ date }) => date), datasets: props .map((prop, i) => ({ label: prop, fill: false, lineTension: 0.1, backgroundColor: colors[i], borderColor: colors[i], borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: colors[i], pointBackgroundColor: '#fff', pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: colors[i], pointHoverBorderColor: colors[i], pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: dateAnalysis.map(analysis => analysis[prop]) })) }} /> ); }
render(){ return ( <div className="chart"> <Line data={this.createLineChartData(this.props.data)} options={{ title:{ display:true, text:this.props.data.header_text, fontSize:25 }, legend:{ display:true, position:"right" } }} /> </div> ) }
const Chart = props => <Line data={props.data} options={props.options} />
render() { return ( <Line data={this.data} width={100} height={300} options={this.options} /> ) }
<Line data={dataLine} options={{ responsive: true }} /> </SectionContainer>