Skip to content

[BUG|FEATURE] #1406

@minhalaftabrana

Description

@minhalaftabrana

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

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions