Bullet Charts

Overview

A bullet chart or bullet graph allows users to compare data against a projected target or goal. Sharing similarities with column and bar charts, as well as linear gauge charts, our bullet charts are highly versatile. They can be customized to display ranges (e.g., poor, fair, good) and multiple goal markers. They can also display as stacked or charts with cones or histograms in lieu of bars. We explain how to configure your bullet chart's scales, as well as how to style your bars and goals, customize your tooltips, and add a legend. Browse our ZingChart Gallery for further ideas on what you can achieve with a bullet chart.

Bullet Chart Types

Use the type attribute to specify your chart type. We have two bullet chart types: bullet or hbullet. Using a graphset array, you can create trellis charts. We also explain how to create your own custom bullet charts using our mixed and hmixedchart types (by combining different chart types, such as bar/bullet or bar/scatter) and bar and hbar chart types (by overlapping and stacking your bars).

Note: You can further modify your charts to create stacked (standard stacked, 100% stacked, and multiple stacks) and/or charts with different aspects (bars, cones, histograms), which we explain in the Chart-Specific Properties section below.

Bullet Chart

Add a type attribute to your chart object. Set the value to bullet or vbullet. Without further modification, a bullet chart with a single data set looks like this

https://app.zingsoft.com/demos/embed/G5AIFWZQ
https://app.zingsoft.com/demos/embed/G5AIFWZQ
{
  type: "bullet",
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31]
    }
  ]
}

Horizontal Bullet Chart

Horizontal bullets are specified by the hbullet value. With this chart type, the axes are switched so that the x-axis runs vertically and the y-axis runs horizontally.

https://app.zingsoft.com/demos/embed/IFLAUS2W
https://app.zingsoft.com/demos/embed/IFLAUS2W
{
  type: "hbullet",
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31]
    }
  ]
}

Trellis Bullet Chart

Trellis bullets consist of a series of smaller charts that are organized into a panel or grid. Start by adding a graphset array, and then place each of your individual chart objects inside it. You can size and position each bullet chart to achieve your desired look. Read our Adding Additional Charts page for further information on graphset arrays and trellis charts.

https://app.zingsoft.com/demos/embed/O0OA3D1Z
https://app.zingsoft.com/demos/embed/O0OA3D1Z
{
  graphset: [
    {
      type: "bullet",
      series: [
        {
          values: [20,40,25,50,15,45,33,34],
          goals: [25,43,30,40,21,59,35,31]
        }
      ]
    },
    {
      type: "hbullet",
      series: [
        {
          values: [5,30,21,18,59,50,28,33],
          goals: [21,35,23,29,61,55,33,30]
        }
      ]
    },
    {
      type: "hbullet",
      series: [
        {
          values: [30,5,18,21,33,41,29,15],
          goals: [36,17,20,19,24,49,33,18]
        }
      ]
    },
    {
      type: "bullet",
      series: [
        {
          values: [31,16,29,59,40,7,37,35],
          goals: [37,15,30,55,47,15,30,43]
        }
      ]
    }
  ]
}

Custom Bullet Charts

You can create your own custom bullet charts by using several of our other chart types: mixed, hmixed, bar, and hbar. With Mixed Charts, you create a bullet chart by combining two or more chart types into a single chart. With Bar Charts, you achieve a bullet chart's appearance by overlapping and stacking multiple bars.

Bar/Bullet Mixed Chart

This is a mixed chart containing three stacked bar charts and one bullet chart.

https://app.zingsoft.com/demos/embed/KR3BP3K4
https://app.zingsoft.com/demos/embed/KR3BP3K4
{
  type: "mixed",
  plot: {
    'bars-overlap': "100%",
    stacked: true
  },
  'scale-x': {
    labels: [ "Superior", "Michigan", "Huron", "Erie", "Ontario" ],
    guide: {
      visible: false
    }
  },
  'scale-y': {
    values: "0:50:10",
    guide: {
      visible: false
    }
  },
  series: [
    {
      type: 'bar',
      values: [25,30,15,20,25],
      stack: 1,
      'background-color': "gray",
      alpha: 0.7,
      'hover-state': {
        visible: false
      },
      'max-trackers': 0
    },
    {
      type: 'bar',
      values: [20,10,30,25,15],
      stack: 1,
      'background-color': "gray",
      alpha: 0.5,
      'hover-state': {
        visible: false
      },
      'max-trackers': 0
    },
    {
      type: 'bar',
      values: [5,10,5,5,10],
      stack: 1,
      'background-color': "gray",
      alpha: 0.3,
      'hover-state': {
        visible: false
      },
      'max-trackers': 0
    },
    {
      type: "bullet",
      values: [35,42,40,43,36],
      goals: [38,39,43,35,41],
      'background-color': "#FFFF00 #FFCCCC",
      stack: 2,
      goal: {
        'background-color': "#333399 #00FFFF"
      },
      tooltip: {
        text: "Actual: %v<br>Goal: %g",
        'font-color': "black",
        'background-color': "white"
      }
    }
  ]
}

Bar/Scatter Mixed Chart

This is a mixed chart containing three stacked bar charts, an overlapping bar chart (to represent the "bar" portion of the bullet chart), and three scatter charts with rectangle, diamond, and heart-shaped markers, respectively.

https://app.zingsoft.com/demos/embed/ZKKLG9DY
https://app.zingsoft.com/demos/embed/ZKKLG9DY
{
  type: "mixed",
  plot: {
    'bars-overlap': "100%",
    stacked: true,

  },
  'scale-x': {
    labels: [ "Superior", "Michigan", "Huron", "Erie", "Ontario" ],
    guide: {
      visible: false
    }
  },
  'scale-y': {
    values: "0:50:10",
    guide: {
      visible: false
    }
  },
  series: [
    {   //Range Bar 1
      type: 'bar',
      values: [25,30,15,20,25],
      stack: 1,
      'background-color': "gray",
      alpha: 0.7,
      'hover-state': {
        visible: false
      },
      'max-trackers': 0,

    },
    {   //Range Bar 2
      type: 'bar',
      values: [20,10,30,25,15],
      stack: 1,
      'background-color': "gray",
      alpha: 0.5,
      'hover-state': {
        visible: false
      },
      'max-trackers': 0,

    },
    {   //Range Bar 3
      type: 'bar',
      values: [5,10,5,5,10],
      stack: 1,
      'background-color': "gray",
      alpha: 0.3,
      'hover-state': {
        visible: false
      },
      'max-trackers': 0,

    },
    {   //Bullet Bar
      type: 'bar',
      values: [35,42,40,43,36],
      'bar-width': "50%",
      stack: 2,
      'background-color': "black gray",
      'hover-state': {
        visible: false
      },
      tooltip: {
        text: "Actual: %v",
        'font-color': "black",
        'background-color': "white"
      }
    },
    {   //Goal 1 (rectangle)
      type: "scatter",
      values: [21,33,25,30,12],
      marker: {
        type: "rectangle",
        'background-color': "#333399",
        'border-color': "none",
        height: "7%",
        width: "60%"
      },
      tooltip: {
        text: "Rectangle Goal: %v",
        'font-color': "black",
        'background-color': "white"
      }
    },
    {   //Goal 2 (diamond)
      type: "scatter",
      values: [30,37,30,37,25],
      marker: {
        type: "diamond",
        'background-color': "#FF99CC",
        'border-color': "#33CCFF",
        'border-width': 3,
        size: 8
      },
      tooltip: {
        text: "Diamond Goal: %v",
        'font-color': "black",
        'background-color': "white"
      }
    },
    {   //Goal 3 (heart)
      type: "scatter",
      values: [39,45,36,45,40],
      marker: {
        'background-image': "https://www.zingchart.com/resources/heart.png",
        'background-color': "none",
        'border-color': "none",
        'background-repeat': "no-repeat",
        shadow: false,
        size: 12
      },
      tooltip: {
        text: "Heart Goal: %v",
        'font-color': "black",
        'background-color': "white"
      }
    }
  ]
}

Horizontal Bar/Bullet Mixed Chart

This is a horizontal mixed chart containing three stacked horizontal bar charts and one horizontal bullet chart.

https://app.zingsoft.com/demos/embed/TQDGX28Q
https://app.zingsoft.com/demos/embed/TQDGX28Q
{
  type: "hmixed",
  plot: {
    'bars-overlap': "100%",
    stacked: true
  },
  'scale-x': {
    labels: [ "Superior", "Michigan", "Huron", "Erie", "Ontario" ],
    guide: {
      visible: false
    }
  },
  'scale-y': {
    values: "0:50:10",
    guide: {
      visible: false
    }
  },
  series: [
    {
      type: "hbar",
      values: [25,30,15,20,25],
      stack: 1,
      'background-color': "gray",
      alpha: 0.7,
      'hover-state': {
        visible: false
      },
      'max-trackers': 0
    },
    {
      type: "hbar",
      values: [20,10,30,25,15],
      stack: 1,
      'background-color': "gray",
      alpha: 0.5,
      'hover-state': {
        visible: false
      },
      'max-trackers': 0
    },
    {
      type: "hbar",
      values: [5,10,5,5,10],
      stack: 1,
      'background-color': "gray",
      alpha: 0.3,
      'hover-state': {
        visible: false
      },
      'max-trackers': 0
    },
    {
      type: "hbullet",
      values: [35,42,40,43,36],
      goals: [38,39,43,35,41],
      'background-color': "black",
      stack: 2,
      tooltip: {
        text: "Actual: %v<br>Goal: %g",
        'font-color': "black",
        'background-color': "white"
      }
    }
  ]
}

Horizontal Bar/Scatter Mixed Chart

This is a horizontal mixed chart containing three stacked horizontal bar charts, an overlapping horizontal bar chart (to represent the "bar" portion of the bullet chart), and three horizontal scatter charts with cross, target, and star-shaped markers, respectively.

https://app.zingsoft.com/demos/embed/HAE0PQJ4
https://app.zingsoft.com/demos/embed/HAE0PQJ4
{
  type: "hmixed",
  plot: {
    'bars-overlap': "100%",
    stacked: true
  },
  'scale-x': {
    labels: [ "Superior", "Michigan", "Huron", "Erie", "Ontario" ],
    guide: {
      visible: false
    }
  },
  'scale-y': {
    values: "0:50:10",
    guide: {
      visible: false
    }
  },
  series: [
    {   //Range Bar 1
      type: "hbar",
      values: [25,30,15,20,25],
      stack: 1,
      'background-color': "gray",
      alpha: 0.7,
      'hover-state': {
        visible: false
      },
      'max-trackers': 0
    },
    {   //Range Bar 2
      type: "hbar",
      values: [20,10,30,25,15],
      stack: 1,
      'background-color': "gray",
      alpha: 0.5,
      'hover-state': {
        visible: false
      },
      'max-trackers': 0
    },
    {   //Range Bar 3
      type: "hbar",
      values: [5,10,5,5,10],
      stack: 1,
      'background-color': "gray",
      alpha: 0.3,
      'hover-state': {
        visible: false
      },
      'max-trackers': 0
    },
    {   //Bullet Bar
      type: "hbar",
      values: [35,42,40,43,36],
      'bar-width': "50%",
      stack: 2,
      'background-color': "#99CCFF",
      'hover-state': {
        visible: false
      },
      tooltip: {
        text: "Actual: %v",
        'font-color': "black",
        'background-color': "white"
      }
    },
    {   //Goal 1 (cross)
      type: "hscatter",
      values: [21,33,25,30,12],
      marker: {
        type: "cross",
        'line-color': "red",
        size: 5
      },
      tooltip: {
        text: "Cross Goal: %v",
        'font-color': "black",
        'background-color': "white",

      }
    },
    {   //Goal 2 (target)
      type: "hscatter",
      values: [30,37,30,37,25],
      marker: {
        'background-image': "https://www.zingchart.com/resources/target.png",
        'background-color': "none",
        'border-color': "none",
        'background-repeat': "no-repeat",
        shadow: false,
        size: 12
      },
      tooltip: {
        text: "Target Goal: %v",
        'font-color': "black",
        'background-color': "white"
      }
    },
    {   //Goal 2 (star)
      type: "hscatter",
      values: [39,45,36,45,40],
      marker: {
        type: "star5",
        'background-color': "#FFFF00",
        'border-color': "#99CCFF",
        'border-width': 1,
        size: 7
      },
      tooltip: {
        text: "Star Goal: %v",
        'font-color': "black",
        'background-color': "white"
      }
    }
  ]
}

Overlapping Bar Chart

Here is a bullet chart that was created using overlapping bars set to varying widths.

https://app.zingsoft.com/demos/embed/6Q9Z4J81
https://app.zingsoft.com/demos/embed/6Q9Z4J81
{
  type: 'bar',
  plot: {
    'bars-overlap': "100%",

  },
  series: [
    {
      values: [70,50,75,51,70,73,67,46],
      'background-color': "#2B2836",
      alpha: 0.5,
      'hover-state': {
        visible: false
      },
      'max-trackers': 0
    },
    {
      values: [73,77,91,86,67,76,88,96],
      'background-color': "#C42E53",
      alpha: 0.9,
      'bar-width': "40%"
    }
  ]
}

Overlapping Horizontal Bar Chart

Here is a horizontal bullet chart that was created using overlapping bars set to varying widths.

https://app.zingsoft.com/demos/embed/2KAEJLME
https://app.zingsoft.com/demos/embed/2KAEJLME
{
  type: "hbar",
  plot: {
    'bars-overlap': "100%",

  },
  series: [
    {
      values: [70,50,75,51,70],
      'background-color': "#B22C12",
      'bar-width': "70%",
      'hover-state': {
        visible: false
      },
      'max-trackers': 0
    },
    {
      values: [73,77,91,86,67],
      'background-color': "#8BC79E",
      'bar-width': "30%"
    }
  ]
}

Series Data

Bullet charts support single or multiple data sets, and all data is contained inside the series array. In addition to your values, you need to provide corresponding goals. This can be done in a plot object or individual series objects, depending on whether you want your goals to apply globally or locally.

Global Goal

In your plot object, add a goals array. Provide your goal values, making sure that the number of goals matches the number of values in each of your data sets. The below bullet chart has a single goals array with three data sets.

https://app.zingsoft.com/demos/embed/K6BSUTEH
https://app.zingsoft.com/demos/embed/K6BSUTEH
{
  type: "bullet",
  plot: {
    goals: [25,43,30,40,21,59,35,31]
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34]
    },
    {
      values: [5,30,21,18,59,50,28,33]
    },
    {
      values: [30,5,18,21,33,41,29,15]
    }
  ]
}

Local Goals

Add a goals array to each of your series objects. Provide your goal values, making sure that the number of goals matches the number of values in each of your data sets. The below bullet chart has three data sets with corresponding goals arrays for each.

https://app.zingsoft.com/demos/embed/D3TENFE6
https://app.zingsoft.com/demos/embed/D3TENFE6
{
  type: "bullet",
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31]
    },
    {
      values: [5,30,21,18,59,50,28,33]
      goals: [21,35,23,29,61,55,33,30]
    },
    {
      values: [30,5,18,21,33,41,29,15]
      goals: [36,17,20,19,24,49,33,18]
    }
  ]
}

Chart-Specific Properties

You can modify the appearance of your bullet chart's bars. In addition to their default rectangular shape, they can display as cones or histograms. You can also stack data sets on top of each other to create standard stacked or 100% stacked, as well as group data into two or more stacks.

Aspect

The aspect attribute allows you to change the appearance of your bars from rectangular (default bar) to conical (cone) to histograms (histogram). To apply the change globally, place the attribute in your plot object. To apply the change locally, place the attribute in a specific series object.

Bar Bullet Chart

Rectangular bars are our default aspect, and so specifying their type as shown below is optional.

https://app.zingsoft.com/demos/embed/UCQTH950
https://app.zingsoft.com/demos/embed/UCQTH950
{
  type: "bullet",
  plot: {
    aspect: "bar"
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31]
    },
    {
      values: [5,30,21,18,59,50,28,33]
      goals: [21,35,23,29,61,55,33,30]
    }
  ]
}

Cone Bullet Chart

To display your data as cones, set your aspect attribute's value to cone.

https://app.zingsoft.com/demos/embed/5W0ZWE2B
https://app.zingsoft.com/demos/embed/5W0ZWE2B
{
  type: "bullet",
  plot: {
    aspect: "cone"
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31]
    },
    {
      values: [5,30,21,18,59,50,28,33]
      goals: [21,35,23,29,61,55,33,30]
    }
  ]
}

Histogram Bullet Chart

To display your data as histograms, set your aspect attribute's value to histogram.

https://app.zingsoft.com/demos/embed/H1MGK24O
https://app.zingsoft.com/demos/embed/H1MGK24O
{
  type: "bullet",
  plot: {
    aspect: "histogram"
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31]
    },
    {
      values: [5,30,21,18,59,50,28,33]
      goals: [21,35,23,29,61,55,33,30]
    }
  ]
}

Stacked

The stacked attribute allows you to stack two or more data sets on top of each other. You can display standard stacked, 100% stacked, or multiple stacked bullet charts.

Standard Stacked Bullet Chart

In your plot object, add a stacked attribute. Set the value to true. Your data sets will be placed on top of each other so that the top line represents the sum total for all of your stacked data.

Note: When working with stacked bullet charts, take into consideration your goals array. Your goal values may need to be adjusted accordingly.

https://app.zingsoft.com/demos/embed/6WCULGIK
https://app.zingsoft.com/demos/embed/6WCULGIK
{
  type: "bullet",
  plot: {
    goals: [25,43,30,40,21,59,35,31],
    stacked: true
  },
  'scale-y': {
    values: "0:150:25"
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34]
    },
    {
      values: [5,30,21,18,59,50,28,33]
    },
    {
      values: [30,5,18,21,33,41,29,15]
    }
  ]
}

100% Stacked Bullet Chart

In your plot object, add a stacked attribute. Set the value to true. Next, add a stack-type attribute. Set the value to 100%. (By default, the value is set to normal.) With a 100% stacked bullet chart, each data layer is represented as a percentage of the whole so that the entire stack totals to 100%.

Note: With 100% stacked bullet charts, each stack always totals at 100%. Therefore, you'll want to specify your y-axis scale's minimum and maximum values. Create a scale-y object. Add a min-value and max-value attribute. Set the values to 0 and 100, respectively.

https://app.zingsoft.com/demos/embed/96I74PRA
https://app.zingsoft.com/demos/embed/96I74PRA
{
  type: "bullet",
  plot: {
    goals: [25,43,30,40,21,59,35,31],
    stacked: true,
    'stack-type': "100%"
  },
  'scale-y': {
    values: "0:100:25",
    format: "%v%"
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34]
    },
    {
      values: [5,30,21,18,59,50,28,33]
    },
    {
      values: [30,5,18,21,33,41,29,15]
    }
  ]
}

Bullet Charts and Multiple Stacks

In your plot object, add a stacked attribute and set the value to true. To separate your data sets into multiple stacks, you'll next go to your series array. In each series object, add a stack attribute. For data sets you want included in the first stack, set the value to 1. For data sets you want included in the second stack, set the value to 2, and so on. In the below chart, the first two data sets were assigned to stack one and the third data set was assigned to stack two.

