Dependencies

Initializing

0.001.002.003.004.005.000.400.500.600.700.800.90Dataset 1Basic Usage

    <html>
    <head>
        <script src="lib/d3.min.js"></script>
        <script src="js/dchart.min.js"></script>
    </head>
    <body>
        <div id="basicChart1"></div>
        <script>
            var baseChart1 = new dChart.LineChart({
                elem: 'basicChart1',
                ...
            });
        </script>
    </body>
    </html>
            

Chart Configuration

0.001.002.003.004.005.000.000.200.400.600.80Dataset: PointsBasic Chart: Chart ConfigurationThe chart can be configured with some attributes

    <div id="basicChart2"></div>
    <script>
        var baseChart2 = new dChart.LineChart({
            elem: 'basicChart2',
            width:700,
            height:400,
            label: "Basic Chart: Chart Configuration",
            description: "The chart can be configured with some attributes",
            ...
        });
    </script>
            

Chart Options

Name type default description
elem string '' ID of the html-Element, to which the chart is appended
width number 400 Width of the SVG-Element, that holds the chart
height number 400 Height of the SVG-Element, which holds the chart
marginLeft number 50 Left margin of the chart drawing area
marginTop number 20 Top margin of the chart drawing area
marginRight number 10 Right margin of the chart drawing area
marginBottom number 60 Bottom margin of the chart drawing area
label string '' Label of the chart
description string '' Description of the chart
fontStyle FontStyle {} Font Style, that is used in the whole chart
format string '0.2f' Number Format, that is used in the whole chart
transition Transition {} Transition, while drawing a chart's datasets
axis Axis {x:{},y:{}} The configuration for 2D-axis
dataSets DataSet[] [] Data, that should be displayed in the chart

Axis Configuration

0.001.002.003.004.005.00x Axis Label [m2]0.100.200.300.400.50y Axis Label [s]Dataset 1Basic Chart: Axis Configuration

    var baseChart3 = new dChart.LineChart({
        axis: {
            x: {
                label: "x Axis Label [m2]",
                align: "bottom",
                labelAlign: "right"
            },
            y: {
                label: "y Axis Label [s]",
                align: "left",
                labelAlign:"top"
            }
        },
        ...
    });
            
0.001.002.003.004.005.00x axis0.000.200.400.600.801.00y axisDataset 1Basic Chart: Axis Configuration

    var baseChart4 = new dChart.LineChart({
        marginTop: 40,
        marginRight: 40,
        axis: {
            x: {
                label: "x axis",
                align: "bottom",
                labelAlign: "left",
                gridStyle: {
                    stroke: "black",
                    strokeOpacity: 0.7
                }
            },
            y: {
                label: "y axis",
                align: "left",
                labelAlign:"center",
                gridStyle: {
                    stroke: "blueviolet",
                    strokeOpacity: 0.2
                },
                range:[0,1]
            }
        },
        ...
    });
            

Axis Options

Name type default description
label string '' Label of the axis
align 'top'|'center'|'bottom'
'left'|'center'|'right'
'bottom'
'left'
Alignment of the x-axis
Alignment of the y-axis
labelAlign 'left'|'center'|'right'
'top'|'center'|'bottom'
'right'
'top'
Alignment of the x-axis label
Alignment of the y-axis label
ticks number 10 Sets the number of ticks of the axis
tickValues number[] [] Shows only defined tick values on the axis
tickLabels string[] [] Shows text instead of the tick number values
autorange boolean true Sets the range of the axis to min/max-values of all datasets
range number[] [0,1] Min/max-range of the axis values. Setting the 'range' option autosets 'autorange' to 'false'.
style LineStyle {} Style for the axis.
showGrid boolean false Show Grid for the axis
gridStyle LineStyle {} Style for the grid. Setting the 'gridStyle' option autosets 'showGrid' to 'true'.
format string '0.2f' Number format for the axis. Use D3.js Formatting for this option.
scale not implemented string 'linear' Scaling for the axis. Use D3.js Quantitative Scales for this option.

https://github.com/mbostock/d3/wiki/Formatting#numbers

D3.js Formatting

