About

Style Guide includes a component for creating charts based on chartjs and gauge.js

Charts should only be used for low online data volume. For large volumes of data and complex graphics, must compulsorily use Analytics.

Although you can use the chartjs and gauge.js components directly, we recommend that you use the component "FLUIGC.chart" which was designed to simplify the use of these components.

Creating charts with Developer Studio using the Style Guide

If you want to create forms using the style guide and add charts, you'll need to import the minified CSS and JavaScript files. To import them, follow the example below, not forgetting to import the fluig-style-guide-chart.min.js file:

	<head>
	<link rel="stylesheet" type="text/css" href="/portal/resources/css/fluig-style-guide.min.css">
	<script src="/portal/resources/js/jquery/jquery.js"></script>
	<script src="/portal/resources/js/jquery/jquery-ui.min.js"></script>
	<script src="/portal/resources/js/fluig-style-guide.min.js"></script>
	<script src="/portal/resources/js/fluig-style-guide-chart.min.js"></script>
	</head>
	<body>
		<div class="fluig-style-guide">
			<!--Some code here-->
		</div>
	</body>

Using charts in widgets

To use charts in widgets, you must inform the following line in the application.info file of your widget:

	application.resource.component.1=fluigchart

Constructor Chart options

The options object has the following attributes:

Name type default description
animation boolean '' Whether to animate the chart
animationSteps number '' number of animation steps
animationEasing string '' Animation easing effect
showScale boolean '' If we should show the scale at all
scaleOverride boolean '' If we want to override with a hard coded scale
scaleSteps number '' The number of steps in a hard coded scale
scaleStepWidth number '' The value jump in the hard coded scale
scaleStartValue number '' The scale starting value
scaleLineColor string '' Colour of the scale line
scaleLineWidth number '' Pixel width of the scale line
scaleShowLabels boolean '' Whether to show labels on the scale
scaleLabel Interpolated JS string '' Can access value
scaleIntegersOnly boolean '' Whether the scale should stick to integers, not floats even if drawing space is there
scaleBeginAtZero boolean '' Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleFontFamily string '' Scale label font declaration for the scale label
scaleFontSize number '' Scale label font size in pixels
scaleFontStyle string '' Scale label font weight style
scaleFontColor string '' Scale label font colour
responsive boolean true whether or not the chart should be responsive and resize when the browser does
maintainAspectRatio boolean '' whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
showTooltips boolean '' Determines whether to draw tooltips on the canvas or not
customTooltips function '' Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
tooltipEvents Array '' Array of string names to attach tooltip events
tooltipFillColor string '' Tooltip background colour
tooltipFontFamily string '' Tooltip label font declaration for the scale label
tooltipFontSize number '' Tooltip label font size in pixels
tooltipFontStyle string '' Tooltip font weight style
tooltipFontColor string '' Tooltip label font colour
tooltipTitleFontFamily string '' Tooltip title font declaration for the scale label
tooltipTitleFontSize number '' Tooltip title font size in pixels
tooltipTitleFontStyle string '' Tooltip title font weight style
tooltipTitleFontColor string '' Tooltip title font colour
tooltipYPadding number '' pixel width of padding around tooltip text
tooltipXPadding number '' pixel width of padding around tooltip text
tooltipCaretSize number '' Size of the caret on the tooltip
tooltipCornerRadius number '' Pixel radius of the tooltip border
tooltipXOffset number '' Pixel offset from point x to tooltip edge
tooltipTemplate string '' Template string for single tooltips
multiTooltipTemplate string '' Template string for single tooltips
onAnimationProgress function '' Will fire on animation progression
onAnimationComplete function '' Will fire on animation completion

Line

Examples

A line chart is a way of plotting data points on a line.

Live demo

Below an example of line chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the line chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the line function
var lineChart = chart.line(data, options);

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200',
	/* See the list of options */
});
// call the line function
var lineChart = chart.line(data, options);

Data structure

The line chart requires an array of labels for each of the data points. Each dataset has a colour for the fill, a colour for the line and colours for the points and strokes of the points.

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

Line Chart options

The options object has the following attributes:

