Skip to main content
vinayj6479
vinayj6479
January 13, 2024
Question

Column chart Implemention

  • January 13, 2024
  • 1 reply
  • 0 views

Hi team,

i have requirement to implement of column chart to show number of cases created with in the year,

by highlighting the current month with different color.

i couldn't able to complete logic here a!chartseries (color:?),

a!localVariables(
  local!casescountbyyear: { 4, 5, 6, 7, 8,5,7,8,3,2,8,9},
  {
    a!cardLayout(
      contents: {
        a!columnChartField(
          categories: {
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec"
          },
          series: {
            a!chartSeries(
              label: "Cases",
              data: local!casescountbyyear
            )
          },
          showLegend: false,
          showTooltips: true,
          allowImageDownload: true,
          colorScheme: a!colorSchemeCustom(colors: { "#3d85c6", "#9d225f",  })
        ),
        
      },
      height: "AUTO",
      style: "TRANSPARENT",
      marginBelow: "STANDARD",
      showBorder: true
    )
  }
)

how can show the current month in the column chart with diffrent color

1 reply

stefanhelzle0001
stefanhelzle0001
January 13, 2024

Get some inspiration from this code snippet. The trick is to create two separate chart series with different colors and stack them.

I did not make it dynamic, leaving that up to you.

a!localVariables(
  local!casescountbyyear: { 4, 5, 6, 7, 8,5,7,8,3,2,8,9},
  {
    a!cardLayout(
      contents: {
        a!columnChartField(
          categories: {
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec"
          },
          series: {
            a!chartSeries(
              label: "Cases",
              data: a!update(local!casescountbyyear, 3, null),
              color: "#3d85c6"
            ),
            a!chartSeries(
              label: "Cases",
              data: {repeat(2, null), index(local!casescountbyyear, 3)},
              color: "#9d225f"
            ),
          },
          showLegend: false,
          showTooltips: true,
          allowImageDownload: true,
          colorScheme: a!colorSchemeCustom(colors: { "#3d85c6", "#9d225f",  }),
          stacking: "NORMAL"
        ),

      },
      height: "AUTO",
      style: "TRANSPARENT",
      marginBelow: "STANDARD",
      showBorder: true
    )
  }
)

Terms & ConditionsAccessibility statement