This layout is used by the following built-in charts/reports and examples




Javascript Layout
//helper function
function formatTooltipAsHours(value)
{
	return value.toFixed(2) + ' h';
}


var columns = [];
if (chartData.columns && chartData.columns.length){
	columns.push(chartData.columns[0]);
}

//generate the basic properties for generating the chart
var c3arg = {
    onrendered: updateFrameHeight,
	data: {
		columns: columns,
		type: chartData.type,
		colors: chartData.colors,
		empty: chartData.empty
	}
};

// on hover over the gauge, display the time in hours
if (chartData.custom && chartData.custom.tooltip)
{
	var tooltipFunction = eval(chartData.custom.tooltip);
	c3arg.tooltip = {
		format: {
			value: tooltipFunction
		}
	};
}

//set the maximum value on the gounge, in our case, total number of hours
if ( chartData.custom && chartData.custom.gauge_max)
{
	c3arg.gauge = {
		max: parseFloat(chartData.custom.gauge_max)
	};
}

c3.generate(c3arg);