Chart
A chart is a graphical representation for data visualization. A chart can represent tabular numeric data, functions, as well as many other data points.

Props:

Name
Type
Description
Required
Default
chartTitle
string
Title of the chart. Appears above the chart.
heightToWidthRatio
string
Sets the height-to-width ratio of the chart. The width of the chart is automatically set to 100% of the width of the Whisper card and popup window so the height is defined as a ratio of the width (rather than as an absolute value).
1
horizontalLineTotal
number
Set the total number of horizontal lines showing on the grid.
auto-calculated
horizontalGridLines
boolean
Show horizontal lines on the grid.
true
margin
{ left:number, right:number, top:number, bottom:number }
Set the margins around the chart. This is especially useful for widening the left or bottom margins to accommodate larger tick mark labels. The units are expressed in pixels.
{ left: 40, right: 10, top: 10, bottom: 40 }
series
Series<+SeriesType>[]
An array of the series that will appear in the chart. Up to 10 series may be provided. SeriesType { Area = 'area', Line = 'line', Mark = 'mark', VerticalBar = 'verticalBar', }
showChartInPopupWindowOnly
boolean
If true, the chart will only appear in the popup window and not in the Whisper itself.
false
showCrosshair
boolean
If true, show a tooltip when hovering over the chart, which displays the nearest x value and the corresponding y values for all series.
true
verticalGridLines
boolean
Show vertical lines on the grid.
true
verticalLineTotal
number
Set the total number of vertical lines showing on the grid.
auto-calculated
xAxis
boolean
Show the x-axis.
true
xAxisLabel
string
Set the x-axis label.
xAxisPadding
number
Sets the right and left (inside the x-axis) padding as a percentage of the chart width. Half of the provided value is applied to each side.
no padding
xAxisScale
+AxisScale
Scales determine how the data should be interpreted. The three scales available are linear, ordinal, and time.
Linear: a continuous scale that works with numbers.
Ordinal: a discrete, ordered set that works with numbers or strings. For example, the x values could contain the months of the year in string form.
Time: used for time series. x values will be interpreted as unix time.
liner
xAxisTickTotal
number
Total number of tick marks on the x-axis.
auto-calculated
xAxisTickLabelAngle
number
Set the angle of the tick mark labels on the x-axis in terms of degrees (positive or negative).
0
yAxis
boolean
Show the y-axis
true
yAxisLabel
string
Set the y-axis label
yAxisPadding
number
Sets the right and left (inside the y-axis) padding as a percentage of the chart width. Half of the provided value is applied to each side.
no padding
yAxisScale
+AxisScale
Scales determine how the data should be interpreted. The three scales available are linear, ordinal, and time.
Linear: a continuous scale that works with numbers.
Ordinal: a discrete, ordered set that works with numbers or strings. For example, the y values could contain the months of the year in string form.
Time: used for time series. Y values will be interpreted as unix time.
liner
yAxisTickLabelAngle
number
Set the angle of the tick mark labels on the y-axis in terms of degrees (positive or negative).
0
yAxisTickTotal
number
Total number of tick marks on the y-axis.
auto-calculated
Please note: Types marked with + are Olive LDK enums

Examples:

