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);
    }
  });
​
Whisper Components - Previous
Button
Next - Whisper Components
CollapseBox
Last modified 4mo ago
Copy link
On this page
Props:
Examples: