Vue ChartsAnnotations

vue logo
Enterprise

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Initial

annotations: {
    initial: [
        {
            type: 'line',
            // ...
        },
    ],
}

Adding & Editing

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

Saving & Loading

todo

Line

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Trend Line

{
    type: 'line',
    start: { x: new Date('2024-03-21T18:55:00.000Z'), y: 39838.38 },
    end: { x: new Date('2024-03-21T19:02:00.000Z'), y: 39829.71 },
},

Ray

todo

Channels

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Parallel Channel

{
    type: 'parallel-channel',
    top: {
        start: { x: new Date('Thursday, September 14, 2023'), y: 4487.78 - 50 },
        end: { x: new Date('Tuesday, October 03, 2023'), y: 4229.45 - 50 },
    },
    bottom: {
        start: { x: new Date('Thursday, September 14, 2023'), y: 4487.78 + 50 },
        end: { x: new Date('Tuesday, October 03, 2023'), y: 4229.45 + 50 },
    },
},

Dijsoint Channel

todo

Customisation

annotations: {
    line: {
        stroke: 'black',
        strokeWidth: 3,
        lineDash: [3, 4],
    },
    'parallel-channel': {
        stroke: 'red',
        strokeWidth: 4,
        background: {
            fill: 'red',
        },
        middle: {
            strokeOpacity: 0,
        },
    },
}

API Reference