The format specifier is modeled after Python 3.1's built-in format specification mini-language. The general form of a specifier is [​[fill]align][sign][symbol][0][width][,][.precision][type].

The fill can be any character other than "{" or "}". The presence of a fill character is signaled by the character following it, which must be one of the align options.

The align can be:

  • ("<") Forces the field to be left-aligned within the available space.
  • (">") Forces the field to be right-aligned within the available space. (This is the default).
  • ("^") Forces the field to be centered within the available space.

The sign can be:

  • plus ("+") - a sign should be used for both positive and negative numbers.
  • minus ("-") - a sign should be used only for negative numbers. (This is the default.)
  • space (" ") - a leading space should be used on positive numbers, and a minus sign on negative numbers.

The symbol can be:

  • currency ("$") - a currency symbol should be prefixed (or suffixed) per the locale.
  • base ("#") - for binary, octal, or hexadecimal output, prefix by "0b", "0o", or "0x", respectively.

The "0" option enables zero-padding.

The width defines the minimum field width. If not specified, then the width will be determined by the content.

The comma (",") option enables the use of a comma for a thousands separator.

The precision indicates how many digits should be displayed after the decimal point for a value formatted with types "f" and "%", or before and after the decimal point for a value formatted with types "g", "r" and "p".

The available type values are:

  • exponent ("e") - use Number.toExponential.
  • general ("g") - use Number.toPrecision.
  • fixed ("f") - use Number.toFixed.
  • integer ("d") - use Number.toString, but ignore any non-integer values.
  • rounded ("r") - like fixed, but round to precision significant digits.
  • percentage ("%") - like fixed, but multiply by 100 and suffix with "%".
  • rounded percentage ("p") - like rounded, but multiply by 100 and suffix with "%".
  • binary ("b") - outputs the number in base 2.
  • octal ("o") - outputs the number in base 8.
  • hexadecimal ("x") - outputs the number in base 16, using lower-case letters for the digits above 9.
  • hexadecimal ("X") - outputs the number in base 16, using upper-case letters for the digits above 9.
  • character ("c") - converts the integer to the corresponding unicode character before printing.
  • SI-prefix ("s") - like rounded, but with a unit suffixed such as "9.5M" for mega, or "1.00µ" for micro.

The type "n" is also supported as shorthand for ",g".

https://github.com/mbostock/d3/wiki/Quantitative-Scales

D3.js Quantitative Scales

Linear scales are the most common scale, and a good default choice to map a continuous input domain to a continuous output range. The mapping is linear in that the output range value y can be expressed as a linear function of the input domain value x: y = mx + b. The input domain is typically a dimension of the data that you want to visualize, such as the height of students (measured in meters) in a sample population. The output range is typically a dimension of the desired output visualization, such as the height of bars (measured in pixels) in a histogram.

Identity scales are a special case of linear scales where the domain and range are identical; the scale and its invert method are both the identity function. These scales are occasionally useful when working with pixel coordinates, say in conjunction with the axis and brush components.

Power scales are similar to linear scales, except there's an exponential transform that is applied to the input domain value before the output range value is computed. The mapping to the output range value y can be expressed as a function of the input domain value x: y = mx^k + b, where k is the exponent value. Power scales also support negative values, in which case the input value is multiplied by -1, and the resulting output value is also multiplied by -1.

Constructs a new power scale with the default domain [0,1], the default range [0,1], and the exponent .5.

Log scales are similar to linear scales, except there's a logarithmic transform that is applied to the input domain value before the output range value is computed. The mapping to the output range value y can be expressed as a function of the input domain value x: y = m log(*x*) + b. Log scales also support negative values, in which case the input value is multiplied by -1, and the resulting output value is also multiplied by -1. However, note that the domain of a log scale should never contain zero, as log(0) is negative infinity.

Quantize scales are a variant of linear scales with a discrete rather than continuous range. The input domain is still continuous, and divided into uniform segments based on the number of values in (the cardinality of) the output range. The mapping is linear in that the output range value y can be expressed as a linear function of the input domain value x: y = mx + b. The input domain is typically a dimension of the data that you want to visualize, such as the height of students (measured in meters) in a sample population. The output range is typically a dimension of the desired output visualization, such as the height of bars (measured in pixels) in a histogram.

