How to Create a Chart with Shared X-Axis Labels in HTML/CSS?

I'm trying to create a line chart where the x-axis labels match the column headers of a data table displayed below the chart, similar to how it's done in MS Excel with a DataTable as a chart element.

Example

Here's what I'm looking for:

• X-Axis Labels: Jan, Feb, Mar, Apr, May, Jun
• Table Headers: Should match the x-axis labels
• Data Lines: Two lines (Sales and Volume)

I want the result to display a chart that integrates seamlessly with the data table below it.

What I've Tried

I've explored using Chart.js but haven't found any examples or documentation that address this specific requirement. I'm open to alternative tools or methods in HTML/CSS (or JavaScript) to achieve this.

Specific Challenges:

• Aligning chart x-axis with table headers
• Maintaining consistent label formatting
• Creating a responsive design that works across different devices

Question

What's the most effective way to create a line chart with x-axis labels that directly correspond to a data table's column headers?

How to Create a Chart with Shared X-Axis Labels in HTML/CSS?

I'm trying to create a line chart where the x-axis labels match the column headers of a data table displayed below the chart, similar to how it's done in MS Excel with a DataTable as a chart element.

Example

Here's what I'm looking for:

• X-Axis Labels: Jan, Feb, Mar, Apr, May, Jun
• Table Headers: Should match the x-axis labels
• Data Lines: Two lines (Sales and Volume)

I want the result to display a chart that integrates seamlessly with the data table below it.

What I've Tried

I've explored using Chart.js but haven't found any examples or documentation that address this specific requirement. I'm open to alternative tools or methods in HTML/CSS (or JavaScript) to achieve this.

Specific Challenges:

• Aligning chart x-axis with table headers
• Maintaining consistent label formatting
• Creating a responsive design that works across different devices

Question

What's the most effective way to create a line chart with x-axis labels that directly correspond to a data table's column headers?

• html
• css
• charts
• visualization

1 Answer 1

I can suggest you to use Apache ECharts as a powerful lib that can cover your needs. Just to set formatter for xAxis.axisLabel like this:

const getAxisXFormattedLabel = (yValue: string, index: number) => {
    const xData = data.find(x => x.yValue === yValue);
    
    const month = xData.month;
    const sales = xData.sales;
    const volume = xData.volume;

    return `${month}\n${sales}\n${volume}`;
}

Hope it works well for you!