https://app.zingsoft.com/demos/embed/UPXKVBYE
https://app.zingsoft.com/demos/embed/UPXKVBYE
{
  type: "bullet",
  plot: {
    goals: [25,43,30,40,21,59,35,31],
    stacked: true
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      stack: 1
    },
    {
      values: [5,30,21,18,59,50,28,33],
      stack: 1
    },
    {
      values: [30,5,18,21,33,41,29,15],
      stack: 2
    }
  ]
}

Further Customization

Further customize your bullet chart by configuring your scales, styling your bars and goals, adding scale markers, modifying your tooltips, and incorporating a legend.

Scales

Our Configuring Your X/Y-Axis Scales Tutorial provides detailed information on how to set up and customize your scales. We provide a brief introduction to linear and category scales here, since they are likely the most commonly used when it comes to bullet charts.

Note: While the following sections display scale configurations on the more commonly used axis (scale-x or scale-y), you can generally make the same changes to either axis.

Linear Scale

Linear scales are our default scale type. You'll want to specify your minimum, maximum, and step scale values by adding a values attribute to your scale-x and/or scale-y object. Provide your min/max/step inside a string, separated by colons. You can format and style your scale to display currencies, percentages, abbreviated numbers, and much more. See our Scales Tutorial for further information on scale formatting, styling, and customization.

https://app.zingsoft.com/demos/embed/OTO1VVBH
https://app.zingsoft.com/demos/embed/OTO1VVBH
{
  type: "bullet",
  'scale-x': {
    label: {
      text: "Bullet Chart with Linear Scale"
    }
  },
  'scale-y': {
    format: "$%v"
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31]
    },
    {
      values: [5,30,21,18,59,50,28,33],
      goals: [21,35,23,29,61,55,33,30]
    },
    {
      values: [30,5,18,21,33,41,29,15],
      goals: [36,17,20,19,24,49,33,18]
    }
  ]
}

Category Scale

Category scales allow you to display any word and/or number combination, such as names, dates, places, events, and more. Generally used on the x-axis, you'll want to add a labels array to your scale-x object. Add your scale labels as string values, separated by commas. For more on category scales, including how to specify text wrapping, angle rotation, and character limits, see our Scales Tutorial.

https://app.zingsoft.com/demos/embed/60BZHWTM
https://app.zingsoft.com/demos/embed/60BZHWTM
{
  type: "bullet",
  'scale-x': {
    label: {
      text: "Bullet Chart with Category Scale"
    },
    labels: [ "ME", "NH", "MA", "RI", "CT", "NY", "PA", "NJ" ]
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31]
    },
    {
      values: [5,30,21,18,59,50,28,33],
      goals: [21,35,23,29,61,55,33,30]
    },
    {
      values: [30,5,18,21,33,41,29,15],
      goals: [36,17,20,19,24,49,33,18]
    }
  ]
}

Bar Styling

To style your bullet chart's bars, start in the applicable series object. You can change your bar fill color with a background-color attribute. For a single color fill, add one hexadecimal or RGB value. For a gradient (two color) fill, add two values separated by a space. To adjust your transparency levels, add an alpha attribute. Provide a value between 0-1, with the former being clear and the latter being opaque. Make sure to place a zero before your decimal point. You can style your borders with border-color, border-width, border-radius (rounded corners), and/or line-style attributes. Browse our Plot/Series JSON Attributes/Syntax page for additional styling options.

https://app.zingsoft.com/demos/embed/6B6VOR87
https://app.zingsoft.com/demos/embed/6B6VOR87
{
  type: "bullet",
  'scale-x': {
    labels: [ "ME", "NH", "MA", "RI", "CT", "NY" ]
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31],
      'background-color': "red",
      alpha: 1,
      'border-color': "green",
      'border-width': 2,
      'border-radius': "9px",
      'line-style': "solid"
    },
    {
      values: [5,30,21,18,59,50,28,33],
      goals: [21,35,23,29,61,55,33,30],
      'background-color': "orange",
      alpha: 1,
      'border-color': "blue",
      'border-width': 2,
      'line-style': "dotted"
    },
    {
      values: [30,5,18,21,33,41,29,15],
      goals: [36,17,20,19,24,49,33,18],
      'background-color': "yellow",
      alpha: 1,
      'border-color': "purple",
      'border-width': 2,
      'line-style': "dashed"
    }
  ]
}

