Blog Help & Support Contact About Login

 Show Nav

JavaScript Mixed Charts

Overview

Mixed charts allow you to combine two or more chart types into a single chart. Popular mixed chart combinations include bar/line, bar/scatter, area/bar, and various stock charts. Note that mixed charts are not the same as dashboard or small multiple charts, where multiple charts are contained inside a single chart object. Instead, a mixed chart is a single chart that contains multiple data sets. For each data set, a unique chart type is assigned. See examples of mixed and other charts in the ZingChart Gallery.

Mixed Chart Types

To specify your chart type, add the "type" attribute to your chart object. With mixed charts, we have three type values based on the chart's orientation: "mixed" (vertical), "hmixed" (horizontal), and "mixed3d" (three-dimensional). Once you provide your mixed chart type, you'll then go to your series array. In each series object, specify which horizontal, vertical, or three-dimensional chart type you want applied to that data set.

Mixed Chart

Our vertically-oriented mixed chart is specified by the "mixed" value. The chart types that can be used with our default mixed chart are: "area", "bar", "line", "bullet", "scatter", "bubble", "stock", and "range". Below is a mixed chart containing area, bar, and line chart types.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed", // 1. Specify your mixed chart type.
  "plot": {
    "tooltip": {
      "text": "%t"
    }
  },
  "series": [ // 2. Specify the chart type for each series object.
    {
      "type": "area",
      "values": [34, 70, 40, 75, 33, 50, 65],
      "aspect": "stepped",
      "contour-on-top": false,
      "text": "Area Chart"
    },
    {
      "type": "bar",
      "values": [49, 30, 21, 15, 59, 51, 69],
      "bar-width": "50%",
      "text": "Bar Chart"
    },
    {
      "type": "line",
      "values": [5, 9, 3, 19, 7, 15, 14],
      "aspect": "spline",
      "text": "Line Chart"
    }
  ]
}

Here is a mixed chart containing bullet, scatter, bubble, stock, and range chart types.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed", // 1. Specify your mixed chart type.
  "plot": {
    "tooltip": {
      "text": "%t"
    }
  },
  "series": [ // 2. Specify the chart type for each series object.
    {
      "type": "bullet",
      "values": [34, 70, 40, 75, 33, 50, 65],
      "goals": [30, 75, 49, 69, 35, 59, 60],
      "text": "Bullet Chart"
    }, 
    {
      "type": "scatter",
      "values": [
        [0.3, 5],
        [0.4, 11],
        [0.5, 9],
        [0.8, 7],
        [1, 12],
        [1.1, 3],
        [1.2, 6],
        [1.5, 19]
      ],
      "text": "Scatter Chart"
    }, 
    {
      "type": "bubble",
      "values": [
        [3.4, 10, 5],
        [3.8, 9, 2],
        [4.2, 19, 6],
        [4.5, 8, 1],
        [4.8, 11, 3],
        [5.1, 15, 7],
        [5.6, 7, 2],
        [5.8, 11, 3]
      ],
      "text": "Bubble Chart"
    }, 
    {
      "type": "stock",
      "values": [
        [91, 85, 99, 95],
        [95, 89, 97, 93],
        [93, 91, 96, 91],
        [91, 87, 98, 97],
        [97, 85, 97, 89],
        [89, 86, 97, 96],
        [96, 91, 99, 95]
      ],
      "aspect": "whisker",
      "text": "Stock Chart"
    }, 
    {
      "type": "range",
      "values": [
        [40, 59],
        [34, 67],
        [31, 35],
        [34, 40],
        [19, 33],
        [30, 50],
        [15, 70]
      ],
      "aspect": "spline",
      "line-width": 1,
      "text": "Range Chart"
    }
  ]
}

Horizontal Mixed Chart

