Developer Usage with different chart types
- For usage with Line chart, refer to the example in the Line chart.
- For usage with Bar chart, refer to the example in the Stacked bar chart.
- For usage with Donut chart, refer to the example in the Donut chart.
Custom shape as LegendItem
You can set your custom SVG shape for a LegendItem.
tsx
import React from 'react';
import { ChartLegend, LegendItem } from '@semcore/d3-chart';
import { useColorResolver } from '@semcore/utils/lib/use/useColorResolver';
const data = [...Array(5).keys()].map((d, i) => ({
x: i,
Line1: Math.random() * 10,
Line2: Math.random() * 10,
Line3: Math.random() * 10,
Line4: Math.random() * 10,
Line5: Math.random() * 10,
}));
const Shape = (props) => {
const colorResolver = useColorResolver();
return (
<div
style={{
width: '0',
height: '0',
borderTop: '8px solid transparent',
borderLeft: `16px solid ${colorResolver(props.color)}`,
borderBottom: '8px solid transparent',
marginRight: '4px',
}}
/>
);
};
const Demo = () => {
const lines = Object.keys(data[0])
.filter((name) => name !== 'x')
.reduce<LegendItem[]>((res, item, index) => {
res.push({
id: item,
label: item,
checked: true,
color: `chart-palette-order-${index + 1}`,
});
return res;
}, []);
return (
<div>
<ChartLegend items={lines}>
<ChartLegend.LegendItem>
<ChartLegend.LegendItem.Shape style={{ background: 'transparent' }}>
{(props) => {
return <Shape {...props} />;
}}
</ChartLegend.LegendItem.Shape>
<ChartLegend.LegendItem.Label />
</ChartLegend.LegendItem>
</ChartLegend>
</div>
);
};
export default Demo;import React from 'react';
import { ChartLegend, LegendItem } from '@semcore/d3-chart';
import { useColorResolver } from '@semcore/utils/lib/use/useColorResolver';
const data = [...Array(5).keys()].map((d, i) => ({
x: i,
Line1: Math.random() * 10,
Line2: Math.random() * 10,
Line3: Math.random() * 10,
Line4: Math.random() * 10,
Line5: Math.random() * 10,
}));
const Shape = (props) => {
const colorResolver = useColorResolver();
return (
<div
style={{
width: '0',
height: '0',
borderTop: '8px solid transparent',
borderLeft: `16px solid ${colorResolver(props.color)}`,
borderBottom: '8px solid transparent',
marginRight: '4px',
}}
/>
);
};
const Demo = () => {
const lines = Object.keys(data[0])
.filter((name) => name !== 'x')
.reduce<LegendItem[]>((res, item, index) => {
res.push({
id: item,
label: item,
checked: true,
color: `chart-palette-order-${index + 1}`,
});
return res;
}, []);
return (
<div>
<ChartLegend items={lines}>
<ChartLegend.LegendItem>
<ChartLegend.LegendItem.Shape style={{ background: 'transparent' }}>
{(props) => {
return <Shape {...props} />;
}}
</ChartLegend.LegendItem.Shape>
<ChartLegend.LegendItem.Label />
</ChartLegend.LegendItem>
</ChartLegend>
</div>
);
};
export default Demo;Table view
tsx
import React from 'react';
import { ChartLegendTable } from '@semcore/d3-chart';
import { Text } from '@semcore/typography';
const data = [...Array(5).keys()].map((d, i) => ({
x: i,
Line1: Math.random() * 10,
Line2: Math.random() * 10,
Line3: Math.random() * 10,
Line4: Math.random() * 10,
Line5: Math.random() * 10,
}));
const Demo = () => {
const lines = Object.keys(data[0])
.filter((key) => key !== 'x')
.map((item, index) => {
return {
id: item,
label: `Item ${index + 1}`,
checked: true,
color: `chart-palette-order-${index + 1}`,
columns: [
<Text use={'secondary'}>{(42 * (index + 3)) / 10}%</Text>,
<Text use={'primary'}>{42 * (index + 3)}</Text>,
],
};
});
return (
<div style={{ width: '200px' }}>
<ChartLegendTable items={lines} />
</div>
);
};
export default Demo;import React from 'react';
import { ChartLegendTable } from '@semcore/d3-chart';
import { Text } from '@semcore/typography';
const data = [...Array(5).keys()].map((d, i) => ({
x: i,
Line1: Math.random() * 10,
Line2: Math.random() * 10,
Line3: Math.random() * 10,
Line4: Math.random() * 10,
Line5: Math.random() * 10,
}));
const Demo = () => {
const lines = Object.keys(data[0])
.filter((key) => key !== 'x')
.map((item, index) => {
return {
id: item,
label: `Item ${index + 1}`,
checked: true,
color: `chart-palette-order-${index + 1}`,
columns: [
<Text use={'secondary'}>{(42 * (index + 3)) / 10}%</Text>,
<Text use={'primary'}>{42 * (index + 3)}</Text>,
],
};
});
return (
<div style={{ width: '200px' }}>
<ChartLegendTable items={lines} />
</div>
);
};
export default Demo;