Quantile scales map an input domain to a discrete range. Although the input domain is continuous and the scale will accept any reasonable input value, the input domain is specified as a discrete set of values. The number of values in (the cardinality of) the output range determines the number of quantiles that will be computed from the input domain. To compute the quantiles, the input domain is sorted, and treated as a population of discrete values. The input domain is typically a dimension of the data that you want to visualize, such as the daily change of the stock market. The output range is typically a dimension of the desired output visualization, such as a diverging color scale.

Threshold scales are similar to quantize scales, except they allow you to map arbitrary subsets of the domain to discrete values in the range. The input domain is still continuous, and divided into slices based on a set of threshold values. The input domain is typically a dimension of the data that you want to visualize, such as the height of students (measured in meters) in a sample population. The output range is typically a dimension of the desired output visualization, such as a set of colors (represented as strings).

Dataset Options

Name type default description
label string '' Label of the dataset. Setting the 'label' option autosets 'showLegend' to 'true'.
showLegend boolean false Display the label in the legend.
data Points[] [] Array of data Points
dataFn DataFn {} Object, which holds a function for calculating data points
dataSrc DataSrc {} Object, which holds a file containing data points

Points

0.001.002.003.004.005.000.000.200.400.600.80Dataset: PointsDataset: PointsDataset: Points Example

    var pointsChart1 = new dChart.LineChart({
        ...
        dataSets: [
            {
                label: "Dataset: Points",
                data: [
                    {x:0,y:0},
                    {x:1,y:0.5},
                    {x:2,y:0.7},
                    {x:3,y:0.85},
                    {x:4,y:0.9},
                    {x:5,y:0.92}
                ]
            },
            {
                label: "Dataset: Points",
                data: [
                    {x:5,y:0},
                    {x:4,y:0.5},
                    {x:3,y:0.7},
                    {x:2,y:0.85},
                    {x:1,y:0.9},
                    {x:0,y:0.92}
                ]
            }
        ]
    });
            

Point Options

Point

Name type default description
x number 0 Value on the x-axis
y number 0 Value on the y-axis
z number 0 Value on the z-axis
sigma number 0 Sigma Value
label string '' Label of the data point
style SymbolStyle {} Style of the data point

Functions

0.00.51.01.52.02.53.03.54.04.55.05.56.0x axis-1.0-0.8-0.6-0.4-0.20.00.20.40.60.81.0y axisDataset: Function 'sin'Dataset: Function 'cos'Dataset: Function Example

    var functionChart1 = new dChart.LineChart({
        ...
        dataSets: [
            {
                label: "Dataset: Function 'sin'",
                dataFn: {
                    fn: Math.sin,
                    min: 0,
                    max: 2*Math.PI,
                    step: Math.PI/360
                }
            },
            {
                label: "Dataset: Function 'cos'",
                dataFn: {
                    fn: Math.cos,
                    min: 0,
                    max: 2*Math.PI,
                    step: Math.PI/360
                }
            }
        ]
    });
            
024681012141618202224262830x axis0.10.20.30.40.50.60.70.80.9y axisDataset: Function 'random'Dataset: Function Example

    var functionChart2 = new dChart.LineChart({
        ...
        dataSets: [
            {
                label: "Dataset: Function 'random'",
                dataFn: {
                    fn: function() {
                        return Math.random();
                    },
                    min: 0,
                    max: 30,
                    step: 1
                }
            }
        ]
    });
            

DataFn Options

Name type default description
fn function The function, which calculates data points
min number 0 Min value on the x-axis for calculated data point
max number 10 Max value on the x-axis for calculated data point
step number 1 Difference between 2 x values of the calculated data points

Files

1840185018601870188018901900191019201930194019501960197019801990200001M2M3M4M5M6M7M8M9M10MCSV Data: MaleCSV Data: Female


    var fileChart1 = new dChart.BarChart({
        ...
        elem: 'fileChart1',
        dataSets: [
            {
                label: "CSV Data: Male",
                areaStyle: {
                    stroke: "thistle",
                    fill: "thistle",
                    fillOpacity: 0.7
                },
                dataSrc: {
                    url: 'files/population.csv',
                    dataType: 'csv',
                    map: {
                        x:'year',
                        y:'people'
                    },
                    filter: [
                        {
                            key:'sex',
                            operator:'===',
                            value:"1"
                        },
                        {
                            key:'age',
                            operator:'===',
                            value:"20"
                        }
                    ]
                }
            },
            {
                label: "CSV Data: Female",
                areaStyle: {
                    stroke: "tomato",
                    fill: "tomato",
                    fillOpacity: 0.7
                },
                dataSrc: {
                    url: 'files/population.csv',
                    dataType: 'csv',
                    map: {
                        x:'year',
                        y:'people'
                    },
                    filter: [
                        {
                            key:'sex',
                            operator:'===',
                            value:"2"
                        },
                        {
                            key:'age',
                            operator:'===',
                            value:"20"
                        }
                    ]
                }
            }
        ]
    });

            
Population 0Population 1Population 2Population 3Population 4Population 5Population 6Pie Chart from File


    var fileChart2 = new dChart.PieChart({
        ...
        elem: 'fileChart2',
        format: '0.1s',
        dataSets: [
            {
                label: 'Population',
                dataSrc:
                {
                    url: 'files/population2.csv',
                    dataType: 'csv',
                    map: {
                        x: 'population'
                    }
                }
            }
        ]
    });
            

DataSrc Options

Name type default description
url string '' Url to the file, which contains the data points
dataType string 'json' Datatype of the file, that is parsed
map PointMap {} Map, that maps the parsed object to a Point-object
filter Filter[] [] Array of Filters, that filter the parsed object

PointMap Options

Point

Name type default description
x string 'x' Name of the x-value
y string 'y' Name of the y-value
z string 'z' Name of the z-value
sigma string 'sigma' Name of the sigma Value
label string 'label' Name of the Label
style string 'style' Name of the Style

Filter Options

Name type default description
key string '' Key of the object, which value should be filtered. If key is '', than the object/variable itself gets filtered.
operator string '==' Boolean operator, to compare the values
value any '' Value, which should be compared to

Line Style

LineStyle Options

See W3 Schools - SVG Stroking for usage of the options.

Name type default description
stroke string 'black' Color of a stroke
strokeWidth number 1 Width of a stroke
strokeOpacity number 1 Opacity of a stroke
strokeLinecap string 'butt' Linecap of a stroke
strokeDasharray string '0' Dasharray of a stroke

Area Style

AreaStyle Options

AreaStyle extends LineStyle and therefore has all LineStyle options.

Name type default description
...
fill string 'black' Color of a fill area
fillOpacity number 1 Opacity of a fill area

Symbol Style

SymbolStyle Options

SymbolStyle extends AreaStyle and therefore has all AreaStyle options.

Name type default description
...
type string 'circle' Symbol type. Use D3.js Symbol Types for this option.
size number 1 Scales the symbol with factor of size

https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-symbol_type

D3.js Symbol Type

Font Style

FontStyle Options

FontStyle extends AreaStyle and therefore has all AreaStyle options.

Name type default description
...
fontFamily string 'sans-serif' Font family of the font
fontSize number 11 Size of the font
fontWeight string 'normal' Weight of the font

Transitions

Transition Options

Name type default description
duration number 250 Duration of each transition
delay number 150 Delay between each transition
ease string 'cubic-in-out' Easing of a transition. Use D3.js Ease for this option.

https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease

D3.js Ease

  • linear - the identity function, t.
  • poly(k) - raises t to the specified power k (e.g., 3).
  • quad - equivalent to poly(2).
  • cubic - equivalent to poly(3).
  • sin - applies the trigonometric function sin.
  • exp - raises 2 to a power based on t.
  • circle - the quarter circle.
  • elastic(a, p) - simulates an elastic band; may extend slightly beyond 0 and 1.
  • back(s) - simulates backing into a parking space.
  • bounce - simulates a bouncy collision.

These built-in types may be extended using a variety of modes:

  • in - the identity function.
  • out - reverses the easing direction to [1,0].
  • in-out - copies and mirrors the easing function from [0,.5] and [.5,1].
  • out-in - copies and mirrors the easing function from [1,.5] and [.5,0].

