Home

General options for basic charts:

• General
• Bar
• Area
• Line
• Scatter
• Pie

Stacked:

• General
• Stacked Bar
• Stacked Area
• Stream
• Multi Line
• Corona

General options for basic charts

{
    color: DefaultSequentialColor,
    chart: {
        margin: {
            left: 60,
            bottom: 50,
            right: 10,
            top: 20
        }
    },
    ordering: {
        accessor: null,
        direction: 'asc'
    },

    xAxis: {
        allowDecimals: false,
        scale: null,
        ticks: 0,
        tickFormat: null,
        max: null,
        min: null,
        labelAngle: 0,

        title: {
            text: '',
            style: ''
        }
    },

    yAxis: [
        {
            allowDecimals: false,
            scale: null,
            max: null,
            min: null,
            ticks: 0,
            tier: 6,
            title: {
                text: '',
                style: ''
            }
        }
    ],

    data: {
        x: {
            accessor: null,
            type:  FieldType.NUMBER,
            formatter: null,
        },
        y: [
            {
                accessor: null,
                type:  FieldType.NUMBER,
                formatter:  null,
                yAxis: 0,
                tooltip: {
                    valueSuffix: null
                }
            }
        ]
    }

Bar

{
    chart: { type: 'bar_horizontal'}
}

Area

{
    chart: {
        type: 'area_horizontal'
    },
    plots: {
        areaOpacity: 1,
        curve: 'cardinal',
        strokeWidth: 4,
        nodeRadius: 4,
        drawArea: true,
        showDots: true
    },
}

Line

{
    chart: {
        type: 'line',
    },
    plots: {
        curve: 'linear',
        strokeWidth: 3,
        nodeRadius: 4,
        areaOpacity: 1,
        drawArea: false,
        showDots: true
    }
}

Scatter

{
    chart: {
        type: 'scatter',
    },
    plots: {
        blur: false,
        opacity: 1,
        bubble: {
            min: 6,
            max: 20,
            default: 8
        }
    },

    zAxis: {
        allowDecimals: false,
        scale: null,
        max: 100,
        min: 0,
    },

    data: {
        z: {
            accessor: null,
            type:  FieldType.NUMBER,
            formatter:  null,
        },
    }
}

Pie

{
    chart: {
        type: 'pie'
    },
    animation: {
        duration: {
            slice: 1000,
        }
    },
    plots: {
        othersTitle: 'Others',
        isDonut: false,
        innerRadiusRatio: 0.4
    },
    slice: {
        labelPosition: 'auto',
        labelMinPercentage: 0.01
    }
}

General options for stacked charts

{
    chart: {
        margin: {
            left: 60,
            bottom: 50,
            right: 10,
            top: 20
        }
    },
    color: DefaultCategoricalColor,
    ordering: {
        accessor: null,
        direction: 'asc'
    },

    series: {
        allowDecimals: false,
        scale: null,
        max: null,
        min: null,
        ticks: 0,
        title: {
            text: '',
            style: ''
        }
    },


    xAxis: {
        allowDecimals: false,
        scale: null,
        ticks: 0,
        tickFormat: null,
        max: null,
        min: null,
        labelAngle: 0,

        title: {
            text: '',
            style: ''
        }
    },

    yAxis: [
        {
            allowDecimals: false,
            scale: null,
            max: null,
            min: null,
            ticks: 0,
            title: {
                text: '',
                style: ''
            }
        }
    ],

    data: {
        s: {
            accessor: null,
            type:  FieldType.STRING,
            formatter: function () { }
        },
        x: {
            accessor: null,
            type:  FieldType.NUMBER,
            formatter: ()=> { }
        },
        y: [
            {
                accessor: null,
                type:  FieldType.NUMBER,
                formatter: function () { },
                yAxis: 0
            }
        ],
    }

Stacked Bar

{
    animation: {
        duration: {
            layout: 500
        }
    },
    chart: {
        type: 'bar_grouped'
    },
    color: DefaultCategoricalColor,
    plots: {
        stackLayout: true,
        stackMethod: 'expand'
    }
}

Stacked Area

{
    chart: {
        type: 'area_stacked',
    },
    animation: {
        duration: {
            curve: 500
        }
    },
    plots: {
        stackLayout: true,
        stackMethod: Stacks.Zero,
        showDots: false,
        curve: 'natural',
        strokeWidth: 2,
        opacityArea: 0.7
    }
}

Stream

{
    chart: {
        type: 'stream',
    },
    plots: {
        stackLayout: true,
        stackMethod: Stacks.Wiggle,
        opacityArea: 0.7,
        dotRadius: 8
    }
}

Multi-Line

{
    chart: {
        type: 'line_multi'
    },
    plots: {
        curve: 'linear',
        strokeWidth: 3,
        dotRadius: 4
    }
}

Corona

{
    chart: {
        type: 'corona'
    },
    color: DefaultCategoricalColor,
    plots: {
        levels: 0,				//How many levels or inner circles should there be drawn
        maxValue: 0, 			//What is the value that the biggest circle will represent
        labelFactor: 1.15, 	//How much farther than the radius of the outer circle should the labels be placed
        wrapWidth: 60, 		//The number of pixels after which a label needs to be given a new line
        opacityArea: 0.35, 	//The opacity of the area of the blob
        dotRadius: 4, 			//The size of the colored circles of each blog
        opacityCircles: 0.1, 	//The opacity of the circles of each blob
        strokeWidth: 2, 		//The width of the stroke around each blob
        innerRadiusRatio: 0.4,
        showDots: true,
        sortArea: true, // show smallest area on top
        stackLayout: true, // stack areas
        stackMethod: Stacks.Zero,
        isArea: true	//If true the area and stroke will follow a round path (cardinal-closed),
    }
}