-
Notifications
You must be signed in to change notification settings - Fork 759
Open
Description
We appreciate your feedback - to help the team understand your needs please complete the following template to ensure we have the details to help.
Submission Guidelines
- If you are not using the latest release, please update and see if the issue is resolved before submitting an issue
- General questions or high-level topics should be posted in Discussions
- Please browse the online Documentation to see if your question is already addressed there
Issue Category
- Enhancement
- Bug
- Question
- Documentation gap/issue
Product Versions
- Please specify what version of the library you are using......: [ ^4.0.0 ]
- Please specify what version(s) of PowerPoint you are targeting: [ 16.99.1 ]
- Please specify what web browser you are using.................: [ arc ]
Desired Behavior
- I have achieved a work around for showing stat-sig data in charts using combo charts or multiple chart series. The only Issue feel is that if only there was a way to turn of legend for each chart separately.
Observed Behavior
Currently it either switches off for both combined charts or shows for both. But it would really help if showLegend would work for separately for each chart in the combined chart.
Steps to Reproduce
You will need to create something like this:
let allColors = theme.colors.chartColors;
const mainChartData = [
...Object.entries(value.series).map(([name, values]) => ({
name,
labels: value.categories,
values: (values as any).map((v: any) => Number(v)),
})),
];
// Create asterisk chart data if significance data exists
const asteriskChartData = value?.significanceData ? [
...Object.entries(value.series).map(([name, values]) => ({
labels: value.categories,
values: (values as any).map((v: any, index: number) => {
const val = showPercentages ? Number(v) + 0.02 : Number(v) + 2.0; // val + some value so its always more than the value
const isSig =
value.significanceData?.[name]?.[index] ===
SIGNIFICANCE_DIFFERENCE_SYMBOL;
return isSig ? val : 0; // more than 0 for significant (show asterisk), 0 for non-significant (show nothing)
}),
})),
] : null;
// Build chart types array - always include main chart, conditionally include asterisk chart
const chartTypes = [
{
type: pptx.ChartType.bar,
data: mainChartData,
options: {
barDir: "col",
showValue: true,
dataLabelFormatCode:
options?.dataLabelFormatCode ||
(showPercentages ? "0.0%" : "#,##0"),
dataLabelFontSize: 8,
dataLabelFontFace: theme.fonts.chart.family,
dataLabelColor: theme.colors.text,
barGrouping: "clustered",
showPercentages,
showLegend: true,
legendPos: "b",
},
},
...(asteriskChartData && value?.significanceLegend ? [{
type: pptx.ChartType.bar,
data: asteriskChartData,
options: {
barDir: "col",
showValue: true,
chartColors: [theme.colors.background], // Use theme background color to blend in
dataLabelFontSize: 12,
dataLabelFontFace: theme.fonts.chart.family,
dataLabelColor: theme.colors.primary,
barGrouping: "clustered",
dataLabelFormatCode: '[>0]"*";[=0]""', // Show asterisk only for values > 0
legendFontSize: 0, // Tiny font size to hide legend entries
legendPos: "t",
legendColor: theme.colors.background,
showLegend: false,
chartColorsOpacity: 1,
},
}] : []),
const chartOptions = {
x: 0.5,
y: 2,
w: 9,
h: 2.8,
showValue: true,
barDir: "col",
dataLabelFontSize: theme.fonts.chart.size,
dataLabelFontFace: theme.fonts.chart.family,
dataLabelColor: theme.colors.text,
barGrouping: "clustered",
showPercentages,
dataLabelFormatCode: showPercentages ? "0.0%" : "#,##0",
showLegend: !value?.isImageQuestion,
legendPos: "b",
legendFontSize: theme.fonts.chart.size,
legendFontFace: theme.fonts.chart.family,
legendColor: theme.colors.text,
showTitle: false,
title: value.title,
showCatAxisTitle: false,
showValAxisTitle: false,
valAxisHidden: true,
catGridLine: showGrid
? { color: theme.colors.gridLines, size: 1 }
: { style: "none" },
valGridLine: showGrid
? { color: theme.colors.gridLines, size: 1 }
: { style: "none" },
catAxisLabelFontSize: theme.fonts.chart.size,
catAxisLabelFontFace: theme.fonts.chart.family,
catAxisLabelColor: theme.colors.text,
...options,
};
// Add chart - will be combo chart if asterisk data exists, single chart otherwise
slide.addChart(chartTypes, chartOptions);
Metadata
Metadata
Assignees
Labels
No labels