The default easing function is "cubic-in-out" which provides suitable slow-in slow-out animation.

Line Chart

0.000.200.400.600.801.001.201.401.601.802.002.202.402.602.803.003.203.403.603.804.004.204.404.604.805.00x-Axis0.000.050.100.150.200.250.300.350.400.450.500.550.600.650.700.750.800.850.900.95y-AxisDataset 1Dataset 2: FunctionMy awesome ChartThis awesome chart lib is using D3.js

    var lineChart1 = new dChart.LineChart({
        elem: 'lineChart1',
        width: 700,
        height: 400,
        label: "My awesome Chart",
        description: "This awesome chart lib is using D3.js",
        axis: {
            x: {
                label: "x-Axis",
                align: "bottom",
                labelAlign: "right"
            },
            y: {
                label: "y-Axis",
                align: "left",
                labelAlign: "top",
                gridStyle: {
                    stroke: "black",
                    strokeOpacity: 0.25
                }
            }
        },
        transition: {
            duration: 1500,
            delay: 1500
        },
        dataSets:[
            {
                label: "Dataset 1",
                lineStyle: {
                    stroke: "mediumslateblue",
                    strokeWidth: 2,
                    strokeDasharray: "5,5"
                },
                symbolStyle: {
                    stroke: "mediumslateblue",
                    strokeWidth: 2,
                    fill: "#fff",
                    size: 1.2
                },
                interpolate: "linear",
                data: [
                    {x:0,y:0},
                    {x:1,y:0.5},
                    {x:2,y:0.7},
                    {x:3,y:0.85},
                    {x:4,y:0.9},
                    {x:5,y:0.92}
                ]
            },
            {
                label: "Dataset 2: Function",
                lineStyle: {
                    stroke: "red",
                    strokeWidth: 2
                },
                interpolate:'cardinal',
                dataFn: {
                    fn: function() { return Math.random() },
                    min: 0,
                    max: 5,
                    step: 0.25
                }
            }
        ]
    });
            

LineChart Options

Dataset

Name type default description
showLine boolean true Show line for the chart
lineStyle LineStyle {} Style of the line. Setting the 'lineStyle' option autosets 'showLine' to 'true'.
showSymbol boolean false Show data points for the chart
symbolStyle SymbolStyle {} Style of the points. Setting the 'symbolStyle' option autosets 'showSymbol' to 'true'.
interpolate string 'linear' Interpolation of 2 data points. Use D3.js Line Interpolate for this option.

https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line_interpolate

D3.js Line Interpolate

  • linear - piecewise linear segments, as in a polyline.
  • linear-closed - close the linear segments to form a polygon.
  • step - alternate between horizontal and vertical segments, as in a step function.
  • step-before - alternate between vertical and horizontal segments, as in a step function.
  • step-after - alternate between horizontal and vertical segments, as in a step function.
  • basis - a B-spline, with control point duplication on the ends.
  • basis-open - an open B-spline; may not intersect the start or end.
  • basis-closed - a closed B-spline, as in a loop.
  • bundle - equivalent to basis, except the tension parameter is used to straighten the spline.
  • cardinal - a Cardinal spline, with control point duplication on the ends.
  • cardinal-open - an open Cardinal spline; may not intersect the start or end, but will intersect other control points.
  • cardinal-closed - a closed Cardinal spline, as in a loop.
  • monotone - cubic interpolation that preserves monotonicity in y.

Area Chart

0.000.200.400.600.801.001.201.401.601.802.002.202.402.602.803.003.203.403.603.804.004.204.404.604.805.00x-Axis0.000.100.200.300.400.500.600.700.800.901.001.101.201.301.401.50y-AxisDataset: FunctionArea Chart

    var areaChart1 = new dChart.AreaChart({
        elem: 'areaChart1',
        width: 700,
        height: 400,
        label: "Area Chart",
        axis: {
            x: {
                label: "x-Axis"
            },
            y: {
                label: "y-Axis",
                range:[0,1.5],
                gridStyle: {
                    stroke: "black",
                    strokeOpacity: 0.25
                }
            }
        },
        transition: {
            duration: 1500,
            delay: 250
        },
        dataSets:[
            {
                label: "Dataset: Function",
                areaStyle: {
                    stroke: "steelblue",
                    strokeWidth: 2,
                    fill: "steelblue",
                    fillOpacity: 0.4
                },
                interpolate:'cardinal',
                dataFn: {
                    fn: function() { return Math.random() },
                    min: 0,
                    max: 5,
                    step: 0.25
                }
            }
        ]
    });
            