Name type default description
scaleShowGridLines boolean '' Whether grid lines are shown across the chart.
scaleGridLineColor string '' Colour of the grid lines.
scaleGridLineWidth number '' Width of the grid lines.
bezierCurve boolean '' Whether the line is curved between points.
bezierCurveTension number '' Tension of the bezier curve between points.
pointDot boolean '' Whether to show a dot for each point.
pointDotRadius number '' Radius of each point dot in pixels.
pointDotStrokeWidth number '' Pixel width of point dot stroke.
pointHitDetectionRadius number '' amount extra to add to the radius to cater for hit detection outside the drawn point.
datasetStroke boolean '' Whether to show a stroke for datasets.
datasetStrokeWidth number '' Pixel width of dataset stroke.
datasetFill boolean '' Whether to fill the dataset with a colour.
legendTemplate string '' A legend template.

Methods

.addData(valuesArray, label)

Adds a new data to chart.

	lineChart.addData([40, 60], "August");

.update()

Update the dataset's value.

	// Would update the first dataset's value of 'March' to be 50
	lineChart.datasets[0].points[2].value = 50;
	// Calling update now animates the position of March from 90 to 50.
	lineChart.update();

.removeData()

Remove the first value for all datasets on the chart.

	lineChart.removeData();

Bar

Examples

A bar chart is a way of showing data as bars

Live demo

Below an example of bar chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the bar chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the bar function
var barChart = chart.bar(data, options);

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200',
	/* See the list of options */
});
// call the bar function
var barChart = chart.bar(data, options);

Data structure

The bar chart has the a very similar data structure to the line chart, and has an array of datasets, each with colours and an array of data.

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

Bar Chart options

The options object has the following attributes:

Name type default description
scaleBeginAtZero boolean '' Whether the scale should start at zero, or an order of magnitude down from the lowest value.
scaleShowGridLines string '' Whether grid lines are shown across the chart.
scaleGridLineColor string '' Colour of the grid lines.
scaleGridLineWidth number '' Width of the grid lines.
barShowStroke boolean '' If there is a stroke on each bar.
barStrokeWidth number '' Pixel width of the bar stroke.
barValueSpacing number '' Spacing between each of the X value sets.
barDatasetSpacing number '' Spacing between data sets within X values.
legendTemplate number '' A legend template.

Methods

.addData(valuesArray, label)

Adds a new data to chart.

	barChart.addData([40, 60], "August");

.update()

Update the dataset's value.

	// Would update the first dataset's value of 'March' to be 50
	barChart.datasets[0].bars[2].value = 50;
	// Calling update now animates the position of March from 90 to 50.
	barChart.update();

.removeData()

Remove the first value for all datasets on the chart.

	barChart.removeData();

Radar

Examples

A radar chart is a way of showing multiple data points and the variation between them.

Live demo

Below an example of radar chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the radar chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the radar function
var radarChart = chart.radar(data, options);

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200',
	/* See the list of options */
});
// call the radar function
var radarChart = chart.radar(data, options);

Data structure

For a radar chart, to provide context of what each point means, we include an array of strings that show around each point in the chart. For the radar chart data, we have an array of datasets. Each of these is an object, with a fill colour, a stroke colour, a colour for the fill of each point, and a colour for the stroke of each point. We also have an array of data values.

var data = {
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
        }
    ]
};

Radar Chart options

The options object has the following attributes:

Name type default description
scaleShowLine boolean '' Whether to show lines for each scale point
angleShowLineOut boolean '' Whether we show the angle lines out of the radar
scaleShowLabels boolean '' Whether to show labels on the scale
scaleBeginAtZero boolean '' Whether the scale should begin at zero
angleLineColor string '' Colour of the angle line
angleLineWidth number '' Pixel width of the angle line
pointLabelFontFamily string '' Point label font declaration
pointLabelFontStyle string '' Point label font weight
pointLabelFontSize number '' Point label font size in pixels
pointLabelFontColor string '' Point label font colour
pointDot boolean '' Whether to show a dot for each point
pointDotRadius number '' Radius of each point dot in pixels
pointDotStrokeWidth number '' Pixel width of point dot stroke
pointHitDetectionRadius number '' Amount extra to add to the radius to cater for hit detection outside the drawn point
datasetStroke boolean '' Whether to show a stroke for datasets
datasetStrokeWidth number '' Pixel width of dataset stroke
datasetFill boolean '' Whether to fill the dataset with a colour
legendTemplate string '' A legend template

Methods

.addData(valuesArray, label)

Adds a new data to chart.

	radarChart.addData([40, 60], "August");

.update()

Update the dataset's value.

	// Would update the first dataset's value of 'March' to be 50
	radarChart.datasets[0].points[2].value = 50;
	// Calling update now animates the position of March from 90 to 50.
	radarChart.update();

.removeData()

Remove the first value for all datasets on the chart.

	radarChart.removeData();

Polar

Examples

Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.