Area Graph:
Bar Graph:
Line Graph:
Mark Graph:
Four Series Graph:
Please note: The Chart Component is a beta feature.
Javascript
React
import { whisper } from '@oliveai/ldk';
import {
SeriesType,
WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';
const areaSeries = [
{
data: [
{ x: 1, y: 0 },
{ x: 1, y: 10 },
{ x: 2, y: 5 },
{ x: 3, y: 15 },
],
title: 'Test Area 1',
type: SeriesType.Area,
},
{
data: [
{ x: 1, y: 0 },
{ x: 1, y: 3 },
{ x: 2, y: 1 },
{ x: 3, y: 6 },
],
title: 'Test Area 2',
type: SeriesType.Area,
},
];
const barSeriesData = [
{
barWidth: 2,
data: [
{ x: 50, y: 200 },
{ x: 150, y: 100 },
{ x: 400, y: 50 },
{ x: 600, y: 150 },
],
title: 'Test Bars 1',
type: SeriesType.VerticalBar,
},
{
barWidth: 1,
data: [
{ x: 100, y: 200 },
{ x: 200, y: 100 },
{ x: 300, y: 50 },
{ x: 500, y: 150 },
],
title: 'Test Bars 2',
type: SeriesType.VerticalBar,
},
];
const lineSeriesData = [
{
data: [
{ x: 20, y: 200 },
{ x: 150, y: 100 },
{ x: 400, y: 50 },
{ x: 600, y: 150 },
],
title: 'Test Bars 1',
type: SeriesType.Line,
},
{
data: [
{ x: 10, y: 200 },
{ x: 100, y: 100 },
{ x: 200, y: 50 },
{ x: 300, y: 150 },
],
title: 'Test Bars 2',
type: SeriesType.Line,
},
];
const markSeriesData = [
{
data: [
{ x: 20, y: 200 },
{ x: 150, y: 100 },
{ x: 400, y: 50 },
{ x: 600, y: 150 },
],
title: 'Test Bars 1',
type: SeriesType.Mark,
},
{
data: [
{ x: 10, y: 200 },
{ x: 100, y: 100 },
{ x: 200, y: 50 },
{ x: 300, y: 150 },
],
title: 'Test Bars 2',
type: SeriesType.Mark,
},
];
const fourSeriesData = [
{
data: [
{ x: 100, y: 0 },
{ x: 100, y: 100 },
{ x: 200, y: 500 },
{ x: 300, y: 150 },
],
title: 'Test Area 1',
type: SeriesType.Area,
},
{
data: [
{ x: 100, y: 0 },
{ x: 100, y: 300 },
{ x: 200, y: 100 },
{ x: 300, y: 600 },
],
title: 'Test Area 2',
type: SeriesType.Area,
},
{
barWidth: 2,
data: [
{ x: 50, y: 200 },
{ x: 150, y: 100 },
{ x: 400, y: 50 },
{ x: 600, y: 150 },
],
title: 'Test Bars 1',
type: SeriesType.VerticalBar,
},
{
barWidth: 1,
data: [
{ x: 100, y: 200 },
{ x: 200, y: 100 },
{ x: 300, y: 50 },
{ x: 500, y: 150 },
],
title: 'Test Bars 2',
type: SeriesType.VerticalBar,
},
{
data: [
{ x: 20, y: 200 },
{ x: 150, y: 100 },
{ x: 400, y: 50 },
{ x: 600, y: 150 },
],
title: 'Test Bars 1',
type: SeriesType.Line,
},
{
data: [
{ x: 10, y: 200 },
{ x: 100, y: 100 },
{ x: 200, y: 50 },
{ x: 300, y: 150 },
],
title: 'Test Bars 2',
type: SeriesType.Line,
},
{
data: [
{ x: 20, y: 200 },
{ x: 150, y: 100 },
{ x: 400, y: 50 },
{ x: 600, y: 150 },
],
title: 'Test Bars 1',
type: SeriesType.Mark,
},
{
data: [
{ x: 10, y: 200 },
{ x: 100, y: 100 },
{ x: 200, y: 50 },
{ x: 300, y: 150 },
],
title: 'Test Bars 2',
type: SeriesType.Mark,
},
];
const chartWhisper = async () => {
await whisper.create({
label: 'Chart',
onClose: () => {
console.log('Closed chart Whisper');
},
components: [
{
type: WhisperComponentType.Chart,
chartTitle: 'Area Graph',
series: areaSeries,
xAxisLabel: "Custom X Axis Label",
yAxisLabel: "Custom Y Axis Label",
},
{
type: WhisperComponentType.Chart,
chartTitle: "Bar Graph",
series: barSeriesData,
xAxisLabel: "Custom X Axis Label",
yAxisLabel: "Custom Y Axis Label",
},
{
type: WhisperComponentType.Chart,
chartTitle: "Line Graph",
series: lineSeriesData,
xAxisLabel: "Custom X Axis Label",
yAxisLabel: "Custom Y Axis Label",
},
{
type: WhisperComponentType.Chart,
chartTitle: "Mark Graph",
series: markSeriesData,
xAxisLabel: "Custom X Axis Label",
yAxisLabel: "Custom Y Axis Label",
},
{
type: WhisperComponentType.Chart,
chartTitle: "Four Series Graph",
series: fourSeriesData,
xAxisLabel: "Custom X Axis Label",
yAxisLabel: "Custom Y Axis Label",
},
],
});
}
import { whisper, React, ReactWhisper } from '@oliveai/ldk';
import { AxisScale, SeriesColor, SeriesType } from '@oliveai/ldk/dist/whisper/types';
import { onActionWrapper } from '../utils';
type SeriesInput = {
barWidth?: number;
color?: SeriesColor;
numberOfPoints?: number;
title: string;
type: SeriesType;
};
const generateSeries = (inputs: SeriesInput[]) =>
inputs.map((input) => {
const data = [];
for (let i = 0; i < (input.numberOfPoints || 20); i += 1) {
const x = Math.floor(Math.random() * 100);
const y = Math.floor(Math.random() * 100);
data.push({ x, y });
}
return { ...input, data };
});
type RegenerateButtonParams = {
setter: React.Dispatch<React.SetStateAction<SeriesInput[]>>;
seriesData: SeriesInput[];
};
const RegenerateButton = ({ setter, seriesData }: RegenerateButtonParams) => {
const handleClick = () => {
setter(generateSeries(seriesData));
};
return (
<oh-box justifyContent={whisper.JustifyContent.Center} direction={whisper.Direction.Horizontal}>
<oh-button label="Regenerate Chart Data" onClick={handleClick} />
</oh-box>
);
};
export const testChart = (): Promise<boolean> =>
new Promise(async (resolve, reject) => {
const resolverMap = new Map([
['AreaGraph', false],
['BarGraph', false],
['LineGraph', false],
['MarkGraph', false],
['FourSeries', false],
]);
const ConfirmationButtons = ({
question,
testName,
}: {
question: string;
testName: string;
}) => {
const [isTested, setIsTested] = React.useState(false);
const handleClick: whisper.WhisperHandler = (error, thisWhisper) => {
onActionWrapper(error, testName, resolverMap, thisWhisper, resolve, reject);
setIsTested(true);
};
return (
<>
<oh-box
justifyContent={whisper.JustifyContent.Center}
direction={whisper.Direction.Horizontal}
>
<oh-markdown body={question} />
</oh-box>
<oh-box
justifyContent={whisper.JustifyContent.Center}
direction={whisper.Direction.Horizontal}
>
{isTested ? (
<oh-icon name="done" />
) : (
<>
<oh-button label="Yes" onClick={handleClick} />
<oh-button label="No" onClick={() => reject(new Error(`${testName} failed`))} />
</>
)}
</oh-box>
</>
);
};
try {
const AreaGraph = () => {
const series = [
{
data: [
{ x: 1, y: 0 },
{ x: 1, y: 10 },
{ x: 2, y: 5 },
{ x: 3, y: 15 },
],
title: 'Test Area 1',
type: SeriesType.Area,
},
{
data: [
{ x: 1, y: 0 },
{ x: 1, y: 3 },
{ x: 2, y: 1 },
{ x: 3, y: 6 },
],
title: 'Test Area 2',
type: SeriesType.Area,
},
];
return (
<>
<oh-chart
chartTitle="Area Graph Test"
series={series}
xAxisLabel="Custom X Axis Label"
yAxisLabel="Custom Y Axis Label"
/>
<ConfirmationButtons
question="Does the chart display an area graph, custom axis labels, and a tooltip when you hover your mouse?"
testName="AreaGraph"
/>
<oh-divider />
</>
);
};
const BarGraph = () => {
const seriesData = [
{
barWidth: 2,
numberOfPoints: 5,
title: 'Test Bars 1',
type: SeriesType.VerticalBar,
},
{
barWidth: 1,
numberOfPoints: 5,
title: 'Test Bars 2',
type: SeriesType.VerticalBar,
},
];
const [series, setSeries] = React.useState(generateSeries(seriesData));
return (
<>
<oh-chart
chartTitle="Bar Graph Test"
series={series}
xAxisLabel="Custom X Axis Label"
yAxisLabel="Custom Y Axis Label"
/>
<ConfirmationButtons
question="Does the chart display a bar graph, custom axis labels, and a tooltip when you hover your mouse? Are the bars for Test Bars 1 wider than Test Bars 2?"
testName="BarGraph"
/>
<RegenerateButton setter={setSeries} seriesData={seriesData} />
<oh-divider />
</>
);
};
const LineGraph = () => {
const seriesData = [
{
numberOfPoints: 5,
title: 'Test Lines 1',
type: SeriesType.Line,
},
{
numberOfPoints: 5,
title: 'Test Lines 2',
type: SeriesType.Line,
},
];
const [series, setSeries] = React.useState(generateSeries(seriesData));
const [sortedSeries, setSortedSeries] = React.useState(series);
React.useEffect(() => {
setSortedSeries(
series.map((unsortedSeries) => {
const data = unsortedSeries.data.sort((a, b) => a.x - b.x);
return {
...unsortedSeries,
data,
};
}),
);
}, [series]);
return (
<>
<oh-chart
chartTitle="Line Graph Test"
series={sortedSeries}
xAxisLabel="Custom X Axis Label"
yAxisLabel="Custom Y Axis Label"
/>
<ConfirmationButtons
question="Does the chart display a line graph, custom axis labels, and a tooltip when you hover your mouse?"
testName="LineGraph"
/>
<RegenerateButton setter={setSeries} seriesData={seriesData} />
<oh-divider />
</>
);
};
const MarkGraph = () => {
const seriesData = [
{
numberOfPoints: 5,
title: 'Test Mark 1',
type: SeriesType.Mark,
},
{
numberOfPoints: 5,
title: 'Test Mark 2',
type: SeriesType.Mark,
},
];
const [series, setSeries] = React.useState(generateSeries(seriesData));
return (
<>
<oh-chart
chartTitle="Mark Graph Test"
series={series}
xAxisLabel="Custom X Axis Label"
yAxisLabel="Custom Y Axis Label"
/>
<ConfirmationButtons
question="Does the chart display a mark graph, custom axis labels, and a tooltip when you hover your mouse?"
testName="MarkGraph"
/>
<RegenerateButton setter={setSeries} seriesData={seriesData} />
<oh-divider />
</>
);
};
const FourSeries = () => {
const seriesData: SeriesInput[] = [
{
numberOfPoints: 5,
title: 'Area Graph',
type: SeriesType.Area,
},
{
numberOfPoints: 5,
title: 'Bar Graph',
type: SeriesType.VerticalBar,
},
{
numberOfPoints: 5,
title: 'Line Graph',
type: SeriesType.Line,
},
{
numberOfPoints: 5,
title: 'Mark Graph',
type: SeriesType.Mark,
},
];
const [series, setSeries] = React.useState(generateSeries(seriesData));
return (
<>
<oh-chart
chartTitle="Four Series Test"
series={series}
xAxisLabel="Custom X Axis Label"
yAxisLabel="Custom Y Axis Label"
/>
<ConfirmationButtons
question="Does the chart display area, bar, line, and mark graphs?"
testName="FourSeries"
/>
<RegenerateButton setter={setSeries} seriesData={seriesData} />
<oh-divider />
</>
);
};
const ChartTest = () => (
<oh-whisper label="Chart Test" onClose={() => console.debug('closed')}>
<AreaGraph />
<BarGraph />
<LineGraph />
<MarkGraph />
<FourSeries />
</oh-whisper>
);
ReactWhisper.renderNewWhisper(<ChartTest />);
} catch (e) {
console.error(e);
reject(e);
}
});
Copy link
On this page
Props:
Examples: