• Getting Started

  • Data

  • Chart Types

  • Chart Elements

  • Integrations

  • API

  • Tools

  • FAQ

  • Change Log

  • Flame Chart

    Type

    ZingChart flame charts use the type attribute. In your chart object, add a type attribute and set the value to flame.

    {
    	type: 'flame'
    }
    

    Actions

    There are some default user interactions you should know about flame charts.

    Click

    You can click on the chart to zoom in on any piece of the bar.

    Click + Drag

    You can click and drag to zoom in on the chart. You can click on a bar to zoom out.

    Click and drag demo

    Data

    To enter data into the flame chart, use the series array. Each object in the series array requires a name, value, or children array to function properly.

    Note: Learn more about the series array with our series JSON Configuration page.

    {
      "children": [
        {
          "name": "genunix`syscall_mstate", 
          "value": 89
        }, 
        {
          "children": [
            {
              "name": "genunix`gethrtime_unscaled", 
              "value": 4
            }, 
    			]
    		}
      ]
    }
    

    Further Customization

    You can also use the options object to style your chart.

    Palette

    The palette attribute defines a custom palette for your flame chart. Provide a string of comma separated color, HEX, or RGB values.

    {
      options: {
        palette: ['#ff9900']
      }
    }