The horizontally-oriented mixed chart is specified by the "hmixed" value. The axes are switched so that the x-axis is vertical and the y-axis is horizontal. The following chart types can be used with horizontal mixed charts: "varea", "hbar", "vline", "hbullet", "hscatter", and "hbubble". The chart below contains horizontal area, bar, and line chart types.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "hmixed", // 1. Specify your mixed chart type.
  "plot": {
    "tooltip": {
      "text": "%t"
    }
  },
  "series": [ // 2. Specify the chart type for each series object.
    {
      "type": "varea",
      "values": [34, 70, 40, 75, 33, 50, 65],
      "aspect": "stepped",
      "contour-on-top": false,
      "text": "Area Chart"
    }, 
    {
      "type": "hbar",
      "values": [49, 30, 21, 15, 59, 51, 69],
      "bar-width": "50%",
      "text": "Bar Chart"
    }, 
    {
      "type": "vline",
      "values": [5, 9, 3, 19, 7, 15, 14],
      "aspect": "spline",
      "text": "Line Chart"
    }
  ]
}

This mixed chart contains horizontal bullet, scatter, and bubble chart types.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "hmixed",  // 1. Specify your mixed chart type.
  "plot": {
    "tooltip": {
      "text": "%t"
    }
  },
  "series": [  // 2. Specify the chart type for each series object.
    {
      "type": "hbullet",
      "values": [34, 70, 40, 75, 33, 50, 65],
      "goals": [30, 75, 49, 69, 35, 59, 60],
      "text": "Bullet Chart"
    }, 
    {
      "type": "hscatter",
      "values": [
        [0.3, 5],
        [0.4, 11],
        [0.5, 9],
        [0.8, 7],
        [1, 12],
        [1.1, 3],
        [1.2, 6],
        [1.5, 19]
      ],
      "text": "Scatter Chart"
    }, 
    {
      "type": "hbubble",
      "values": [
        [3.4, 10, 5],
        [3.8, 9, 2],
        [4.2, 19, 6],
        [4.5, 8, 1],
        [4.8, 11, 3],
        [5.1, 15, 7],
        [5.6, 7, 2],
        [5.8, 11, 3]
      ],
      "text": "Bubble Chart"
    }
  ]
}

3-D Mixed Chart

The three-dimensional mixed chart is specified by the "mixed3d" value. You can use the "area3d", "bar3d", and "line3d" chart types with our 3-D mixed charts, as seen in the example chart below. We also have a separate Tutorial on 3-D Charts for more information on 3-D-specific styling and more.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed3d", // 1. Specify your mixed chart type.
  "plot": {
    "tooltip": {
      "text": "%t"
    }
  },
  "series": [ // 2. Specify the chart type for each series object.
    {
      "type": "area3d",
      "values": [34, 70, 40, 75, 33, 50, 65],
      "aspect": "stepped",
      "contour-on-top": false,
      "alpha-area": 0.5,
      "text": "Area Chart"
    }, 
    {
      "type": "bar3d",
      "values": [49, 30, 21, 15, 59, 51, 69],
      "bar-width": "50%",
      "text": "Bar Chart"
    }, 
    {
      "type": "line3d",
      "values": [5, 9, 3, 19, 7, 15, 14],
      "aspect": "spline",
      "text": "Line Chart"
    }
  ]
}

Small Multiple Mixed Chart

You can create a small multiple mixed chart (also known as a trellis or grid chart) using a "graphset" array. In the array, add a chart object for each of your mixed charts. See our Tutorial on Adding Additional Charts for more information on how to put together small multiple charts, as well as how to add additional charts throughout your webpage.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "graphset": [
    {
      "type": "mixed",
      "series": [
        {
          "type": "bar",
          "values": [59, 70, 40, 75, 33, 50, 65],
          "bar-width": "50%"
        }, 
        {
          "type": "line",
          "values": [49, 30, 21, 15, 59, 51, 69],
          "aspect": "spline"
        }
      ]
    }, 
    {
      "type": "mixed",
      "series": [
        {
          "type": "bar",
          "values": [55, 71, 45, 77, 29, 40, 59],
          "bar-width": "50%"
        }, 
        {
          "type": "line",
          "values": [40, 29, 33, 19, 50, 61, 66],
          "aspect": "spline"
        }
      ]
    }, 
    {
      "type": "mixed",
      "series": [
        {
          "type": "bar",
          "values": [49, 55, 70, 60, 55, 43, 55],
          "bar-width": "50%"
        }, 
        {
          "type": "line",
          "values": [60, 34, 67, 27, 64, 71, 54],
          "aspect": "spline"
        }
      ]
    }, 
    {
      "type": "mixed",
      "series": [
        {
          "type": "bar",
          "values": [50, 41, 59, 79, 70, 61, 53],
          "bar-width": "50%"
        }, 
        {
          "type": "line",
          "values": [59, 15, 29, 34, 51, 66, 75],
          "aspect": "spline"
        }
      ]
    }
  ]
}

