Chart - Line Chart

Basic Example

<vega-line-chart id="line-chart" style="width:100%;height:300px"></vega-line-chart>

document.querySelector('#line-chart').options = {
    dataSource: [{ x:10, y:50 },{ x: 20, y:25 }, { x: 30, y:40 }],
    legends: ['Legend One'],
    xAxis:{
        type:'value',
        labelFormatter: text=>text+'%'
    },
    yAxis:{
        labelFormatter: text=>text+'%'
    }
};

Stacked Line Example

<vega-line-chart id="stacked-line-chart" style="width:500px;height:300px"></vega-line-chart>

const mockData = [
	{
		x: 10,
		y: 0.1,
	},
	{
		x: 20,
		y: 0.2,
	},
	{
		x: 30,
		y: 1,
	},
	{
		x: 45,
		y: 50,
	},
	{
		x: 21,
		y: 100,
	},
	{
		x: 50,
		y: 150,
	},
	{
		x: 66,
		y: 200,
	},
	{
		x: 13,
		y: 150,
	},
	{
		x: 80,
		y: 50,
	},
	{
		x: 100,
		y: 20,
	},
	{
		x: 110,
		y: 5,
	},
	{
		x: 40,
		y: 1,
	},
	{
		x: 15,
		y: 20,
	},
];

const stackMockData = [mockData, mockData.map((item, index) => ({ ...item, y: item.y + index * 10 }))];
document.getElementById("stacked-line-chart").options = {
	dataSource: stackMockData,
	legends: ["Fries $123.00", "Chicken Burger $105.00"],
};

Usage

Line charts are a common visualization tool for displaying and analyizing data over an interval or time period. They are particularly helpful for representing trends or relationships between two variables.

Properties

Option Types

const ChartOptionsType = {
    legends: string[];
    colors: string[];
    layout: {
        width: number;
        height: number;
        margin: {
            top:number;
            right:number;
            bottom:number;
            left:number;
        }
    };
    dataSource: {
        x:number | date string | string, //date string 2023-04-16
        y:number
    }[],
    xAxis:{
        // the type match the dataSource property x, value->number, time->date string, string->category, default type is value
        type: 'value' | 'time' | 'category'
        // axis lable function, such as (text:string)=>'$'+text
        labelFormatter:(text:number|Date|string):string=>text
    },
    yAxis:{
        // axis lable function, such as (text:string)=>text+'%'
        labelFormatter:(text:number|Date|string):string=>text
    }
}

Method

reRender - Updates the chart using existing options.

The default width of the chart is the same as the parent element width. As a result, the chart may be rendered blank if the parent element is hidden, such as if being rendered in a modal or tab. In this case you will need to call the reRender method after the tab or modal is shown.

For example:

<vega-modal>
    <div>
        <vega-line-chart id="line-chart"></vega-line-chart>
    </div>
</vega-modal>
<script>
    document.querySelector('#line-chart').options = mockOptions;
    //after the modal is displayed
    document.querySelector('vega-modal').addEventListener('vegaOpen', () => {
        document.querySelector('#line-chart').reRender();
    });
</script>

Accessibility

Standards

• Inline text spacing must be adjustable with custom stylesheets.
• id attribute value must be unique.

Best Practices

• Trends - Line charts are generally good for tracking trends and changes in data over time, and can be used to understand growth or decline.
• Time Series Data - Line charts can be helpful for understanding things such as business data, such as stock prices, sales, etc.
• Multiple Variables - If you need to compare two trends, using a stacked line chart can be helpful
• Predictions - Line charts are useful for comparing performance against targets.