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');

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;
  }

results matching ""

    No results matching ""