React ChartsToolbar

react logo
Enterprise

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

toolbar: {
    ranges: {
        enabled: true,
    },
    zoom: {
        enabled: true,
    },
}

Positions & Alignment

toolbar: {
    ranges: {
        align: 'center',
    },
    zoom: {
        position: 'right',
        align: 'start',
    }
}

Buttons

const MONTH = 30 * 24 * 60 * 60 * 1000;

// ...

toolbar: {
    ranges: {
        buttons: [
            { label: '6 months', value: 6 * MONTH },
            { label: '12 months', value: 12 * MONTH },
            { label: 'All', value: (start, end) => [start, end] },
        ]
    },
}

Groups

Annotations

toolbar: {
    annotations: {
        enabled: true,
    }
}

Further reading on Annotations.

Ranges

toolbar: {
    ranges: {
        enabled: true,
    }
}

Zoom

toolbar: {
    zoom: {
        enabled: true,
    }
}

Further reading on Zoom.

API Reference