Live demo

Below an example of polar chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the polar chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the polar function
var polarChart = chart.polar(data, options);

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200',
	/* See the list of options */
});
// call the polar function
var polarChart = chart.polar(data, options);

Data structure

The chart data you pass in an array of objects, with a value and a colour.

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    },
    {
        value: 40,
        color: "#949FB1",
        highlight: "#A8B3C5",
        label: "Grey"
    },
    {
        value: 120,
        color: "#4D5360",
        highlight: "#616774",
        label: "Dark Grey"
    }
];

Polar Chart options

The options object has the following attributes:

Name type default description
scaleShowLabelBackdrop boolean '' Show a backdrop to the scale label
scaleBackdropColor string '' The colour of the label backdrop
scaleBeginAtZero boolean '' Whether the scale should begin at zero
scaleBackdropPaddingY number '' The backdrop padding above and below the label in pixels
scaleBackdropPaddingX number '' The backdrop padding to the side of the label in pixels
scaleShowLine boolean '' Show line for each value in the scale
segmentShowStroke boolean '' Stroke a line around each segment in the chart
segmentStrokeColor string '' The colour of the stroke on each segement
segmentStrokeWidth number '' The width of the stroke value in pixels
animationSteps number '' Amount of animation steps
animationEasing string '' Animation easing effect
animateRotate boolean '' Whether to animate the rotation of the chart
animateScale boolean '' Whether to animate scaling the chart from the centre
legendTemplate string '' A legend template

Methods

.addData(valuesArray, label)

Adds a new data to chart.

	polarChart.addData({
	    value: 130,
	    color: "#B48EAD",
	    highlight: "#C69CBE",
	    label: "Purple"
	});

.update()

Update the dataset's value.

	polarChart.segments[1].value = 10;
	polarChart.update();

.removeData()

Remove the first value for all datasets on the chart.

	polarChart.removeData();

Pie

Examples

Pie chart is divided into segments, the arc of each segment shows the proportional value of each piece of data.

Live demo

Below an example of pie chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the pie chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the pie function
var pieChart = chart.pie(data, options);

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200',
	/* See the list of options */
});
// call the pie function
var pieChart = chart.pie(data, options);

Data structure

For a pie chart, you must pass in an array of objects with a value and a color property.

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    }
]

Pie Chart options

The options object has the following attributes:

Name type default description
segmentShowStroke Boolean '' Whether we should show a stroke on each segment
segmentStrokeColor String '' The colour of each segment stroke
segmentStrokeWidth Number '' The width of each segment stroke
percentageInnerCutout Number '' The percentage of the chart that we cut out of the middle
animationSteps Number '' Amount of animation steps
animationEasing String '' Animation easing effect
animateRotate Boolean '' Whether we animate the rotation of the Doughnut
animateScale Boolean '' Whether we animate scaling the Doughnut from the centre
legendTemplate String '' A legend template

Methods

.addData(valuesArray, label)

Adds a new data to chart.

	pieChart.addData({
	    value: 130,
	    color: "#B48EAD",
	    highlight: "#C69CBE",
	    label: "Purple"
	});

.update()

Update the dataset's value.

	pieChart.segments[1].value = 10;
	pieChart.update();

.removeData()

Remove the first value for all datasets on the chart.

	pieChart.removeData();

Events

Name Description
fluig.chart.pie.click Triggered when the click ocurrs on a pie chart area.

Events triggered by element selector

fluig.chart.pie.click

This event is fired when the click ocurrs on a pie chart area. The returned object has the label attributes and the value of the chart area.

	$('YOUR_SELECTOR').on('fluig.chart.pie.click', function(data) {
		// Do something
	});

Doughnut

Examples

Doughnut chart is divided into segments, the arc of each segment shows the proportional value of each piece of data.

Live demo

Below an example of doughnut chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the doughnut chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the doughnut function
var doughnutChart = chart.doughnut(data, options);

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200',
	/* See the list of options */
});
// call the doughnut function
var doughnutChart = chart.doughnut(data, options);

Data structure

For a doughnut chart, you must pass in an array of objects with a value and a color property.

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    }
]

Doughnut Chart options

The options object has the following attributes:

Name type default description
segmentShowStroke Boolean '' Whether we should show a stroke on each segment
segmentStrokeColor String '' The colour of each segment stroke
segmentStrokeWidth Number '' The width of each segment stroke
percentageInnerCutout Number '' The percentage of the chart that we cut out of the middle
animationSteps Number '' Amount of animation steps
animationEasing String '' Animation easing effect
animateRotate Boolean '' Whether we animate the rotation of the Doughnut
animateScale Boolean '' Whether we animate scaling the Doughnut from the centre
legendTemplate String '' A legend template

