in packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx [36:260]
private _gapsExample(): JSX.Element {
const data: IChartProps = {
chartTitle: 'Line Chart',
lineChartData: [
{
legend: 'Confidence Level',
legendShape: 'dottedLine',
hideNonActiveDots: true,
lineOptions: {
strokeDasharray: '5',
strokeLinecap: 'butt',
strokeWidth: '2',
},
data: [
{
x: new Date('2020-03-03T00:00:00.000Z'),
y: 250000,
hideCallout: true,
},
{
x: new Date('2020-03-10T00:00:00.000Z'),
y: 250000,
hideCallout: true,
},
],
color: DefaultPalette.black,
},
{
legend: 'Normal Data',
gaps: [
{
startIndex: 3,
endIndex: 4,
},
{
startIndex: 6,
endIndex: 7,
},
{
startIndex: 1,
endIndex: 2,
},
],
hideNonActiveDots: true,
lineOptions: {
lineBorderWidth: '4',
},
data: [
{
x: new Date('2020-03-03T00:00:00.000Z'),
y: 216000,
},
{
x: new Date('2020-03-03T10:30:00.000Z'),
y: 218123,
hideCallout: true,
},
// gap here
{
x: new Date('2020-03-03T11:00:00.000Z'),
y: 219000,
hideCallout: true,
},
{
x: new Date('2020-03-04T00:00:00.000Z'),
y: 248000,
hideCallout: true,
},
// gap here
{
x: new Date('2020-03-05T00:00:00.000Z'),
y: 252000,
hideCallout: true,
},
{
x: new Date('2020-03-06T00:00:00.000Z'),
y: 274000,
},
{
x: new Date('2020-03-07T00:00:00.000Z'),
y: 260000,
hideCallout: true,
},
// gap here
{
x: new Date('2020-03-08T00:00:00.000Z'),
y: 300000,
hideCallout: true,
},
{
x: new Date('2020-03-08T12:00:00.000Z'),
y: 218000,
},
{
x: new Date('2020-03-09T00:00:00.000Z'),
y: 218000,
},
{
x: new Date('2020-03-10T00:00:00.000Z'),
y: 269000,
},
],
color: DefaultPalette.blue,
},
{
legend: 'Low Confidence Data*',
legendShape: 'dottedLine',
hideNonActiveDots: true,
lineOptions: {
strokeDasharray: '2',
strokeDashoffset: '-1',
strokeLinecap: 'butt',
lineBorderWidth: '4',
},
gaps: [
{
startIndex: 3,
endIndex: 4,
},
{
startIndex: 1,
endIndex: 2,
},
],
data: [
{
x: new Date('2020-03-03T10:30:00.000Z'),
y: 218123,
},
{
x: new Date('2020-03-03T11:00:00.000Z'),
y: 219000,
},
// gap here
{
x: new Date('2020-03-04T00:00:00.000Z'),
y: 248000,
},
{
x: new Date('2020-03-05T00:00:00.000Z'),
y: 252000,
},
// gap here
{
x: new Date('2020-03-07T00:00:00.000Z'),
y: 260000,
},
{
x: new Date('2020-03-08T00:00:00.000Z'),
y: 300000,
},
],
color: DefaultPalette.blue,
},
{
legend: 'Green Data',
lineOptions: {
lineBorderWidth: '4',
},
data: [
{
x: new Date('2020-03-03T00:00:00.000Z'),
y: 297000,
},
{
x: new Date('2020-03-04T00:00:00.000Z'),
y: 284000,
},
{
x: new Date('2020-03-05T00:00:00.000Z'),
y: 282000,
},
{
x: new Date('2020-03-06T00:00:00.000Z'),
y: 294000,
},
{
x: new Date('2020-03-07T00:00:00.000Z'),
y: 224000,
},
{
x: new Date('2020-03-08T00:00:00.000Z'),
y: 300000,
},
{
x: new Date('2020-03-09T00:00:00.000Z'),
y: 298000,
},
{
x: new Date('2020-03-10T00:00:00.000Z'),
y: 299000,
},
],
color: DefaultPalette.green,
},
],
};
const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
const margins = { left: 35, top: 20, bottom: 35, right: 20 };
return (
<>
<label>change Width:</label>
<input type="range" value={this.state.width} min={500} max={1500} onChange={this._onWidthChange} />
<label>change Height:</label>
<input type="range" value={this.state.height} min={200} max={1000} onChange={this._onHeightChange} />
<div style={rootStyle}>
<LineChart
data={data}
legendsOverflowText={'Overflow Items'}
yMinValue={150000}
yMaxValue={400000}
height={this.state.height}
width={this.state.width}
margins={margins}
calloutProps={{
calloutMaxWidth: 200,
}}
getCalloutDescriptionMessage={this._calculateCalloutDescription}
/>
</div>
</>
);
}