Goal Styling

By default, your goals will inherit whatever styles you specify for your bars. To provide goal-specific styling, start in your applicable series object, and create a goal object. Place your styling attributes inside. You can use the same ones discussed above, as well as go through our Plot/Series JSON Attributes/Syntax page for additional styling options.

https://app.zingsoft.com/demos/embed/W0R6R5JH
https://app.zingsoft.com/demos/embed/W0R6R5JH
{
  type: "bullet",
  'scale-x': {
    labels: [ "ME", "NH", "MA", "RI", "CT", "NY" ]
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31],
      'background-color': "red",
      'border-color': "green",
      'border-width': 2,
      'line-style': "solid",
      goal: {
        'background-color': "green",
        'line-style': "solid"
      }
    },
    {
      values: [5,30,21,18,59,50,28,33],
      goals: [21,35,23,29,61,55,33,30],
      'background-color': "orange",
      'border-color': "blue",
      'border-width': 2,
      'line-style': "dotted",
      goal: {
        'background-color': "blue",
        'line-style': "solid"
      }
    },
    {
      values: [30,5,18,21,33,41,29,15],
      goals: [36,17,20,19,24,49,33,18],
      'background-color': "yellow",
      'border-color': "purple",
      'border-width': 2,
      'line-style': "dashed",
      goal: {
        'background-color': "purple",
        'line-style': "solid"
      }
    }
  ]
}

Scale Markers

When working with individual bullet charts, you can use scale markers to set the ranges that would typically be achieved by stacking bars in a mixed chart. In the below example, each chart was assigned its own chart object, and then the objects were placed into a graphset array. Scale markers (typically used to highlight or emphasize specific data ranges in your chart) were used to create the range bars that appear in each bullet chart. Start by adding a markers array into your scale-y object. Inside the array, create an object for each of your range bands. Add a type attribute, and set the value to area. Next, add a range attribute, and specify your values in an array (e.g., [0,7]). Finally, you'll want to style your scale markers using attributes such as background-color. For a more comprehensive list of related attributes, see our JSON Attributes/Syntax pages for scale-x and scale-y marker JSON attributes.

https://app.zingsoft.com/demos/embed/079CZHAD
https://app.zingsoft.com/demos/embed/079CZHAD
{
  graphset: [
    {   //Chart 1
      type: "bullet",
      height: "100%",
      width: "33.33%",
      x: "0%",
      y: "0%",
      'scale-x': {
        labels: [ "California" ],
        guide: {
          visible: false
        },
        tick: {
          visible: false
        }
      },
      'scale-y': {
        markers: [    //Specify your scale markers for each bullet chart.
          {
            type: "area",
            range: [0,7],
            'background-color': "red"
          },
          {
            type: "area",
            range: [7,21],
            'background-color': "orange"
          },
          {
            type: "area",
            range: [21,30],
            'background-color': "yellow"
          }
        ],
        guide: {
          visible: false
        }
      },
      series: [
        {
          values: [20],
          goals: [23],
          'background-color': "black",
          'bar-width': "80%"
        }
      ]
    },
    {   //Chart 2
      type: "bullet",
      height: "100%",
      width: "33.33%",
      x: "33.33%",
      y: "0%",
      'scale-x': {
        labels: [ "Oregon" ],
        guide: {
          visible: false
        },
        tick: {
          visible: false
        }
      },
      'scale-y': {
        markers: [    //Specify your scale markers for each bullet chart.
          {
            type: "area",
            range: [0,10],
            'background-color': "blue",
            alpha: 1
          },
          {
            type: "area",
            range: [10,20],
            'background-color': "green",
            alpha: 1
          },
          {
            type: "area",
            range: [20,30],
            'background-color': "orange",
            alpha: 1
          }
        ],
        guide: {
          visible: false
        }
      },
      'scale-y-2': {
        values: "0:30:10",
        guide: {
          visible: false
        }
      },
      series: [
        {
          values: [9],
          goals: [21],
          'background-color': "white"
        }
      ]
    },
    {   //Chart 3
      type: "bullet",
      height: "100%",
      width: "33.33%",
      x: "66.66%",
      y: "0%",
      'scale-x': {
        labels: [ "Washington" ],
        guide: {
          visible: false
        },
        tick: {
          visible: false
        }
      },
      'scale-y': {
        placement: "opposite",
        markers: [    //Specify your scale markers for each bullet chart.
          {
            type: "area",
            range: [0,13],
            'background-color': "yellow",
            alpha: 1
          },
          {
            type: "area",
            range: [13,18],
            'background-color': "purple",
            alpha: 1
          },
          {
            type: "area",
            range: [18,30],
            'background-color': "green",
            alpha: 1
          }
        ],
        guide: {
          visible: false
        }
      },
      series: [
        {
          values: [15],
          goals: [25],
          'background-color': "gray",
          'bar-width': "80%"
        }
      ]
    }
  ]
}

