Scorecard Charts

Overview

A scorecard chart is a useful way to display bar graphs in an aesthetic way. It includes a graphic, value text, and a bar chart that is interactive with tooltips. Multiple scorecards are used together to acheive a complete and visually appealing look. View our Scorecard Chart Gallery for further inspiration.

Type and Options

ZingChart scorecard charts use the type attribute and the options object. In your chart object, add a type attribute and set the value to scorecard. Next, create an options object. To give the chart some data to display, we will be modifying the value and title attributes. Without further modification, here is how the default scorecard chart appears.

https://app.zingsoft.com/demos/embed/LNBRKN11
https://app.zingsoft.com/demos/embed/LNBRKN11
{
      type: 'scorecard',
      options: {
        value: {
          text: '1,000'
        },
        title: {
          text: 'ZingPoints'
        }
      }
}

Data

Adding data to a scorecard chart is simple and is explained in depth in the Options Configuration section. Look specifically for the bars and value sections.

Options Configuration

Use the options object to configure the scorecard chart. You can change the visual appearance to fit any style as well as add data with attributes like bars, icon, value, and more.

Value

The value object is used to configure what and how the value of the scorecard is displayed. Within the value object, use the text and color attributes to change the look of the value that you want to stand out. Use the text attribute to add a value to the scorecard. Use color to specify the color of the value that will be displayed.

https://app.zingsoft.com/demos/embed/VD1USMXR
https://app.zingsoft.com/demos/embed/VD1USMXR
{
      type: 'scorecard',
      options: {
        value: {
          text: '1,000'
        }
      }
}

Title

The title object is used to configure what and how the title of the scorecard is displayed. Within the title object, use these attributes to change the configuration, text and color. Use the text attribute to add a title to the scorecard. color specifies the color of the title that will be displayed.

https://app.zingsoft.com/demos/embed/LNBRKN11
https://app.zingsoft.com/demos/embed/LNBRKN11
{
      type: 'scorecard',
      options: {
        value: {
          text: '1,000'
        },
        title: {
          text: 'ZingPoints'
        }
      }
}

Bars

Use the bars attribute to modify the built in bar at the bottom of the scorecard. You are able to have the bar represent one value or multiple value using ratios. This is accomplished by setting bars equal to an array of objects. Each object in this array has a text and value attribute that directly affects the lower bar. Order matters as the first object will directly affect the leftmost section of the bar if multiple objects are present.

https://app.zingsoft.com/demos/embed/YT1OX4WQ
https://app.zingsoft.com/demos/embed/YT1OX4WQ
{
      type: 'scorecard',
      options: {
        value: {
          text: '1,000'
        },
        title: {
          text: 'ZingPoints'
        },
        bars: [
          {
            text: 'Christopher',
            value: '675'
          },
          {
            text: 'Aaron',
            value: '50'
          },
          {
            text: 'Nick',
            value: '275'
          }
        ]
      }
}

Icon

Use the icon object to display an image on the scorecard, and configure its scale. Within the icon object, use these attributes to change the configuration, backgroundImage and backgroundScale. Use backgroundImage to display the image, and backgroundScale to scale the size of the image on the scorecard.

https://app.zingsoft.com/demos/embed/TMHP7N7R
https://app.zingsoft.com/demos/embed/TMHP7N7R
{
      type: 'scorecard',
      options: {
        value: {
          text: '1,000'
        },
        title: {
          text: 'ZingPoints'
        },
        bars: [
          {
            text: 'Christopher',
            value: '675'
          },
          {
            text: 'Aaron',
            value: '50'
          },
          {
            text: 'Nick',
            value: '275'
          }
        ],
        icon: {
          backgroundImage: 'https://app.zingsoft.com/api/file/73CNKMOJ/clock.png',
          backgroundScale: 0.95
        }
      }
}

Further Customization

Further customize your tile maps by configuring a few important features. These make it easier to highlight exactly what you want to display.

Plot Area

With scorecard charts, you may want to decrease the size of the plot area to give a better visual feel. The plotarea object allows adjustments to be made to the entire plot. More information on the plotarea object is available here.

https://app.zingsoft.com/demos/embed/IFJBGZB1
https://app.zingsoft.com/demos/embed/IFJBGZB1
{
      type: 'scorecard',
      options: {
        value: {
          text: '1,000'
        },
        title: {
          text: 'ZingPoints'
        },
        bars: [
          {
            text: 'Christopher',
            value: '675'
          },
          {
            text: 'Aaron',
            value: '50'
          },
          {
            text: 'Nick',
            value: '275'
          }
        ],
        icon: {
          backgroundImage: 'https://app.zingsoft.com/api/file/73CNKMOJ/clock.png',
          backgroundScale: 0.95
        }
      },
      plotarea: {
        margin: '10px'
      }
}

Multiple Scorecards in a Single Chart

Adding multiple scorecards in a single chart is simple. Using the layout and graphset, you can create a grid and fit each scorecard within it. An example using a 2x2 sized grid follows:

https://app.zingsoft.com/demos/embed/04ZEZNK3
https://app.zingsoft.com/demos/embed/04ZEZNK3
{
  layout: '2x2',
  graphset: [
    {
      type: 'scorecard',
      ...,
    },
    {
      type: 'scorecard',
      ...,
    },
    {
      type: 'scorecard',
      ...,
    },
    {
      type: 'scorecard',
      ...,
    }
  ]
}

Summary

Got a question about how scorecard charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.