Series Data

After specifying your mixed chart type, go to the series array. In each series object, first add a "type" attribute. Provide the chart type you want applied, but remember that it must match the mixed chart type it falls under. You cannot, for example, set your mixed chart type to "mixed" and then add a "bar3d" or "hscatter" chart type to one of the series objects. Next, provide your chart data. Remember that it must be formatted in accordance with that chart type. Refer to the applicable chart types page for the correct data format, or browse through the reference code block below.

{
  "type": "mixed",  // 1. Specify your mixed chart type.
  "series": [  // 2. In each series object, provide your chart type with corresponding data.
    {
      "type": "area",  //Area Chart
      "values": [y0, y1, y2, y3, ..., yN]
    }, 
    {
      "type": "bar",  //Bar Chart
      "values": [y0, y1, y2, y3, ..., yN]
    }, 
    {
      "type": "line",  //Line Chart
      "values": [y0, y1, y2, y3, ..., yN]
    },
    {
      "type": "bullet",  //Bullet Chart
      "values": [y0, y1, y2, y3, ..., yN],
      "goals": [goal0, goal1, goal2, goal3, ..., goalN]
    }, 
    {
      "type": "scatter",  //Scatter Plot
      "values": [
        [x0, y0],
        [x1, y1],
        [x2, y2],
        [x3, y3],
        ...,
        [xN, yN]
      ]
    }, 
    {
      "type": "bubble",  //Bubble Chart
      "values": [
        [x0, y0, bubble0],
        [x1, y1, bubble1],
        [x2, y2, bubble2],
        [x3, y3, bubble3],
        ...,
        [xN, yN, bubbleN]
      ]
    }, 
    {
      "type": "stock",  //Stock Chart
      "values": [
        [open0, high0, low0, close0],
        [open1, high1, low1, close1],
        [open2, high2, low2, close2],
        [open3, high3, low3, close3],
        ...,
        [openN, highN, lowN, closeN]
      ]
    }, 
    {
      "type": "range",  //Range Chart
      "values": [
        [lower-y0, upper-y0],
        [lower-y1, upper-y1],
        [lower-y2, upper-y2],
        [lower-y3, upper-y3],
        ...,
        [lower-yN, upper-yN]
      ]
    }
  ]
}

Further Customization

Next, you'll want to configure your mixed chart scales and perhaps incorporate additional scales. You can also style your charts; which attributes to apply depends on the chart type being used. See examples of various stylings in the More Mixed Chart Combinations section below.

Scales

Our mixed charts support linear (default), category, time-series, and logarithmic scales. Read our Configuring Your Scales Tutorial for more in-depth information on how to set up and customize each scale type. You can also refer to the JSON Attributes/Syntax pages for scale-x and scale-y. The below charts display examples of linear/category, time-series, and logarithmic scales on various mixed chart combinations.

Linear & Category Scale