Tooltips

You can customize your tooltips to specify how the text and styling appear. Add a tooltip object to your chart object. Next, add a text attribute, and provide your desired text inside a string. You can use tokens such as %v to represent your series values and %g to represent your goals. For tooltip styling, common attributes used include font-color, font-family, background-color, border-color, border-width, and line-style. See our Tooltips JSON Attributes/Syntax page for additional styling options.

https://app.zingsoft.com/demos/embed/MJIXTCCM
https://app.zingsoft.com/demos/embed/MJIXTCCM
{
  type: "bullet",
  tooltip: {
    text: "Value: %v<br>Goal: %g",
    'font-color': "purple",
    'font-family': "Verdana, Geneva, sans-serif",
    'background-color': "white",
    'border-color': "yellow",
    'border-width': 2,
    'line-style': "dotted"
  },
  'scale-x': {
    labels: [ "ME", "NH", "MA", "RI", "CT", "NY" ]
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31],
      'background-color': "red",
      goal: {
        'background-color': "green"
      }
    },
    {
      values: [5,30,21,18,59,50,28,33],
      goals: [21,35,23,29,61,55,33,30],
      'background-color': "orange",
      goal: {
        'background-color': "blue"
      }
    },
    {
      values: [30,5,18,21,33,41,29,15],
      goals: [36,17,20,19,24,49,33,18],
      'background-color': "yellow",
      goal: {
        'background-color': "purple"
      }
    }
  ]
}

Legend

Our legends are highly customizable. To add one, place a legend object in your chart object. You can specify your legend's layout, positioning, styling, headers/footers, and more. See our Legends Tutorial and Legends JSON Attributes/Syntax page for further information.

https://app.zingsoft.com/demos/embed/88PSSO70
https://app.zingsoft.com/demos/embed/88PSSO70
{
  type: "bullet",
  legend: {},
  tooltip: {
    text: "Value: %v<br>Goal: %g",
    'font-color': "purple",
    'font-family': "Verdana, Geneva, sans-serif",
    'background-color': "white",
    'border-color': "yellow",
    'border-width': 2,
    'line-style': "dotted"
  },
  'scale-x': {
    labels: [ "ME", "NH", "MA", "RI", "CT", "NY" ]
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31],
      text: "September",
      'background-color': "red",
      goal: {
        'background-color': "green"
      }
    },
    {
      values: [5,30,21,18,59,50,28,33],
      goals: [21,35,23,29,61,55,33,30],
      text: "October",
      'background-color': "orange",
      goal: {
        'background-color': "blue"
      }
    },
    {
      values: [30,5,18,21,33,41,29,15],
      goals: [36,17,20,19,24,49,33,18],
      text: "November",
      'background-color': "yellow",
      goal: {
        'background-color': "purple"
      }
    }
  ]
}

Summary

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