how to make a bar graph in typescript

index.ts
import { Chart } from 'chart.js';

// Sample data points
const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [{
        label: 'Sales',
        data: [10, 20, 15, 25, 30, 28],
        backgroundColor: 'blue'
    }]
};

// Get the canvas element
const canvas = document.getElementById('myChart') as HTMLCanvasElement;

// Create a new bar chart instance
const barChart = new Chart(canvas, {
    type: 'bar',
    data: data
});

473 chars
21 lines

In this example, we first import the Chart class from chart.js library. We define sample data points for the bar graph, including labels and data values. We then select the canvas element where the bar graph will be rendered. Finally, we create a new instance of a bar chart and pass in the canvas element and the data points as parameters.

similar typescript code snippets

combine d3 datasets in typescript
store generic into localstorage in typescript
create a generic interface in typescript
split a provided array into chunks of a provided size in javascript in typescript
check if enum is valid in typescript
create a function that calculates volume of a cube in typescript
a generic function for storing cache into localstorage in typescript
how to define an interface in typescript
loop in typescript
create a loop in typescript

related categories

typescript
data-visualization

gistlibby LogSnag