This bullet and scatter mixed chart has a category scale on the x-axis and a linear scale on the y-axis. To create category scale labels, use a "labels" array and provide your labels as string values separated by commas. To specify the minimum, maximum, and step scale values on linear scales, use a "values" attribute. Provide your min/max/step inside a string separated by colons. Refer to our Scales Tutorial for further information.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed",
  "title": {
    "text": "Mixed Chart with Linear & Category Scales"
  },
  "scale-x": {
    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  },
  "scale-y": {
    "values": "0:100:20",
    "format": "$%vK"
  },
  "series": [
    {
      "type": "bullet",
      "values": [59, 79, 40, 75, 33, 50, 65, 43, 55, 61, 80, 90],
      "goals": [60, 65, 34, 69, 15, 33, 45, 29, 55, 49, 51, 75],
      "goal": {
        "background-color": "#CD7F32",
        "border-color": "#CD7F32",
        "tooltip": {
          "text": "Bronze Goal: %g",
          "background-color": "#CD7F32",
          "border-color": "#CD7F32"
        }
      },
      "tooltip": {
        "text": "Actual: %v"
      }
    }, 
    {
      "type": "scatter",
      "values": [65, 71, 45, 72, 29, 37, 49, 33, 60, 56, 60, 80],
      "marker": {
        "type": "rectangle",
        "height": "7%",
        "width": "27%",
        "background-color": "#c0c0c0",
        "border-color": "#c0c0c0"
      },
      "tooltip": {
        "text": "Silver Goal: %v"
      }
    }, 
    {
      "type": "scatter",
      "values": [69, 75, 50, 81, 35, 45, 56, 39, 70, 68, 75, 95],
      "marker": {
        "type": "rectangle",
        "height": "7%",
        "width": "27%",
        "background-color": "#FFD700",
        "border-color": "#FFD700"
      },
      "tooltip": {
        "text": "Gold Goal: %v"
      }
    }
  ]
}

Time-Series Scale

This stock and bar mixed chart displays a time-series scale on the x-axis. With this scale type, you need to add a "min-value" attribute, "step" attribute, and "transform" object to your scale object. For the "min-value" and "step", provide your scale values in Unix time in milliseconds. In the "transform" object, add a "type" attribute and set the value to "date". Next, add an "all" attribute and specify how you want your scale values formatted. You can use a combination of ZingChart tokens, alphanumeric, and special characters. See our Scales Tutorial for more time-series customization options.

Note: This chart also has two y-axis scales: "scale-y" is linked to the stock chart data (showing open, high, low, and close values) and "scale-y-2" is linked to the bar chart data (showing volume values). Adding secondary scales is discussed in the Multiple Scales section below.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed",
  "title": {
    "text": "Mixed Chart with Time-Series Scale"
  },
  "scale-x": {
    "min-value": 1420218000000,
    "step": "day",
    "transform": {
      "type": "date",
      "all": "%m/%d/%y"
    },
    "items-overlap": true,
    "max-items": 5
  },
  "scale-y": {
    "values": "0:50:10",
    "format": "$%v"
  },
  "scale-y-2": {
    "values": "0:15000:3000",
    "visible": false
  },
  "series": [
    {
      "type": "stock",
      "scales": "scale-x,scale-y",
      "values": [
        [1420218000000, [30, 39, 25, 34]], //01/02/15
        [1420477200000, [34, 40, 29, 30]], //01/05/15
        [1420563600000, [30, 45, 25, 36]], //01/06/15
        [1420650000000, [36, 39, 25, 29]], //01/07/15
        [1420736400000, [29, 33, 21, 25]], //01/08/15
        [1420822800000, [25, 37, 25, 33]], //01/09/15
        [1421082000000, [33, 41, 31, 35]], //01/12/15
        [1421168400000, [35, 39, 28, 31]], //01/13/15
        [1421254800000, [31, 40, 28, 30]], //01/14/15
        [1421341200000, [30, 36, 25, 28]], //01/15/15
        [1421427600000, [28, 38, 28, 37]], //01/16/15
        [1421773200000, [37, 48, 37, 40]], //01/20/15
        [1421859600000, [40, 45, 34, 35]], //01/21/15
        [1421946000000, [35, 39, 31, 33]], //01/22/15
        [1422032400000, [33, 34, 24, 26]], //01/23/15
        [1422291600000, [26, 34, 25, 31]], //01/26/15
        [1422378000000, [31, 38, 28, 33]], //01/27/15
        [1422464400000, [33, 37, 27, 29]], //01/28/15
        [1422550800000, [29, 35, 25, 30]], //01/29/15
        [1422637200000, [30, 39, 29, 34]] //01/30/15
      ],
      "tooltip": {
        "text": "On %kv:<br><br>Open: $%v0<br>High: $%v1<br>Low: $%v2<br>Close: $%v3<br>",
          "decimals": 2
        }
      },
    },
    {
      "type": "bar",
      "scales": "scale-x,scale-y-2",
      "values": [
        [1420218000000, 3000], //01/02/15
        [1420477200000, 3400], //01/05/15
        [1420563600000, 1500], //01/06/15
        [1420650000000, 2900], //01/07/15
        [1420736400000, 3100], //01/08/15
        [1420822800000, 2000], //01/09/15
        [1421082000000, 2500], //01/12/15
        [1421168400000, 3900], //01/13/15
        [1421254800000, 3500], //01/14/15
        [1421341200000, 2200], //01/15/15
        [1421427600000, 2600], //01/16/15
        [1421773200000, 2700], //01/20/15
        [1421859600000, 3100], //01/21/15
        [1421946000000, 3400], //01/22/15
        [1422032400000, 3000], //01/23/15
        [1422378000000, 2900], //01/27/15
        [1422464400000, 2400], //01/28/15
        [1422550800000, 2100], //01/29/15
        [1422637200000, 3400] //01/30/15
      ],
      "tooltip": {
        "text": "Volume: %v shares",
        "thousands-separator": ","
      }
    }
  ]
}

