Column chart Implemention

Certified Lead Developer

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

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    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
        )
      }
    )

Reply
  • 0
    Certified Lead Developer

    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
        )
      }
    )

Children
No Data