For creating scatterplot chart you can use the following script:

var chart = new Taucharts.Chart({
            data: defData,
            type: 'scatterplot',
            x: 'cycleTime',
            y: 'effort',
            color: 'team',
            size: 'count'
        });
chart.renderTo('#scatter');

example jsFiddle

Check encoding section to see how to apply colors.

Use guide property for some advanced settings. Here is an example that sets custom labels for axes and custom colors 'color-red','color-green','color-blue' for elements.

JavaScript

var chart = new Taucharts.Chart({
            guide: {
              x: {label:'Cycle Time in days'},  // custom label for X axis
              y: {label:'Effort in points'},    // custom label for Y axis
              padding: {b:40,l:40,t:10,r:10},   // chart paddings
              color: {                          // custom colors
                brewer: ['color-red', 'color-green', 'color-blue']
              }
            },
            data: defData,
            type: 'scatterplot',
            x: 'cycleTime',
            y: 'effort',
            color: 'team',
            size: 'count'
        });

CSS

  .tau-chart__legend__guide--color.color-red,
  .color-red {
    fill: red;
    background-color: red;
  }

  .tau-chart__legend__guide--color.color-green,
  .color-green {
    fill: green;
    background-color:green;
  }

  .tau-chart__legend__guide--color.color-blue,
  .color-blue {
    fill: blue;
    background-color:blue;
  }

example jsFiddle

results matching ""

    No results matching ""