Logarithmic Scale

This line and bar mixed chart uses a logarithmic scale on the y-axis to better display the extreme sales growth of Stores A, B, and C over a six-month period. To create a logarithmic scale, add a "progression" attribute to your scale object and set the value to "log". Next, add a "log-base" attribute and provide your base value (e.g., 10 or Math.E). Our Configuring Your Scales Tutorial provides more information on logarithmic scales.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed",
  "title": {
    "text": "Mixed Chart with Logarithmic Scale"
  },
  "plot": {
    "tooltip": {
      "text": "%t: %v sales",
      "thousands-separator": ","
    }
  },
  "scale-x": {
    "labels": ["Aug", "Sep", "Oct", "Nov", "Dec"]
  },
  "scale-y": {
    "progression": "log",
    "log-base": 10,
    "thousands-separator": ",",
    "short": true
  },
  "series": [
    {
      "type": "line",
      "values": [194, 1290, 7900, 150000, 1850000],
      "aspect": "spline",
      "text": "Total"
    }, 
    {
      "type": "bar",
      "values": [60, 340, 1500, 45000, 550000],
      "text": "Store A"
    }, 
    {
      "type": "bar",
      "values": [65, 450, 2900, 49000, 600000],
      "text": "Store B"
    }, 
    {
      "type": "bar",
      "values": [69, 500, 3500, 56000, 700000],
      "text": "Store C"
    }
  ]
}

Multiple Scales

With mixed charts, you may want to have different data sets chart to different scales. In the chart below, for example, the three stacked bar charts are assigned to "scale-y" and the two line charts are assigned to "scale-y-2". All of the charts share "scale-x". (ZingChart supports additional scales up to "scale-x-9" and "scale-y-9".) You'll need to specify which scales you want each data set to chart to. In your series objects, add a "scales" attribute, and provide your scale values, e.g., "scale-x,scale-y-2". (Without specification, your data will chart to scale-x and -y by default.) See our Scales Tutorial for more information on multiple and secondary scales.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed",
  "title": {
    "text": "Mixed Chart with Multiple Scales"
  },
  "scale-x": {
    "labels": ["Start", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "End"],
    "label": {
      "text": "scale-x"
    }
  },
  "scale-y": {
    "values": "0:200:50",
    "label": {
      "text": "scale-y"
    }
  },
  "scale-y-2": {
    "values": "0:100:25",
    "label": {
      "text": "scale-y-2"
    }
  },
  "series": [
    {
      "type": "bar",
      "scales": "scale-x,scale-y",
      "values": [
        34, 30, 36, 29, 25, 33, 35, 31, 30, 28,
        37, 40, 35, 33, 26, 31, 33, 29, 30, 34,
        33, 25, 15, 23, 41, 29, 17, 29, 12, 39
      ],
      "stacked": true,
      "stack": 1,
      "bar-width": "80%"
    }, 
    {
      "type": "bar",
      "scales": "scale-x,scale-y",
      "values": [
        30, 34, 15, 29, 31, 20, 25, 39, 35, 22,
        26, 27, 31, 34, 30, 32, 29, 24, 21, 34,
        14, 21, 10, 24, 18, 29, 33, 20, 30, 19
      ],
      "stacked": true,
      "stack": 1,
      "bar-width": "80%"
    }, 
    {
      "type": "bar",
      "scales": "scale-x,scale-y",
      "values": [
        3, 5, 2, 1, 9, 7, 6, 4, 5, 2,
        4, 3, 8, 5, 7, 9, 1, 2, 6, 4,
        7, 1, 9, 3, 3, 5, 2, 5, 3, 4
      ],
      "stacked": true,
      "stack": 1,
      "bar-width": "80%"
    }, 
    {
      "type": "line",
      "scales": "scale-x,scale-y-2",
      "values": [
        75, 81, 73, 69, 79, 83, 92, 74, 68, 78,
        83, 76, 65, 78, 72, 82, 78, 86, 73, 67,
        74, 61, 89, 74, 70, 80, 63, 88, 71, 80
      ],
      "marker": {
        "size": 3
      }
    }, 
    {
      "type": "line",
      "scales": "scale-x,scale-y-2",
      "values": [
        61, 75, 78, 65, 83, 79, 91, 87, 76, 91,
        85, 76, 83, 98, 67, 87, 76, 68, 85, 73,
        83, 95, 71, 84, 90, 88, 73, 82, 62, 90
      ],
      "marker": {
        "size": 3
      }
    }
  ]
}

