in packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx [51:270]
private _styledExample(): JSX.Element {
const points: ILineChartPoints[] = [
{
data: [
{ x: new Date('2018/01/01'), y: 10, xAxisCalloutData: '2018/01/01', yAxisCalloutData: '10%' },
{ x: new Date('2018/02/01'), y: 30, xAxisCalloutData: '2018/01/15', yAxisCalloutData: '18%' },
{ x: new Date('2018/03/01'), y: 10, xAxisCalloutData: '2018/01/28', yAxisCalloutData: '24%' },
{ x: new Date('2018/04/01'), y: 30, xAxisCalloutData: '2018/02/01', yAxisCalloutData: '25%' },
{ x: new Date('2018/05/01'), y: 10, xAxisCalloutData: '2018/03/01', yAxisCalloutData: '15%' },
{ x: new Date('2018/06/01'), y: 30, xAxisCalloutData: '2018/03/15', yAxisCalloutData: '30%' },
],
legend: 'First',
color: DefaultPalette.blue,
onLegendClick: this._onLegendClickHandler,
},
{
data: [
{ x: new Date('2018/01/01'), y: 30 },
{ x: new Date('2018/02/01'), y: 50 },
{ x: new Date('2018/03/01'), y: 30 },
{ x: new Date('2018/04/01'), y: 50 },
{ x: new Date('2018/05/01'), y: 30 },
{ x: new Date('2018/06/01'), y: 50 },
],
legend: 'Second',
color: DefaultPalette.green,
onLegendClick: this._onLegendClickHandler,
},
{
data: [
{ x: new Date('2018/01/01'), y: 50 },
{ x: new Date('2018/02/01'), y: 70 },
{ x: new Date('2018/03/01'), y: 50 },
{ x: new Date('2018/04/01'), y: 70 },
{ x: new Date('2018/05/01'), y: 50 },
{ x: new Date('2018/06/01'), y: 70 },
],
legend: 'Third',
color: DefaultPalette.red,
onLegendClick: this._onLegendClickHandler,
},
{
data: [
{ x: new Date('2018/01/01'), y: 70 },
{ x: new Date('2018/02/01'), y: 90 },
{ x: new Date('2018/03/01'), y: 70 },
{ x: new Date('2018/04/01'), y: 90 },
{ x: new Date('2018/05/01'), y: 70 },
{ x: new Date('2018/06/01'), y: 90 },
],
legend: 'Fourth',
color: DefaultPalette.black,
onLegendClick: this._onLegendClickHandler,
},
{
data: [
{ x: new Date('2018/01/01'), y: 90 },
{ x: new Date('2018/02/01'), y: 110 },
{ x: new Date('2018/03/01'), y: 90 },
{ x: new Date('2018/04/01'), y: 110 },
{ x: new Date('2018/05/01'), y: 90 },
{ x: new Date('2018/06/01'), y: 110 },
],
legend: 'Fifth',
color: DefaultPalette.magentaDark,
onLegendClick: this._onLegendClickHandler,
},
{
data: [
{ x: new Date('2018/01/01'), y: 110 },
{ x: new Date('2018/02/01'), y: 130 },
{ x: new Date('2018/03/01'), y: 110 },
{ x: new Date('2018/04/01'), y: 130 },
{ x: new Date('2018/05/01'), y: 110 },
{ x: new Date('2018/06/01'), y: 130 },
],
legend: 'Sixth',
color: DefaultPalette.purple,
onLegendClick: this._onLegendClickHandler,
},
{
data: [
{ x: new Date('2018/01/01'), y: 130 },
{ x: new Date('2018/02/01'), y: 150 },
{ x: new Date('2018/03/01'), y: 130 },
{ x: new Date('2018/04/01'), y: 150 },
{ x: new Date('2018/05/01'), y: 130 },
{ x: new Date('2018/06/01'), y: 150 },
],
legend: 'Seventh',
color: DefaultPalette.yellow,
onLegendClick: this._onLegendClickHandler,
},
{
data: [
{ x: new Date('2018/01/01'), y: 150 },
{ x: new Date('2018/02/01'), y: 170 },
{ x: new Date('2018/03/01'), y: 150 },
{ x: new Date('2018/04/01'), y: 170 },
{ x: new Date('2018/05/01'), y: 150 },
{ x: new Date('2018/06/01'), y: 170 },
],
legend: 'Eight',
color: DefaultPalette.teal,
onLegendClick: this._onLegendClickHandler,
},
{
data: [
{ x: new Date('2018/01/01'), y: 170 },
{ x: new Date('2018/02/01'), y: 190 },
{ x: new Date('2018/03/01'), y: 170 },
{ x: new Date('2018/04/01'), y: 190 },
{ x: new Date('2018/05/01'), y: 170 },
{ x: new Date('2018/06/01'), y: 190 },
],
legend: 'Ninth',
color: 'cyan',
onLegendClick: this._onLegendClickHandler,
},
{
data: [
{ x: new Date('2018/01/01'), y: 190 },
{ x: new Date('2018/02/01'), y: 210 },
{ x: new Date('2018/03/01'), y: 190 },
{ x: new Date('2018/04/01'), y: 210 },
{ x: new Date('2018/05/01'), y: 190 },
{ x: new Date('2018/06/01'), y: 210 },
],
legend: 'Tenth',
color: DefaultPalette.orangeLighter,
onLegendClick: this._onLegendClickHandler,
},
{
data: [
{ x: new Date('2018/01/01'), y: 210 },
{ x: new Date('2018/02/01'), y: 230 },
{ x: new Date('2018/03/01'), y: 210 },
{ x: new Date('2018/04/01'), y: 230 },
{ x: new Date('2018/05/01'), y: 210 },
{ x: new Date('2018/06/01'), y: 230 },
],
legend: 'Eleventh',
color: 'magenta',
onLegendClick: this._onLegendClickHandler,
},
{
data: [
{ x: new Date('2018/01/01'), y: 230 },
{ x: new Date('2018/02/01'), y: 250 },
{ x: new Date('2018/03/01'), y: 230 },
{ x: new Date('2018/04/01'), y: 250 },
{ x: new Date('2018/05/01'), y: 230 },
{ x: new Date('2018/06/01'), y: 250 },
],
legend: 'Tweleth',
color: DefaultPalette.redDark,
onLegendClick: this._onLegendClickHandler,
},
];
const data: IChartProps = {
chartTitle: 'Line Chart',
lineChartData: points,
};
const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
const timeFormat = '%m/%d';
// Passing tick values is optional, for more control.
// If you do not pass them the line chart will render them for you based on D3's standard.
const tickValues: Date[] = [
new Date('01-01-2018'),
new Date('02-01-2018'),
new Date('03-01-2018'),
new Date('04-01-2018'),
new Date('05-01-2018'),
new Date('06-01-2018'),
new Date('07-01-2018'),
];
const colorFillBarData = [
{
legend: 'Time range 1',
color: 'blue',
data: [
{
startX: new Date('2018/01/06'),
endX: new Date('2018/01/25'),
},
],
},
{
legend: 'Time range 2',
color: 'red',
data: [
{
startX: new Date('2018/01/18'),
endX: new Date('2018/02/20'),
},
{
startX: new Date('2018/04/17'),
endX: new Date('2018/05/10'),
},
],
applyPattern: true,
},
];
return (
<div style={rootStyle}>
<LineChart
data={data}
strokeWidth={4}
tickFormat={timeFormat}
tickValues={tickValues}
height={this.state.height}
width={this.state.width}
legendProps={{ canSelectMultipleLegends: true, allowFocusOnLegends: true }}
colorFillBars={colorFillBarData}
allowMultipleShapesForPoints={this.state.allowMultipleShapes}
/>
</div>
);
}