0.00.51.01.52.02.53.03.54.04.55.05.56.0x-Axis-1.0-0.9-0.8-0.7-0.6-0.5-0.4-0.3-0.2-0.10.00.10.20.30.40.50.60.70.80.91.0y-AxisDataset: Function 'sin'Dataset: Function 'cos'Area Chart

    var areaChart2 = new dChart.AreaChart({
        elem: 'areaChart2',
        width: 700,
        height: 400,
        label: "Area Chart",
        axis: {
            x: {
                label: "x-Axis"
            },
            y: {
                label: "y-Axis",
                range:[-1,1],
                gridStyle: {
                    stroke: "black",
                    strokeOpacity: 0.25
                }
            }
        },
        transition: {
            duration: 1500,
            delay: 550
        },
        dataSets: [
            {
                label: "Dataset: Function 'sin'",
                areaStyle: {
                    stroke: "red",
                    strokeWidth: 1,
                    fill: "red",
                    fillOpacity:0.4
                },
                symbolStyle: {
                    stroke: "none",
                    fill: "red",
                    size: 0.5
                },
                dataFn: {
                    fn: Math.sin,
                    min: 0,
                    max: 2*Math.PI,
                    step: Math.PI/18
                }
            },
            {
                label: "Dataset: Function 'cos'",
                areaStyle: {
                    stroke: "blue",
                    strokeWidth: 1,
                    fill: "blue",
                    fillOpacity:0.4
                },
                symbolStyle: {
                    stroke: "none",
                    fill: "blue",
                    size: 0.5
                },
                dataFn: {
                    fn: Math.cos,
                    min: 0,
                    max: 2*Math.PI,
                    step: Math.PI/18
                }
            }
        ]
    });
            

AreaChart Options

Dataset

Name type default description
areaStyle AreaStyle {} Style of the area
showSymbol boolean false Show data points for the chart
symbolStyle SymbolStyle {} Style of the points. Setting the 'symbolStyle' option autosets 'showSymbol' to 'true'.
interpolate string 'linear' Interpolation of 2 data points. Use D3.js Line Interpolate for this option.

Bar Chart

012345678910110.00.51.01.52.02.53.03.54.04.55.05.56.06.57.07.58.08.59.09.510.0Random DataRandom Data

    var barChart1 = new dChart.BarChart({
        elem: 'barChart1',
        width: 700,
        height: 400,
        axis: {
            x: {
                range: [0,11],
                format: "f"
            },
            y: {
                range: [0,10],
                ticks: 20,
                format:"0.1f",
                gridStyle: {
                    stroke: "lightgrey",
                    strokeOpacity: 0.5
                }
            }
        },
        transition: {
            duration: 250,
            delay: 150
        },
        dataSets: [
            {
                label: "Random Data",
                areaStyle: {
                    stroke: "mistyrose",
                    fill: "mistyrose",
                    fillOpacity: 0.7
                },
                dataFn: {
                    fn: function() { return Math.random()*10 },
                    min: 1,
                    max: 10,
                    step: 1
                }
            },
            {
                label: "Random Data",
                areaStyle: {
                    stroke: "moccasin",
                    fill: "moccasin",
                    fillOpacity: 0.7
                },
                dataFn: {
                    fn: function() { return Math.random()*10 },
                    min: 1,
                    max: 10,
                    step: 1
                }
            }
        ]
    });
            