More Mixed Chart Combinations

When styling your mixed charts, use the underlying chart types as a guide for what styling attributes apply. Repeatedly used styling attributes include "background-color", "line-color", "line-width", "marker" objects, and more. Browse the Plot/Series JSON Attributes/Syntax page for a full list of attribute options. You can also customize and/or add value boxes, tooltips, legends, and more. See some of the example charts below for further ideas.

Range/Scatter

Here is a range and scatter mixed chart. Note how the styling attributes used in each series object are specific to each chart type, range chart and scatter plot, respectively. Always refer to the applicable chart types pages for chart-specific styling and attribute options.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed",
  "title": {
    "text": "Range/Scatter Mixed Chart"
  },
  "scale-x": {
    "labels": ["M", "T", "W", "H", "F", "S/S"]
  },
  "scale-y": {
    "values": "0:100:25",
    "guide": {
      "visible": false
    }
  },
  "series": [
    {
      "type": "range",
      "values": [
        [9, 15],
        [15, 29],
        [5, 21],
        [30, 34],
        [34, 59],
        [30, 93]
      ],
      "aspect": "spline",
      "background-color": "#ff0066 #ff9966",
      "line-color": "#66CCFF",
      "line-width": 1,
      "marker": {
        "type": "none"
      }
    }, 
    {
      "type": "scatter",
      "values": [
        [0.3, 12],
        [0.5, 15],
        [1, 19],
        [1.5, 15],
        [1.7, 14],
        [2, 16],
        [3, 32],
        [3.3, 37],
        [3.4, 34],
        [4, 37],
        [4.2, 54],
        [4.3, 60],
        [4.4, 39],
        [4.5, 50],
        [4.5, 34],
        [4.6, 70],
        [4.7, 80],
        [4.8, 65],
        [4.8, 71],
        [4.9, 34]
      ],
      "marker": {
        "size": 4,
        "background-color": "#66CCFF #FFCCFF",
        "border-color": "white"
      }
    }
  ]
}

Area/Stacked Bar

Here is an area and stacked bar mixed chart. You can create stacked bars in a mixed chart by adding a "stacked" attribute to each applicable series object, and setting the value to true. Next, add a "stack" attribute and specify which stack you want that series object assigned to. In the below chart, all three bar charts were assigned to the same stack, i.e., 1.

