Home
// Create the data table.
var table = new DataTable(
[
['Categories', 'Series 1', 'Series 2', 'Series 3'],
['Monday', 1, 3, 5],
['Tuesday', 3, 4, 6],
['Wednesday', 4, 3, 1],
['Thursday', null, 5, 1],
['Friday', 3, 4, 2],
['Saturday', 5, 10, 4],
['Sunday', 4, 12, 8]]);
// Define user options.
var options = {
'series': {
'labels': {
'enabled': true
}
}
};
// Create and render the chart.
var chart = new LineChart(container);
chart.draw(table, options);/// The global drawing options.
final globalOptions = {
// Map - An object that controls the animation.
'animation': {
// num - The animation duration in ms.
'duration': 800,
// String|(double t) -> double - Name of an easing function defined in [animation.dart] or
// an easing function itself.
'easing': easeOutQuint,
// () -> void - The function that is called when the animation is complete.
'onEnd': null
},
// The background color of the chart.
'backgroundColor': 'white',
// The color list used to render the series. If there are more series than
// colors, the colors will be reused.
'colors': [
'#7cb5ec',
'#434348',
'#90ed7d',
'#f7a35c',
'#8085e9',
'#f15c80',
'#e4d354',
'#8085e8',
'#8d4653',
'#91e8e1'],
// Map - An object that controls the legend.
'legend': {
// (String label) -> String - A function that format the labels.
'labelFormatter': null,
// String - The position of the legend relative to the chart area.
// Supported values: 'left', 'top', 'bottom', 'right', 'none'.
'position': 'right',
// Map - An object that controls the styling of the legend.
'style': {
'backgroundColor': 'white',
'borderColor': '#212121',
'borderWidth': 0,
'color': '#212121',
'fontFamily': '"Segoe UI", "Open Sans", Verdana, Arial',
'fontSize': 13,
'fontStyle': 'normal'
}
},
// Map - An object that controls the chart title.
'title': {
// String - The position of the title relative to the chart area.
// Supported values: 'above', 'below', 'middle', 'none';
'position': 'above',
// Map - An object that controls the styling of the chart title.
'style': {
// String - The title's color.
'color': '#212121',
// String - The title's font family.
'fontFamily': '"Segoe UI", "Open Sans", Verdana, Arial',
// String - The title's font size in pixels.
'fontSize': 20,
// String - The title's font style.
'fontStyle': 'normal'
},
// The title text. A `null` value means the title is hidden.
'text': null
},
// Map - An object that controls the tooltip.
'tooltip': {
// bool - Whether to show the tooltip.
'enabled': true,
// (String label) -> String - A function that format the labels.
'labelFormatter': null,
// Map - An object that controls the styling of the tooltip.
'style': {
'backgroundColor': 'white',
'borderColor': '#212121',
'borderWidth': 2,
'color': '#212121',
'fontFamily': '"Segoe UI", "Open Sans", Verdana, Arial',
'fontSize': 13,
'fontStyle': 'normal',
},
// (num value) -> String - A function that formats the values.
'valueFormatter': null
}
};
- Each row in the table represents a group of bars
- Column 0 contains x-axis labels (categories)
- Columns 1..N represents the series
Besides the options derived from the global options, a bar chart also has its specific options.
{
// Map - An object that controls the series.
'series': {
// Map - An object that controls the series labels.
'labels': {
// bool - Whether to show the labels.
'enabled': false,
'style': {
'color': '#212121',
'fontFamily': '"Segoe UI", "Open Sans", Verdana, Arial',
'fontSize': 13,
'fontStyle': 'normal'
}
}
},
// Map - An object that controls the x-axis.
'xAxis': const {
// String - The color of the horizontal grid lines.
'gridLineColor': '#c0c0c0',
// num - The width of the horizontal grid lines.
'gridLineWidth': 1,
// String - The color of the axis itself.
'lineColor': '#c0c0c0',
// num - The width of the axis itself.
'lineWidth': 1,
// Map - An object that controls the axis labels.
'labels': const {
// num - The maximum rotation angle in degrees. Must be <= 90.
'maxRotation': 0,
// num - The minimum rotation angle in degrees. Must be >= -90.
'minRotation': -90,
'style': const {
// String - The labels' color.
'color': '#212121',
// String - The labels' font family.
'fontFamily': '"Segoe UI", "Open Sans", Verdana, Arial',
// num - The labels' font size.
'fontSize': 13,
// String - The labels' font style.
'fontStyle': 'normal'
}
},
// String - The position of the axis relative to the chart area.
// Supported values: 'bottom'.
'position': 'bottom',
// Map - An object that controls the axis title.
'title': const {
// Map - An object that controls the styling of the axis title.
'style': const {
// String - The title's color.
'color': '#212121',
// String - The title's font family.
'fontFamily': '"Segoe UI", "Open Sans", Verdana, Arial',
// num - The title's font size.
'fontSize': 15,
// String - The title's font style.
'fontStyle': 'normal'
},
// The title text. A `null` value means the title is hidden.
'text': null
}
},
// Map - An object that controls the y-axis.
'yAxis': const {
// String - The color of the vertical grid lines.
'gridLineColor': '#c0c0c0',
// num - The width of the vertical grid lines.
'gridLineWidth': 0,
// String - The color of the axis itself.
'lineColor': '#c0c0c0',
// num - The width of the axis itself.
'lineWidth': 0,
// num - The interval of the tick marks in axis unit. If `null`, this value
// is automatically calculated.
'interval': null,
// Map - An object that controls the axis labels.
'labels': const {
// (num value) -> String - A function that formats the labels.
'formatter': null,
// Map - An object that controls the styling of the axis labels.
'style': const {
// String - The labels' color.
'color': '#212121',
// String - The labels' font family.
'fontFamily': '"Segoe UI", "Open Sans", Verdana, Arial',
// num - The labels' font size.
'fontSize': 13,
// String - The labels' font style.
'fontStyle': 'normal'
},
},
// num - The desired maximum value on the axis. If set, the calculated value
// is guaranteed to be >= this value.
'maxValue': null,
// num - The minimum interval. If `null`, this value is automatically
// calculated.
'minInterval': null,
// num - The desired minimum value on the axis. If set, the calculated value
// is guaranteed to be <= this value.
'minValue': null,
// String - The position of the axis relative to the chart area.
// Supported values: 'left'.
'position': 'left',
// Map - An object that controls the axis title.
'title': const {
// Map - An object that controls the styling of the axis title.
'style': const {
// String - The title's color.
'color': '#212121',
// String - The title's font family.
'fontFamily': '"Segoe UI", "Open Sans", Verdana, Arial',
// num - The title's font size.
'fontSize': 15,
// String - The title's font style.
'fontStyle': 'normal'
},
// The title text. A `null` value means the title is hidden.
'text': null
}
}
};
- Each row in the table represents a gauge
- Gauge values must be in the range 0..100 (inclusive)
Besides the options derived from the global options, a gauge chart also has its specific options.
{
// String - The background color of the gauges.
'gaugeBackgroundColor': '#dbdbdb',
// Map - An object that controls the gauge labels.
'gaugeLabels': {
// bool - Whether to show the labels.
'enabled': true,
// Map - An object that controls the styling of the gauge labels.
'style': {
'color': '#212121',
'fontFamily': '"Segoe UI", "Open Sans", Verdana, Arial',
'fontSize': 13,
'fontStyle': 'normal'
}
}
};
- Each row in the table represents a set of data points having the same x-axis location
- Column 0 contains x-axis labels (categories)
- Columns 1..N represents the series
Besides the options derived from the global options, a line chart also has its specific options.
{
// Map - An object that controls the series.
'series': {
// num - The curve tension. The typical value is from 0.3 to 0.5.
// To draw straight lines, set this to zero.
'curveTension': .4,
// num - The opacity of the area between a series and the x-axis.
'fillOpacity': .25,
// num - The line width of the series.
'lineWidth': 2,
// Map - An object that controls the series labels.
'labels': {
// bool - Whether to show the labels.
'enabled': false,
'style': {
'color': '#212121',
'fontFamily': '"Segoe UI", "Open Sans", Verdana, Arial',
'fontSize': 13,
'fontStyle': 'normal'
}
},
// Map - An object that controls the markers.
'markers': {
// String - The fill color. If `null`, the stroke color of the series
// will be used.
'fillColor': null,
// num - The line width of the markers.
'lineWidth': 1,
// String - The stroke color. If `null`, the stroke color of the series
// will be used.
'strokeColor': 'white',
// num - Size of the markers. To disable markers, set this to zero.
'size': 4
}
},
// Map - An object that controls the x-axis.
'xAxis': {
// String - The color of the horizontal grid lines.
'gridLineColor': '#c0c0c0',
// num - The width of the horizontal grid lines.
'gridLineWidth': 1,
// String - The color of the axis itself.
'lineColor': '#c0c0c0',
// num - The width of the axis itself.
'lineWidth': 1,
// Map - An object that controls the axis labels.
'labels': {
// num - The maximum rotation angle in degrees. Must be <= 90.
'maxRotation': 0,
// num - The minimum rotation angle in degrees. Must be >= -90.
'minRotation': -90,
'style': {
// String - The labels' color.
'color': '#212121',
// String - The labels' font family.
'fontFamily': _fontFamily,
// String - The labels' font size.
'fontSize': 13,
// String - The labels' font style.
'fontStyle': 'normal'
}
},
// String - The position of the axis relative to the chart area.
// Supported values: 'bottom'.
'position': 'bottom',
// Map - An object that controls the axis title.
'title': {
// Map - An object that controls the styling of the axis title.
'style': {
// String - The title's color.
'color': '#212121',
// String - The title's font family.
'fontFamily': _fontFamily,
// String - The title's font size.
'fontSize': 15,
// String - The title's font style.
'fontStyle': 'normal'
},
// The title text. A `null` value means the title is hidden.
'text': null
}
},
// Map - An object that controls the y-axis.
'yAxis': {
// String - The color of the vertical grid lines.
'gridLineColor': '#c0c0c0',
// num - The width of the vertical grid lines.
'gridLineWidth': 0,
// String - The color of the axis itself.
'lineColor': '#c0c0c0',
// num - The width of the axis itself.
'lineWidth': 0,
// num - The interval of the tick marks in axis unit. If `null`, this value
// is automatically calculated.
'interval': null,
// Map - An object that controls the axis labels.
'labels': {
// (num value) -> String - A function that formats the labels.
'formatter': null,
// Map - An object that controls the styling of the axis labels.
'style': {
// String - The labels' color.
'color': '#212121',
// String - The labels' font family.
'fontFamily': _fontFamily,
// String - The labels' font size.
'fontSize': 13,
// String - The labels' font style.
'fontStyle': 'normal'
}
},
// num - The desired maximum value on the axis. If set, the calculated value
// is guaranteed to be >= this value.
'maxValue': null,
// num - The minimum interval. If `null`, this value is automatically
// calculated.
'minInterval': null,
// num - The desired minimum value on the axis. If set, the calculated value
// is guaranteed to be <= this value.
'minValue': null,
// String - The position of the axis relative to the chart area.
// Supported values: 'left'.
'position': 'left',
// Map - An object that controls the axis title.
'title': {
// Map - An object that controls the styling of the axis title.
'style': {
// String - The title's color.
'color': '#212121',
// String - The title's font family.
'fontFamily': _fontFamily,
// String - The title's font size.
'fontSize': 15,
// String - The title's font style.
'fontStyle': 'normal'
},
// The title text. A `null` value means the title is hidden.
'text': null
}
}
};
- Each row in the table represents a pie
Besides the options derived from the global options, a line chart also has its specific options.
{
// num - If between 0 and 1, displays a donut chart. The hole with have a
// radius equal to this value times the radius of the chart.
'pieHole': 0,
// Map - An object that controls the series.
'series': {
/// bool - Whether to draw the slices counterclockwise.
'counterclockwise': false,
// Map - An object that controls the series labels.
'labels': {
// bool - Whether to show the labels.
'enabled': false,
// (num) -> String - A function used to format the labels.
'formatter': null,
'style': {
'color': 'white',
'fontFamily': _fontFamily,
'fontSize': 13,
'fontStyle': 'normal'
},
},
// num - The start angle in degrees. Default is -90, which is 12 o'clock.
'startAngle': -90,
},
};
- Each row in the table represents a set of data points having the same x-axis location
- Column 0 contains x-axis labels (categories)
- Columns 1..N represents the series
Besides the options derived from the global options, a radar chart also has its specific options.
{
// Map - An object that controls the series.
'series': {
// num - The opacity of the area between a series and the x-axis.
'fillOpacity': .25,
// num - The line width of the series.
'lineWidth': 2,
// Map - An object that controls the series labels.
'labels': {
// bool - Whether to show the labels.
'enabled': false,
'style': {
'color': '#212121',
'fontFamily': _fontFamily,
'fontSize': 13,
'fontStyle': 'normal'
}
},
// Map - An object that controls the markers.
'markers': {
// String - The fill color. If `null`, the stroke color of the series
// will be used.
'fillColor': null,
// num - The line width of the markers.
'lineWidth': 1,
// String - The stroke color. If `null`, the stroke color of the series
// will be used.
'strokeColor': 'white',
// num - Size of the markers. To disable markers, set this to zero.
'size': 4
}
},
// Map - An object that controls the x-axis.
'xAxis': {
// String - The color of the horizontal grid lines.
'gridLineColor': '#c0c0c0',
// num - The width of the horizontal grid lines.
'gridLineWidth': 1,
// Map - An object that controls the axis labels.
'labels': {
'style': {
// String - The labels' color.
'color': '#212121',
// String - The labels' font family.
'fontFamily': _fontFamily,
// String - The labels' font size.
'fontSize': 13,
// String - The labels' font style.
'fontStyle': 'normal'
}
},
},
// Map - An object that controls the y-axis.
'yAxis': {
// String - The color of the vertical grid lines.
'gridLineColor': '#c0c0c0',
// num - The width of the vertical grid lines.
'gridLineWidth': 1,
// num - The interval of the tick marks in axis unit. If `null`, this value
// is automatically calculated.
'interval': null,
// Map - An object that controls the axis labels.
'labels': {
// (num value) -> String - A function that formats the labels.
'formatter': null,
// Map - An object that controls the styling of the axis labels.
'style': {
// String - The labels' color.
'color': '#212121',
// String - The labels' font family.
'fontFamily': _fontFamily,
// String - The labels' font size.
'fontSize': 13,
// String - The labels' font style.
'fontStyle': 'normal'
}
},
// num - The minimum interval. If `null`, this value is automatically
// calculated.
'minInterval': null,
}
};