0123456789100.02.04.06.08.010.012.014.0Dataset 1

                var barChart2 = new dChart.BarChart({
                    elem: 'barChart2',
                    width: 700,
                    height: 400,
                    axis: {
                        x: {
                            range: [0,11],
                            format: "f"
                        },
                        y: {
                            range: [0,10],
                            ticks: 10,
                            format:"0.1f",
                            gridStyle: {
                                stroke: "lightgrey",
                                strokeOpacity: 0.5
                            }
                        }
                    },
                    dataSets: [
                        {
                            label: "Dataset 1",
                            areaStyle: {
                                stroke: "darkgoldenrod",
                                fill: "darkgoldenrod",
                                fillOpacity: 0.7
                            },
                            data: [
                                {x:1, y:1, sigma:0.5},
                                {x:2, y:2, sigma:0.6},
                                {x:3, y:3, sigma:0.7},
                                {x:4.5, y:4, sigma:0.8},
                                {x:5, y:5, sigma:0.9},
                                {x:6, y:6, sigma:1},
                                {x:7, y:7, sigma:1.5},
                                {x:8, y:8, sigma:1.8},
                                {x:9, y:9, sigma:2}
                            ]
                        }
                    ]
                });
            

BarChart Options

Dataset

Name type default description
areaStyle AreaStyle {} Style of the area

Bar Chart Horizontal

0.00.51.01.52.02.53.03.54.04.55.05.56.06.57.07.58.08.59.09.510.010.511.011.512.0zeroonetwothreefourfivesixseveneightnineDataset 1Dataset 2

    var barChartHorizontal1 = new dChart.BarChartHorizontal({
        elem: 'barChartHorizontal1',
        width: 700,
        height: 400,
        marginTop:20,
        marginRight:20,
        axis: {
            x: {
                range: [0,10],
                ticks:20,
                format: "0.1f",
                gridStyle: {
                    stroke: "lightgrey",
                    strokeOpacity: 0.5
                },
                align:"top"
            },
            y: {
                range: [9,0],
                ticks: 9,
                tickLabels: [
                    "zero","one","two","three","four","five","six","seven","eight","nine"
                ],
                format:"f"
            }
        },
        transition: {
            duration: 250,
            delay: 150
        },
        dataSets: [
            {
                label: "Dataset 1",
                areaStyle: {
                    stroke: "darkgoldenrod",
                    fill: "darkgoldenrod",
                    fillOpacity: 0.7
                },
                data: [
                    {x:1, y:1, sigma:0.8},
                    {x:4, y:2, sigma:0.7},
                    {x:6, y:3, sigma:0.2},
                    {x:7.5, y:4, sigma:0.5},
                    {x:8, y:5, sigma:0.2},
                    {x:8.5, y:6, sigma:0.3},
                    {x:9, y:7, sigma:0.2},
                    {x:9.5, y:8, sigma:0.1},
                    {x:10, y:9, sigma:0.9}
                ]
            },
            {
                label: "Dataset 2",
                areaStyle: {
                    stroke: "chocolate",
                    fill: "chocolate",
                    fillOpacity: 0.7
                },
                data: [
                    {x:10, y:1},
                    {x:9.5, y:2},
                    {x:9, y:3},
                    {x:8.5, y:4},
                    {x:8, y:5},
                    {x:7.5, y:6},
                    {x:6, y:7},
                    {x:4, y:8},
                    {x:1, y:9}
                ]
            }
        ]
    });
            

BarChart Horizontal Options

Dataset

Name type default description
areaStyle AreaStyle {} Style of the area

Scatter Chart

0.00.51.01.52.02.53.03.54.04.55.05.56.06.57.07.58.08.59.09.510.010.511.00.001.002.003.004.005.006.007.008.009.0010.00Random Data

    var scatterChart1 = new dChart.ScatterChart({
        elem: 'scatterChart1',
        width: 700,
        height: 400,
        axis: {
            x: {
                range: [0,11],
                ticks:20,
                format: "0.1f"
            },
            y: {
                range: [0,10],
                ticks:10,
                gridStyle: {
                    stroke: "lightgrey",
                    strokeOpacity: 0.5
                }
            }
        },
        transition: {
            duration: 100,
            delay: 10
        },
        dataSets: [
            {
                label: "Random Data",
                symbolStyle: {
                    stroke: "olivedrab",
                    fill: "olivedrab",
                    fillOpacity: 0.7
                },
                data: scatterData1
            },
            {
                label: "Random Data",
                symbolStyle: {
                    stroke: "navy",
                    fill: "navy",
                    fillOpacity: 0.7,
                    size: 1.5
                },
                data: scatterData2
            }
        ]
    });
            