Note: When working with mixed charts, you'll notice that different charts have different default offsets. To adjust the spacing between your axis lines and plotted data, add an "offset" attribute to your "scale-x" and/or "scale-y" object(s). Provide a pixel value.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed",
  "title": {
    "text": "Area/Stacked Bar Mixed Chart"
  },
  "scale-x": {
    "labels": ["Jan", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "Dec"],
    "offset": 0
  },
  "scale-y": {
    "values": "0:90:30",
    "guide": {
      "visible": false
    }
  },
  "series": [
    {
      "type": "area",
      "values": [
        15, 10, 16, 12, 13, 19, 11, 21, 15, 29,
        21, 19, 23, 24, 17, 23, 26, 31, 29, 34,
        19, 54, 23, 44, 33, 34, 30, 47, 61, 31,
        59, 45, 69, 54, 70, 65, 78, 61, 76, 78,
        60, 67, 87, 71, 80, 54, 78, 89, 57, 91
      ],
      "background-color": "gray",
      "line-color": "none",
      "marker": {
        "type": "none"
      }
    }, 
    {
      "type": "bar",
      "values": [
        2.1, 1.9, 2.3, 2.4, 1.7, 2.3, 7, 3.1, 2.9, 3.4,
        1.5, 1.0, 1.6, 1.2, 11, 1.9, 14, 2.1, 1.5, 2.9,
        5.9, 4.5, 6.9, 5.4, 7.0, 6.5, 7.8, 6.1, 7.6, 9.1,
        11, 13.1, 21.1, 33, 41, 23.5, 34, 30, 13.7, 51.2,
        41.2, 23.5, 34.2, 33.1, 32, 21, 19.7, 34, 7, 30.1
      ],
      "stacked": true,
      "stack": 1,
      "bar-width": "70%",
      "background-color": "#003300"
    }, 
    {
      "type": "bar",
      "values": [
        1.5, 1.0, 1.6, 1.2, 1.3, 1.9, 1.1, 2.1, 1.5, 2.9,
        2.1, 1.9, 2.3, 2.4, 1.7, 2.3, 2.6, 3.1, 2.9, 3.4,
        1.9, 5.4, 2.3, 4.4, 3.3, 3.4, 3.0, 4.7, 6.1, 3.1,
        5.9, 4.5, 6.9, 5.4, 7.0, 6.5, 7.8, 6.1, 7.6, 7.8,
        6.0, 6.7, 8.7, 7.1, 8.0, 5.4, 7.8, 8.9, 5.7, 9.1
      ],
      "stacked": true,
      "stack": 1,
      "bar-width": "70%",
      "background-color": "#009900"
    }
  ]
}

Bubble/Line

Here is a bubble and line mixed chart. With this chart, value boxes and scale markers were added to provide additional information and clarification. For more customization options, see our Scales Tutorial and JSON Attributes/Syntax pages.

Note: To adjust the spacing between your axis lines and plotted data, add an "offset" attribute to your "scale-x" and/or "scale-y" object(s). Provide a pixel value.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed",
  "title": {
    "text": "Bubble/Line Mixed Chart"
  },
  "scale-x": {
    "labels": ["7:00", "7:15", "7:30", "7:45", "8:00", "8:15", "8:30"],
    "offset": 15
  },
  "scale-y": {
    "values": "0:80:20",
    "guide": {
      "visible": false
    },
    "markers": [
      {
      "type": "area",
      "range": [20, 60],
      "background-color": "#ffe5ff"
      }
    ]
  },
  "series": [
    {
      "type": "line",
      "values": [19, 15, 39, 23, 37, 70, 30],
      "aspect": "spline",
      "line-color": "#ff5050",
      "marker": {
        "type": "square",
        "background-color": "#ff5050"
      },
      "value-box": {
        "type": "first,last"
      }
    }, 
    {
      "type": "line",
      "values": [15, 29, 21, 34, 59, 30, 71],
      "aspect": "spline",
      "line-color": "#666699",
      "marker": {
        "type": "diamond",
        "background-color": "#666699"
      },
      "value-box": {
        "type": "first,last"
      }
    }, 
    {
      "type": "bubble",
      "values": [
        [3.4, 34, 30],
        [3.5, 61, 15],
        [3.6, 50, 7],
        [3.7, 21, 45],
        [4.1, 49, 31],
        [4.6, 39, 5],
        [5.1, 55, 33],
        [5.7, 43, 25],
        [5.8, 62, 5]
      ],
      "marker": {
        "background-color": "#660066"
      }
    }
  ]
}

Summary

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