Nvd3

Nvd3 is a data visualization library build on top of the popular d3 library. It offers several chart types for common visualization needs. The web framework add an AngularJS integration in the form of directives, along with sensible defaults for these different charts.

Live demo

Multibar

The multibar chart is used to compare different series in a bar representation following the X axis.

Configuration

"multibar":{},

The w20MultibarChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller.

You must indicate a unique id for the chart

<div id="multibar" data-w20-multibar-chart="multibarConfig"></div>

Data format

Data fed to the multibar chart should follow a default format. This format can be overridden by the use of personal function (See «x» and «y» properties below).

Default data format exemple :

  [
   {
      "key": "Series 1",
      "values": [ [1, 10], [2, 20], [3, 5] ]
   },
   {
      "key": "Series 2",
      "values": [ [1, 8], [2, 10], [3, 15] ]
   }
  ]

The key property defines the name of the series. The values defines the data of the series. By default the value at index 0 of each sub array is plotted on the X axis while the value at index 1 is plotted on the Y axis.

Multibar configuration

The multibar chart is configured by the configuration object passed to the directive declaration (see Directives).

Exemple :

  $scope.multibarConfig = {
      data: $scope.multibarData,
      yAxisShowMaxMin: true,
      xAxisShowMaxMin: true,
      showLegend: true,
      showControls: true,
      tooltips: true,
      yaxislabel: 'The Y axis title',
      xaxislabel: 'The X axis title',
      xaxistickformat: xAxisTickFormatMultibar // custom function to configure X axis
  }

Available properties :