Methods

.addData(valuesArray, label)

Adds a new data to chart.

	doughnutChart.addData({
	    value: 130,
	    color: "#B48EAD",
	    highlight: "#C69CBE",
	    label: "Purple"
	});

.update()

Update the dataset's value.

	doughnutChart.segments[1].value = 10;
	doughnutChart.update();

.removeData()

Remove the first value for all datasets on the chart.

	doughnutChart.removeData();

Gauge

Examples

Allows the creation of a chart style of a manometer

Live demo

Below an example of gauge chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the gauge chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the gauge function
var chartGauge = chart.gauge();

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200'
});
// call the gauge function
var chartGauge = chart.gauge({
		lines: 12,
		angle: 0.15,
		lineWidth: 0.44,
		pointer: {
			length: 0.9,
			strokeWidth: 0.035,
			color: '#000000'
		},
		limitMax: 'false',
		colorStart: '#6FADCF',
		colorStop: '#8FC0DA',
		strokeColor: '#E0E0E0',
		generateGradient: true
	});

Gauge Chart options

The options object has the following attributes:

Name type default description
lines number 12 The number of lines to draw
angle number 0.15 The length of each line
lineWidth number 0.44 The line thickness
pointer object '' Settings pointer
limitMax string 'false' If true, the pointer will not go past the end of the gauge
colorStart string '#faa61a' Colors
colorStop string '#ed145b' Colors
strokeColor string '#ed145b' To see which ones work best for you
generateGradient boolean true Generate Gradient

Settings to Object pointer

The options object has the following attributes:

Name type default description
length number 0.9 The radius of the inner circle
strokeWidth number 0.035 The rotation offset
color string '#000000' Fill color

You can change the following attributes

maxValue

Set max gauge value.

	gaugeChart.maxValue = 3000;	

animationSpeed

Set animation speed (32 is default value).

	gaugeChart.animationSpeed = 74;	

Methods

.set(newValue)

Set actual value.

	gaugeChart.set(925);

Donut

Examples

Allows the creation of a chart style of a donut

Live demo

Below an example of donut chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the donut chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the donut function
var chartDonut = chart.donut();

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200'
});
// call the donut function
var chartDonut = chart.donut({
		lines: 12,
		angle: 0.15,
		lineWidth: 0.44,
		pointer: {
			length: 0.9,
			strokeWidth: 0.035,
			color: '#000000'
		},
		limitMax: 'false',
		colorStart: '#6FADCF',
		colorStop: '#8FC0DA',
		strokeColor: '#E0E0E0',
		generateGradient: true
	});

Donut Chart options

The options object has the following attributes:

Name type default description
lines number 12 The number of lines to draw
angle number 0.15 The length of each line
lineWidth number 0.44 The line thickness
pointer object '' Settings pointer
limitMax string 'false' If true, the pointer will not go past the end of the donut
colorStart string '#faa61a' Colors
colorStop string '#ed145b' Colors
strokeColor string '#303030' To see which ones work best for you
generateGradient boolean true Generate Gradient

Settings to Object pointer

The options object has the following attributes:

Name type default description
length number 0.9 The radius of the inner circle
strokeWidth number 0.035 The rotation offset
color string '#000000' Fill color

You can change the following attributes

maxValue

Set max gauge value.

	donutChart.maxValue = 3000;	

animationSpeed

Set animation speed (32 is default value).

	donutChart.animationSpeed = 74;	

Methods

.set(newValue)

Set actual value.

	donutChart.set(925);

LineBar

Examples

A lineBar chart is a mix of line chart and bar chart.

Live demo

Below an example of lineBar chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the line chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the lineBar function
var lineBarChart = chart.lineBar(data, options);

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200',
	/* See the list of options */
});
// call the lineBar function
var lineBarChart = chart.lineBar(data, options);

Data structure

The lineBar chart requires an array of labels and an array of datasets.

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        type: "line",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 4, 81, 56, 55, 40]
    }, {
        label: "My First dataset",
        type: "bar",
        fillColor: "rgba(220,20,220,0.2)",
        strokeColor: "rgba(220,20,220,1)",
        pointColor: "rgba(220,20,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [32, 25, 33, 88, 12, 92, 33]
    }]
};

LineBar Chart options and methods

You can use the same attributes and methods used to line charts and bar.