wix-style-react
Version:
60 lines (59 loc) • 2.88 kB
JavaScript
export default {
description:
'Radar chart allows users to display how a measured item is effective in different numerical parameters. It can indicate it’s relative influence to business, marketing campaigns, sales and similar criterias.',
do: [
'Use it to visualise influence of multiple data parameters.',
'Use it to display performance in multiple areas.',
],
dont: [
`Don’t use it to compare different data points. Use <BarChart/> or <StackedBarChart/> instead.`,
],
featureExamples: [
{
title: 'Fill',
description: `Control the chart color by specifying color for each data point. It accepts the following color variables: \`A1\` (default), \`A2\`, \`A3\`, \`A4\`, \`A5\`, \`A6\`.<br /><br />
If data points have different colors, chart will be filled with a linear gradient that is defined from the first color to the last color in the dots list.`,
example: '_fillExample',
},
{
title: 'Width',
description: `Control the dimensions of a chart with \`width\` prop. Changing the width will affect component height as well - it grows in 1:1 ratio.<br /><br />
Minimum width of a chart is 150px.`,
example: '_widthExample',
},
{
title: 'Data points',
description: `Define from 3 to 10 data points to display in a chart. Available properties for each point:<br/>
 - \`value\` - use to define a number that represents value in a chart<br/>
 - \`label\` - use to specify a label that represents value around the chart<br/>
 - \`color\` - use to specify data point color<br/>
 - \`tooltipContent\` - use to define a message visible in a tooltip on a data point hover over.`,
example: '_dataPointsExample',
},
{
title: 'Label distance',
description: `Control value label distance from a chart with \`labelDistance\` prop. It support two values:<br/>
 - \`medium\` - use it to increase the distance for better visual balance in larger charts<br/>
 - \`small\` (default) - use in all common cases`,
example: '_labelDistanceExample',
},
{
title: 'Scale',
description: `Define any number of scale circles in the chart with a \`scale\` array.`,
example: '_scaleExample',
},
{
title: 'Disabled',
description: `Disable all chart interactions with \`disabled\` prop. Use this as an empty state / content placeholder when there’s no data yet.`,
example: '_disabledExample',
},
],
commonUseCaseExamples: [
{
title: 'Empty state',
description:
'Use radar char in a disabled state as an empty state when there’s not enough data to create a chart yet. It will help to let users know upfront a possible benefit of analytics you’re offering.',
example: '_emptyStateExample',
},
],
};