Properties Type Description
data Array Data to display using the multibar chart (mandatory if you don't define the "noData" property.). Generally it would be a property of $scope
x function Providing a function to the x property allows configuration of the data on the X axis. Consider this example : say we want to double the data value displayed on the X axis in comparison to the data provided to the "data" property. We can achieve this by providing the following function to the x property : function(d){ return d[0]*2; }; where "d[0]" is all the values at index 0 of all sub arrays of the array at property "values" of all objects in the array provided to the "data" property.
y function See "x" property above. Applied to the Y axis instead.
forceY Array Values to force on the Y axis. By default the Y axis will start at the minimum value of the serie. Use it to force special values such as 0.
showLegend Boolean Display or hide legend.
showControls Boolean Display or hide controls.
tooltips Boolean Enable or disable tooltips when hovering the chart.
reduceXTicks Boolean Reduce the number of ticks on the X axis
staggerLabels Boolean Create a gap between labels so that they don't overlap on each other if they are too many
noData String Message to display when there is no data (default to "No data available")
rotateLabels integer Rotation to apply to X axis labels (0 : horizontal(default), 90 : vertical)
color Array Color of series in the corresponding order. Can be hexadecimal, named or RGB. Ex. ['#4D9FF2', 'yellow', 'rgb(151,109,165)']. Note that you can also specify the value of the color in the "data" array by providing a "color" attribute to each object.
stacked Boolean Indicate whether the series should be stacked on each other or not.
tooltipContent function Customize tooltip content. Ex. function(key, x, y, e, graph) { return '<h1> Tooltip Title </h1> <p>'+ y +'</p>';} where key, x and y are the name and value of the series at the tooltip point, e an event and graph the chart object.
transitionDuration integer Duration of transition effect (Default to 500).

Axis Configuration

Axis are configured in the same configuration object.

X axis :

Properties Type Description
xAxisTickValues Array Specify explicitly the values to plot on the X axis
xAxisTickSubdivide Integer Specify the number of intermediate ticks to show on the X axis
xAxisTickPadding Integer Specify ticks padding on the X axis
xAxisTickFormat function Specify how data should be formatted. For instance you can format number on the X axis to have exactly two digit after the decimal point : d3.format(‘.2f’). Or format Date object to a readable format as d3.time.format(‘%Y’) which shows the year only. See d3.js documentation for a list of all format available
xAxisLabel String Label of the X axis
xAxisDomain Array [start, end] Specify the domain on the X axis (min to max value)
xAxisShowMaxMin Boolean Show or hide maximum and minimum value in bold
xAxisRotateLabels Integer 0 to 180° rotation of X axis tick label
xAxisStaggerLabels Integer Size of the gap between labels to resolve overlapping issue

Y axis :

See X axis. Replace property «xName» by «yName».

Pie

The pie chart is used to represent proportion between series.

Configuration

 "pie":{},

The w20PieChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller.

You must indicate a unique id for the chart

<div id="pie" data-w20-pie-chart="pieConfig"></div>

Data format

Data fed to the pie chart should follow a default format. This format can be overridden by the use of personal function (See «x» and «y» properties below).

Default data format exemple :

     [
      {
         "key": "Series 1",
         "value": 10
      },
      {
         "key": "Series 2",
         "value": 20
      }
     ]

Note that the pie/donut chart has «value» by default instead of «values» as it can only represent one single value

The key property defines the name of the series. The value defines the data of the series.

Pie chart configuration

The pie chart is configured by the configuration object passed to the directive declaration (see Directives).

Exemple :

    $scope.pieConfig = {
      data:$scope.pieData,
      showLabels:true,
      pieLabelsOutside:true,
      showValues:true,
      tooltips:true,
      labelType:'percent',
      showLegend:true
    }

Available properties :

Properties Type Description
data Numeric Data to display using the pie chart (mandatory if you don't define the "noData" property.).
x function Providing a function to the x property allows configuration of the data on the "X" axis. Consider this example : say we want to customize the key value displayed on the "X" axis (X refer to the key and Y to the value) in comparison to the data provided to the "data" property. We can achieve this by providing the following function to the x property : function(){ return d.key+" a custom string appended"; }; where "d.key" is all the values of key in the array passed to property "data".
y function See "x" property above. Applied to the Y axis instead. (Exemple : double value : function(){ return d.value*2; }
showLegend Boolean Display or hide legend.
tooltips Boolean Enable or disable tooltips when hovering the chart.
noData String Message to display when there is no data (default to "No data available")
color Array Color of series in the corresponding order. Can be hexadecimal, named or RGB. Ex. ['#4D9FF2', 'yellow', 'rgb(151,109,165)']. Note that you can also specify the value of the color in the "data" array by providing a "color" attribute to each object.
tooltipContent function Customize tooltip content. Ex. function(key, x, y, e, graph) { return '<h1> Tooltip Title </h1> <p>'+ y +'</p>';} where key, x and y are the name and value of the series at the tooltip point, e an event and graph the chart object.
transitionDuration integer Duration of transition effect (Default to 500).
showLabels Boolean Show or hide labels.
labelType String What the label would display : 'key', 'value' or 'percent'.
pieLabelsOutside Boolean Should the label be inside or outside the chart.
valueFormat function Custom formating of values. For instance one can print values in .2f decimal by passing d3.format(',.2f') to this property. See d3.js documentation for a list of format value.
donut Boolean Display the chart as a donut
donutLabelsOutside Boolean Should the label be inside or outside the chart
donutRatio Numeric Ratio between the hole and edge of donut (Default 0.5)

Scatter/Bubble chart

The scatter chart is used to compare different series between 3 values : X and Y axis + size of data.

Configuration

"scatter":{}

The w20ScatterChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller.

You must indicate a unique id for the chart

<div id="scatter" data-w20-scatter-chart="scatterConfig"></div>

Fragment definition sections

This module has no fragment definition section.

Data format

Data fed to the scatter chart should follow a default format.

Default data format exemple :

      [
       {
          "key": "Series 1",
          "values": [ {
                    x: 10,
                    y: 20,
                    size: 0.5
                    },
                    {
                    x: 12,
                    y: 13,
                    size: 0.9
                    }
                    ]
       },
       {
          "key": "Series 2",
          "values":  [ {
                     x: 15,
                     y: 2,
                     size: 0.5
                     },
                     {
                     x: 15,
                     y: 13,
                     size: 0.6
                     }
                     ]
       }
      ]

The key property defines the name of the series. The values defines the data of the series.

Scatter chart configuration

The scatter chart is configured by the configuration object passed to the directive declaration (see Directives).

Exemple :

     $scope.scatterConfig = {
       data: $scope.scatterChartData,
       tooltips: true,
       showLegend: true,
       showControls: true,
     }

Available properties :

Properties Type Description
data Array Data to display using the scatter chart (mandatory if you don’t define the «noData» property.). Generally it would be a property of $scope
x function Providing a function to the x property allows configuration of the data on the X axis. Consider this example : say we want to double the data value displayed on the X axis in comparison to the data provided to the «data» property. We can achieve this by providing the following function to the x property : function(){ return function(d){ return d[0]*2; }; }; where «d[0]» is all the values at index 0 of all sub arrays of the array at property «values» of all objects in the array provided to the «data» property.
tooltipXContent function Customize tooltip content on the X axis (require tooltips to be true). Ex : function (key, x, y) { return ‘&ltstrong&gt’ + x + ‘&lt/strong&gt’; })
tooltipYContent function Customize tooltip content on the X axis (require tooltips to be true). Ex : function (key, x, y) { return ‘&ltstrong&gt’ + y + ‘&lt/strong&gt’; })
showLegend Boolean Display or hide legend.
showControls Boolean Display or hide controls.
tooltips Boolean Enable or disable tooltips when hovering the chart.
showDistX Boolean Show/hide a line marker to the X value when hovering the point
showDistY Boolean Show/hide a line marker to the Y value when hovering the point
noData String Message to display when there is no data (default to «No data available»)
xPadding Numeric distance between ticks on the X axis
yPadding Numeric distance between ticks on the Y axis
color Array Color of series in the corresponding order. Can be hexadecimal, named or RGB. Ex. [‘#4D9FF2’, ‘yellow’, ‘rgb(151,109,165)’]. Note that you can also specify the value of the color in the «data» array by providing a «color» attribute to each object.
transitionDuration integer Duration of transition effect (Default to 500).
fisheye Numeric Magnifying factor (when showControls is true)

Axis Configuration

Axis are configured in the same configuration object.

X axis :

Properties Type Description
xAxisTickValues Array Specify explicitly the values to plot on the X axis
xAxisTickSubdivide Integer Specify the number of intermediate ticks to show on the X axis
xAxisTickPadding Integer Specify ticks padding on the X axis
xAxisTickFormat function Specify how data should be formatted. For instance you can format number on the X axis to have exactly two digit after the decimal point : d3.format(‘.2f’). Or format Date object to a readable format as d3.time.format(‘%Y’) which shows the year only. See d3.js documentation for a list of all format available
xAxisLabel String Label of the X axis
xAxisDomain Array [start, end] Specify the domain on the X axis (min to max value)
xAxisShowMaxMin Boolean Show or hide maximum and minimum value in bold
xAxisRotateLabels Integer 0 to 180° rotation of X axis tick label
xAxisStaggerLabels Integer Size of the gap between labels to resolve overlapping issue

Y axis :

See X axis. Replace property «xName» by «yName».

Discrete bar

The discretebar chart is used to compare different series in a bar representation.

Configuration

"discretebar":{}

The w20DiscreteBarChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller.

You must indicate a unique id for the chart

<div id="discretebar" data-w20-discrete-bar-chart="discreteConfig"></div>

Data format

Data fed to the discretebar chart should follow a default format. This format can be overridden by the use of personal function (See «x» and «y» properties below).

Default data format exemple :

  [
   {
      "key": "Series 1",
      "values": [ [1, 10], [2, 20], [3, 5] ]
   },
   {
      "key": "Series 2",
      "values": [ [1, 8], [2, 10], [3, 15] ]
   }
  ]

The key property defines the name of the series. The values defines the data of the series. By default the value at index 0 of each sub array is plotted on the X axis while the value at index 1 is plotted on the Y axis.

## Discretebar configuration

The discretebar chart is configured by the configuration object passed to the directive declaration (see Directives).

Exemple :

   $scope.discreteBarConfig = {
           data: $scope.discreteBarData,
           tooltips: true,
           showValues: true

   }

Available properties :

Properties Type Description
data Array Data to display using the discretebar chart (mandatory if you don’t define the «noData» property.). Generally it would be a property of $scope
x function Providing a function to the x property allows configuration of the data on the X axis. Consider this example : say we want to double the data value displayed on the X axis in comparison to the data provided to the «data» property. We can achieve this by providing the following function to the x property : function(){ return function(d){ return d[0]*2; }; }; where «d[0]» is all the values at index 0 of all sub arrays of the array at property «values» of all objects in the array provided to the «data» property.
y function See «x» property above. Applied to the Y axis instead.
forceY Array Values to force on the Y axis. By default the Y axis will start at the minimum value of the serie. Use it to force special values such as 0.
showValues Boolean Display the value of the bar on top of them.
valueFormat function Format the value displayed when showValues is true. Ex: d3.format(‘.2f’)
tooltips Boolean Enable or disable tooltips when hovering the chart.
staggerLabels Boolean Create a gap between labels so that they don’t overlap on each other if they are too many
noData String Message to display when there is no data (default to «No data available»)
color Array Color of series in the corresponding order. Can be hexadecimal, named or RGB. Ex. [‘#4D9FF2’, ‘yellow’, ‘rgb(151,109,165)’]. Note that you can also specify the value of the color in the «data» array by providing a «color» attribute to each object.
tooltipContent function Customize tooltip content. Ex. function(key, x, y, e, graph) { return ‘&lth1&gt Tooltip Title &lt/h1&gt &ltp&gt’+ y +’&lt/p&gt’;} where key, x and y are the name and value of the series at the tooltip point, e an event and graph the chart object.
transitionDuration integer Duration of transition effect (Default to 500).

Axis Configuration

Axis are configured in the same configuration object.

X axis :

Properties Type Description
xAxisTickValues Array Specify explicitly the values to plot on the X axis
xAxisTickSubdivide Integer Specify the number of intermediate ticks to show on the X axis
xAxisTickPadding Integer Specify ticks padding on the X axis
xAxisTickFormat function Specify how data should be formatted. For instance you can format number on the X axis to have exactly two digit after the decimal point : d3.format(‘.2f’). Or format Date object to a readable format as d3.time.format(‘%Y’) which shows the year only. See d3.js documentation for a list of all format available
xAxisLabel String Label of the X axis
xAxisDomain Array [start, end] Specify the domain on the X axis (min to max value)
xAxisShowMaxMin Boolean Show or hide maximum and minimum value in bold
xAxisRotateLabels Integer 0 to 180° rotation of X axis tick label
xAxisStaggerLabels Integer Size of the gap between labels to resolve overlapping issue

Y axis :

See X axis. Replace property «xName» by «yName».

Line with focus

The line with focus chart is used to explore series on a long range of values. You can restrict the range with the chart below the main chart to render data in a more precise way.

Configuration

"linewithfocus":{}

The w20LineWithFocusChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller.

You must indicate a unique id for the chart

<div id="linewithfocus" data-w20-line-with-focus-chart="lineWithFocusConfig"></div>

Fragment definition sections

This module has no fragment definition section.

Data format

Data fed to the line with focus chart should follow a default format. This format can be overridden by the use of personal function (See «x» and «y» properties below).

Default data format exemple :

  [
   {
      "key": "Series 1",
      "values": [ [1, 10], [2, 20], [3, 5] ]
   },
   {
      "key": "Series 2",
      "values": [ [1, 8], [2, 10], [3, 15] ]
   }
  ]

The key property defines the name of the series. The values defines the data of the series. By default the value at index 0 of each sub array is plotted on the X axis while the value at index 1 is plotted on the Y axis.

Line with focus configuration

The line with focus chart is configured by the configuration object passed to the directive declaration (see Directives).

Exemple :

   $scope.lineWithFocusConfig = {
   data: $scope.linefocusdata,
   tooltips: true
   }

Available properties :

Properties Type Description
data Array Data to display using the line with focus chart (mandatory if you don’t define the «noData» property.). Generally it would be a property of $scope
x function Providing a function to the x property allows configuration of the data on the X axis. Consider this example : say we want to double the data value displayed on the X axis in comparison to the data provided to the «data» property. We can achieve this by providing the following function to the x property : function(){ return function(d){ return d[0]*2; }; }; where «d[0]» is all the values at index 0 of all sub arrays of the array at property «values» of all objects in the array provided to the «data» property.
y function See «x» property above. Applied to the Y axis instead.
forceY Array Values to force on the Y axis. By default the Y axis will start at the minimum value of the serie. Use it to force special values such as 0.
showLegend Boolean Display or hide legend.
tooltips Boolean Enable or disable tooltips when hovering the chart.
noData String Message to display when there is no data (default to «No data available»)
color Array Color of series in the corresponding order. Can be hexadecimal, named or RGB. Ex. [‘#4D9FF2’, ‘yellow’, ‘rgb(151,109,165)’]. Note that you can also specify the value of the color in the «data» array by providing a «color» attribute to each object.
transitionDuration integer Duration of transition effect (Default to 500).

Axis Configuration

Axis are configured in the same configuration object.

X axis main chart:

Properties Type Description
xAxisTickValues Array Specify explicitly the values to plot on the X axis
xAxisTickSubdivide Integer Specify the number of intermediate ticks to show on the X axis
xAxisTickPadding Integer Specify ticks padding on the X axis
xAxisTickFormat function Specify how data should be formatted. For instance you can format number on the X axis to have exactly two digit after the decimal point : d3.format(‘.2f’). Or format Date object to a readable format as d3.time.format(‘%Y’) which shows the year only. See d3.js documentation for a list of all format available
xAxisLabel String Label of the X axis
xAxisDomain Array [start, end] Specify the domain on the X axis (min to max value)
xAxisShowMaxMin Boolean Show or hide maximum and minimum value in bold
xAxisRotateLabels Integer 0 to 180° rotation of X axis tick label
xAxisStaggerLabels Integer Size of the gap between labels to resolve overlapping issue

Y axis :

See X axis. Replace property «xName» by «yName».

X2 axis :

For the small focusin chart. See X axis. Replace property ‘xName’ with ‘x2Name’.

Y2 axis :

For the small focusing chart. See X axis. Replace property ‘xName’ with ‘y2Name’.

Stacked area

The stacked area chart is used to compare different series according to their surface area.

Configuration

"stackedarea":{}

The w20StackedAreaChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller.

You must indicate a unique id for the chart

<div id="stackedArea" data-w20-stacked-area-chart="stackedAreaConfig"></div>

Data format

Data fed to the stacked area chart should follow a default format. This format can be overridden by the use of personal function (See «x» and «y» properties below).

Default data format exemple :

  [
   {
      "key": "Series 1",
      "values": [ [1, 10], [2, 20], [3, 5] ]
   },
   {
      "key": "Series 2",
      "values": [ [1, 8], [2, 10], [3, 15] ]
   }
  ]

The key property defines the name of the series. The values defines the data of the series. By default the value at index 0 of each sub array is plotted on the X axis while the value at index 1 is plotted on the Y axis.

Stacked area chart configuration

The stacked area chart is configured by the configuration object passed to the directive declaration (see Directives).

Exemple :

    $scope.stackedAreaConfig = {
           data: $scope.stackedareadata,
           tooltips: true,
           showControls: true,
           showLegend: true
   };

Available properties :

Properties Type Description
data Array Data to display using the multibar chart (mandatory if you don’t define the «noData» property.). Generally it would be a property of $scope
x function Providing a function to the x property allows configuration of the data on the X axis. Consider this example : say we want to double the data value displayed on the X axis in comparison to the data provided to the «data» property. We can achieve this by providing the following function to the x property : function(){ return function(d){ return d[0]*2; }; }; where «d[0]» is all the values at index 0 of all sub arrays of the array at property «values» of all objects in the array provided to the «data» property.
y function See «x» property above. Applied to the Y axis instead.
forceY Array Values to force on the Y axis. By default the Y axis will start at the minimum value of the serie. Use it to force special values such as 0.
showLegend Boolean Display or hide legend.
showControls Boolean Display or hide controls.
tooltips Boolean Enable or disable tooltips when hovering the chart.
noData String Message to display when there is no data (default to «No data available»)
color Array Color of series in the corresponding order. Can be hexadecimal, named or RGB. Ex. [‘#4D9FF2’, ‘yellow’, ‘rgb(151,109,165)’]. Note that you can also specify the value of the color in the «data» array by providing a «color» attribute to each object.
tooltipContent function Customize tooltip content. Ex. function(key, x, y, e, graph) { return ‘&lth1&gt Tooltip Title &lt/h1&gt &ltp&gt’+ y +’&lt/p&gt’;} where key, x and y are the name and value of the series at the tooltip point, e an event and graph the chart object.
transitionDuration integer Duration of transition effect (Default to 500).

Axis Configuration

Axis are configured in the same configuration object.

X axis :

Properties Type Description
xAxisTickValues Array Specify explicitly the values to plot on the X axis
xAxisTickSubdivide Integer Specify the number of intermediate ticks to show on the X axis
xAxisTickPadding Integer Specify ticks padding on the X axis
xAxisTickFormat function Specify how data should be formatted. For instance you can format number on the X axis to have exactly two digit after the decimal point : d3.format(‘.2f’). Or format Date object to a readable format as d3.time.format(‘%Y’) which shows the year only. See d3.js documentation for a list of all format available
xAxisLabel String Label of the X axis
xAxisDomain Array [start, end] Specify the domain on the X axis (min to max value)
xAxisShowMaxMin Boolean Show or hide maximum and minimum value in bold
xAxisRotateLabels Integer 0 to 180° rotation of X axis tick label
xAxisStaggerLabels Integer Size of the gap between labels to resolve overlapping issue

Y axis :

See X axis. Replace property «xName» by «yName».

Multibar horizontal

The multibar horizontal chart is used to compare different series in a horizontal bar representation.

Configuration

"multibarhorizontal":{}

The w20MultiBarHorizontalChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller.

You must indicate a unique id for the chart

<div id="multibarhorizontal" data-w20-multi-bar-horizontal-chart="multibarHorizontalConfig"></div>

Fragment definition sections

This module has no fragment definition section.

Data format

Data fed to the multibar horizontal chart should follow a default format. This format can be overridden by the use of personal function (See «x» and «y» properties below).

Default data format exemple :

 [
  {
     "key": "Series 1",
     "values": [ [1, 10], [2, 20], [3, 5] ]
  },
  {
     "key": "Series 2",
     "values": [ [1, 8], [2, 10], [3, 15] ]
  }
 ]

The key property defines the name of the series. The values defines the data of the series. By default the value at index 0 of each sub array is plotted on the X axis while the value at index 1 is plotted on the Y axis.

Multibar configuration

The multibar chart is configured by the configuration object passed to the directive declaration (see Directives).

Exemple :

   $scope.multibarHorizontalConfig = {
          data: $scope.multibarhorizontaldata,
          showXAxis: true,
          showYAxis: true,
          tooltips: true,
          showControls: true,
          showLegend: true
    }

Available properties :

Properties Type Description
data Array Data to display using the multibar horizontal chart (mandatory if you don't define the "noData" property.). Generally it would be a property of $scope
x function Providing a function to the x property allows configuration of the data on the X axis. Consider this example : say we want to double the data value displayed on the X axis in comparison to the data provided to the "data" property. We can achieve this by providing the following function to the x property : function(){ return function(d){ return d[0]*2; }; }; where "d[0]" is all the values at index 0 of all sub arrays of the array at property "values" of all objects in the array provided to the "data" property.
y function See "x" property above. Applied to the Y axis instead.
forceY Array Values to force on the Y axis. By default the Y axis will start at the minimum value of the serie. Use it to force special values such as 0.
showLegend Boolean Display or hide legend.
showControls Boolean Display or hide controls.
tooltips Boolean Enable or disable tooltips when hovering the chart.
noData String Message to display when there is no data (default to "No data available")
color Array Color of series in the corresponding order. Can be hexadecimal, named or RGB. Ex. ['#4D9FF2', 'yellow', 'rgb(151,109,165)']. Note that you can also specify the value of the color in the "data" array by providing a "color" attribute to each object.
stacked Boolean Indicate whether the series should be stacked on each other or not.
tooltipContent function Customize tooltip content. Ex.function(key, x, y, e, graph) { return '<h1> Tooltip Title </h1> <p>'+ y +'</p>';} where key, x and y are the name and value of the series at the tooltip point, e an event and graph the chart object.
transitionDuration integer Duration of transition effect (Default to 500).

Axis Configuration

Axis are configured in the same configuration object.

X axis :

Properties Type Description
xAxisTickValues Array Specify explicitly the values to plot on the X axis
xAxisTickSubdivide Integer Specify the number of intermediate ticks to show on the X axis
xAxisTickPadding Integer Specify ticks padding on the X axis
xAxisTickFormat function Specify how data should be formatted. For instance you can format number on the X axis to have exactly two digit after the decimal point : d3.format(‘.2f’). Or format Date object to a readable format as d3.time.format(‘%Y’) which shows the year only. See d3.js documentation for a list of all format available
xAxisLabel String Label of the X axis
xAxisDomain Array [start, end] Specify the domain on the X axis (min to max value)
xAxisShowMaxMin Boolean Show or hide maximum and minimum value in bold
xAxisRotateLabels Integer 0 to 180° rotation of X axis tick label
xAxisStaggerLabels Integer Size of the gap between labels to resolve overlapping issue

Y axis :

See X axis. Replace property «xName» by «yName».

Line

The line chart is used to plot series as line function.

Configuration

"line":{}

The w20MultibarChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller.

You must indicate a unique id for the chart

<div id="multibar" data-w20-multibar-chart="multibarConfig"></div>

Data format

Data fed to the line chart should follow a default format. This format can be overridden by the use of personal function (See «x» and «y» properties below).

Default data format exemple :

  [
   {
      "key": "Series 1",
      "values": [ [1, 10], [2, 20], [3, 5] ]
   },
   {
      "key": "Series 2",
      "values": [ [1, 8], [2, 10], [3, 15] ]
   }
  ]

The key property defines the name of the series. The values defines the data of the series. By default the value at index 0 of each sub array is plotted on the X axis while the value at index 1 is plotted on the Y axis.

Line chart configuration

The line chart is configured by the configuration object passed to the directive declaration (see Directives).

Exemple :

    $scope.lineConfig = {
           data: $scope.lineData,
           xAxisTickSubdivide: 10,
           xAxisTickFormat: d3.format('.2f'),
           showControls: true,
           showLabels: true,
           showLegend: true,
           tooltips: true,
           showXAxis: true,
           showYAxis: true,
           xAxisHighlightZero: true,
           xAxisLabel: 'W label',
           yAxisLabel: 'y label',
           xAxisRotateLabels: 90,
           xAxisScale: d3.scale.linear(),
           xAxisDomain: [0, 10],
           yAxisDomain: [0, 100]
       }

Available properties :

Properties Type Description
data Array Data to display using the line chart (mandatory if you don’t define the «noData» property.). Generally it would be a property of $scope
x function Providing a function to the x property allows configuration of the data on the X axis. Consider this example : say we want to double the data value displayed on the X axis in comparison to the data provided to the «data» property. We can achieve this by providing the following function to the x property : function(){ return function(d){ return d[0]*2; }; }; where «d[0]» is all the values at index 0 of all sub arrays of the array at property «values» of all objects in the array provided to the «data» property.
y function See «x» property above. Applied to the Y axis instead.
forceY Array Values to force on the Y axis. By default the Y axis will start at the minimum value of the serie. Use it to force special values such as 0.
showLegend Boolean Display or hide legend.
tooltips Boolean Enable or disable tooltips when hovering the chart.
isArea Boolean Color integral of series
noData String Message to display when there is no data (default to «No data available»)
color Array Color of series in the corresponding order. Can be hexadecimal, named or RGB. Ex. [‘#4D9FF2’, ‘yellow’, ‘rgb(151,109,165)’]. Note that you can also specify the value of the color in the «data» array by providing a «color» attribute to each object.
tooltipContent function Customize tooltip content. Ex. function(key, x, y, e, graph) { return ‘&lth1&gt Tooltip Title &lt/h1&gt &ltp&gt’+ y +’&lt/p&gt’;} where key, x and y are the name and value of the series at the tooltip point, e an event and graph the chart object.
transitionDuration integer Duration of transition effect (Default to 500).
showXAxis Boolean Show/hide X axis
showYAxis Boolean Show/hide Y axis
interpolate String Define the interpolation mode :
  • linear - piecewise linear segments, as in a polyline.
  • linear-closed - close the linear segments to form a polygon.
  • 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.

Axis Configuration

Axis are configured in the same configuration object.

X axis :

Properties Type Description
xAxisTickValues Array Specify explicitly the values to plot on the X axis
xAxisTickSubdivide Integer Specify the number of intermediate ticks to show on the X axis
xAxisTickPadding Integer Specify ticks padding on the X axis
xAxisTickFormat function Specify how data should be formatted. For instance you can format number on the X axis to have exactly two digit after the decimal point : d3.format(‘.2f’). Or format Date object to a readable format as d3.time.format(‘%Y’) which shows the year only. See d3.js documentation for a list of all format available
xAxisLabel String Label of the X axis
xAxisDomain Array [start, end] Specify the domain on the X axis (min to max value)
xAxisShowMaxMin Boolean Show or hide maximum and minimum value in bold
xAxisRotateLabels Integer 0 to 180° rotation of X axis tick label
xAxisStaggerLabels Integer Size of the gap between labels to resolve overlapping issue

Y axis :

See X axis. Replace property «xName» by «yName».

Line plus bar

The line plus bar chart is used to represent series by lines and bars on the same area..

Configuration

"lineplusbar":{}

The w20LinePlusBarChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller.

You must indicate a unique id for the chart

<div id="LinePlusBarChart" data-w20-line-plus-bar-chart="lineplusbarConfig"></div>

Fragment definition sections

This module has no fragment definition section.

Data format

Data fed to the line plus bar chart should follow a default format. This format can be overridden by the use of personal function (See «x» and «y» properties below).

Default data format exemple :

  [
   {
      "key": "Series 1",
      "bar": true,
      "values": [ [1, 10], [2, 20], [3, 5] ]
   },
   {
      "key": "Series 2",
      "values": [ [1, 8], [2, 10], [3, 15] ]
   }
  ]

The key property defines the name of the series. The values defines the data of the series. By default the value at index 0 of each sub array is plotted on the X axis while the value at index 1 is plotted on the Y axis. By default data are plotted as line. The «bar» property specify if the series should be plotted with bars.

line plus bar configuration

The line plus bar chart is configured by the configuration object passed to the directive declaration (see Directives).

Exemple :

  $scope.linePlusBarConfig = {
   data: $scope.lineplusbardata,
   showLegend: true
   }

Available properties :

Properties Type Description
data Array Data to display using the multibar chart (mandatory if you don’t define the «noData» property.). Generally it would be a property of $scope
x function Providing a function to the x property allows configuration of the data on the X axis. Consider this example : say we want to double the data value displayed on the X axis in comparison to the data provided to the «data» property. We can achieve this by providing the following function to the x property : function(){ return function(d){ return d[0]*2; }; }; where «d[0]» is all the values at index 0 of all sub arrays of the array at property «values» of all objects in the array provided to the «data» property.
y function See «x» property above. Applied to the Y axis instead.
showLegend Boolean Display or hide legend.
tooltips Boolean Enable or disable tooltips when hovering the chart.
noData String Message to display when there is no data (default to «No data available»)
color Array Color of series in the corresponding order. Can be hexadecimal, named or RGB. Ex. [‘#4D9FF2’, ‘yellow’, ‘rgb(151,109,165)’]. Note that you can also specify the value of the color in the «data» array by providing a «color» attribute to each object.
tooltipContent function Customize tooltip content. Ex. function(key, x, y, e, graph) { return ‘&lth1&gt Tooltip Title &lt/h1&gt &ltp&gt’+ y +’&lt/p&gt’;} where key, x and y are the name and value of the series at the tooltip point, e an event and graph the chart object.
transitionDuration integer Duration of transition effect (Default to 500).

Axis Configuration

Axis are configured in the same configuration object.

X axis :

Properties Type Description
xAxisTickValues Array Specify explicitly the values to plot on the X axis
xAxisTickSubdivide Integer Specify the number of intermediate ticks to show on the X axis
xAxisTickPadding Integer Specify ticks padding on the X axis
xAxisTickFormat function Specify how data should be formatted. For instance you can format number on the X axis to have exactly two digit after the decimal point : d3.format(‘.2f’). Or format Date object to a readable format as d3.time.format(‘%Y’) which shows the year only. See d3.js documentation for a list of all format available
xAxisLabel String Label of the X axis
xAxisDomain Array [start, end] Specify the domain on the X axis (min to max value)
xAxisShowMaxMin Boolean Show or hide maximum and minimum value in bold
xAxisRotateLabels Integer 0 to 180° rotation of X axis tick label
xAxisStaggerLabels Integer Size of the gap between labels to resolve overlapping issue

Y axis :

See X axis. Replace property «xName» by «yName».

Y2 axis :

For the right axis. Replace property «xName» by «y2Name»