0.51.01.52.02.53.03.54.04.55.05.56.06.57.07.58.08.59.09.50.51.01.52.02.53.03.54.04.55.05.56.06.57.07.58.08.59.09.5Random Data

    var scatterChart2 = new dChart.ScatterChart({
        elem: 'scatterChart2',
        width: 700,
        height: 400,
        axis: {
            x: {
                ticks:20,
                format: "0.1f"
            },
            y: {
                ticks:20,
                format: "0.1f"
            }
        },
        transition: {
            duration: 100,
            delay: 10
        },
        dataSets: [
            {
                label: "Random Data",
                symbolStyle: {
                    stroke: "tomato",
                    fill: "white",
                    type: "triangle-up"
                },
                data: scatterData3
            }
        ]
    });
            

ScatterChart Options

Dataset

Name type default description
symbolStyle SymbolStyle {} Style of the data points

Pie Chart

FirstSecondThirdPie Chart Example

    var pieChart1 = new dChart.PieChart({
        elem: 'pieChart1',
        width: 700,
        height: 400,
        label: "Pie Chart Example",
        marginLeft: 0,
        marginRight: 0,
        marginTop: 0,
        marginBottom: 40,
        transition: {
            duration: 1500,
            delay: 250
        },
        dataSets: [
            {
                label: "Dataset Pie Chart",
                data: [
                    {x:5,areaStyle:{
                        fill:"mediumvioletred",
                        stroke:"none"
                    }},
                    {x:10, areaStyle:{
                        fill:"royalblue",
                        stroke:"none"
                    }},
                    {x:15, areaStyle:{
                        fill:"palevioletred",
                        stroke:"none"
                    }}
                ]
            }
        ]
    });
            
Random 0Random 1Random 2Random 3Also Random 0Also Random 1Also Random 2Also Random 3Also Random 4Also Random 5Also Random 6Another Pie Chart Example

    var pieChart2 = new dChart.PieChart({
        elem: 'pieChart2',
        width: 700,
        height: 400,
        label: "Another Pie Chart Example",
        marginLeft: 0,
        marginRight: 0,
        marginTop: 0,
        marginBottom: 40,
        transition: {
            duration: 1500,
            delay: 250
        },
        dataSets: [
            {
                label: "Random Dataset Pie Chart",
                dataFn: {
                    fn: function() { return Math.random()*100 },
                    min: 0,
                    max: 3,
                    step: 1
                }
            },
            {
                label: "Another random Dataset Pie Chart",
                dataFn: {
                    fn: function() { return Math.random()*100 },
                    min: 0,
                    max: 6,
                    step: 1
                }
            }
        ]
    });
            

PieChart Options

Data

Name type default description
areaStyle AreaStyle {} Style of the pie-areas

Doughnut Chart

Random Dataset 0Random Dataset 1Random Dataset 2Random Dataset 3Another random Dataset 0Another random Dataset 1Another random Dataset 2Another random Dataset 3Another random Dataset 4Another random Dataset 5Another random Dataset 6Doughnut Chart Example

    var doughnutChart1 = new dChart.DoughnutChart({
        elem: 'doughnutChart1',
        width: 700,
        height: 400,
        label: "Doughnut Chart Example",
        innerRadius: 100,
        marginLeft: 0,
        marginRight: 0,
        marginTop: 0,
        marginBottom: 40,
        transition: {
            duration: 500,
            delay: 250
        },
        dataSets: [
            {
                label: "Random Dataset",
                dataFn: {
                    fn: function() { return Math.random()*100 },
                    min: 0,
                    max: 3,
                    step: 1
                }
            },
            {
                label: "Another random Dataset",
                dataFn: {
                    fn: function() { return Math.random()*100 },
                    min: 0,
                    max: 6,
                    step: 1
                }
            }
        ]
    });
            

DoughnutChart Options

Chart

Name type default description
innerRadius number 10 Radius of the doughnut hole

Data

Name type default description
areaStyle AreaStyle {} Style of the pie-areas