ChartItem

Item displaying a chart.

Chart data is taken from the configured field, which is expected to be either an array of values for a sparkline type of chart, or an array of objects with { label, value } format.

Chart item
//<code-header>
fiddle.title = 'Chart item';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnToolbars : false
    },

    bodyItems : {
        // Define a chart item in the body of the cards
        bars : {
            type        : 'chart',
            chartType   : 'bar',
            chartConfig : {
                showAxes : true
            },
            height : 130
        }
    },

    columns : [
        { id : 'todo', text : 'Todo', color : 'blue' },
        { id : 'doing', text : 'Doing', color : 'orange' },
        { id : 'done', text : 'Done', color : 'green' }
    ],

    columnField : 'status',

    project : {
        taskStore : {
            fields : [
                // Data required to be supplied by an array type of field
                { name : 'bars', type : 'array' }
            ],
            data : [
                {
                    id     : 1,
                    name   : 'Task without data ',
                    status : 'doing'
                },
                {
                    id     : 2,
                    name   : 'Task with data',
                    status : 'done',
                    bars   : [
                        { label : 'New York', value : 5 },
                        { label : 'Paris', value : 7 },
                        { label : 'London', value : 6 }
                    ]
                }
            ]
        }
    }
});

Use CSS to size the chart item according to your needs.

Note that this item requires using thin bundles or thin npm packages in your application, and importing the chart bundle / package. It does not work with normal packages, module or umd bundles.

Configs

9
chartConfig: Object

Additional configuration options for the chart, see docs for the Chart module

chartType: line | bar | pie= 'line'

Type of chart to display, supports 'line', 'bar', and 'pie' charts

editor: String | Object= null

Widget type or config to use as the editor for this item. Used in the inline task editor.

ChartItems are un-editable by default.

height: Number

Convenience shortcut for supplying a height for the chart, but chart can be sized using CSS.

clsTaskItem
fieldTaskItem
hiddenTaskItem
orderTaskItem
styleTaskItem

Properties

2
isChartItem: Boolean= truereadonly
Identifies an object as an instance of ChartItem class, or subclass thereof.
isChartItem: Boolean= truereadonlystatic
Identifies an object as an instance of ChartItem class, or subclass thereof.

Typedefs

1