DEV Community

Masui Masanori
Masui Masanori

Posted on

2

【TypeScript】Try Chart.js

Intro

This time, I will try Chart.js to create some charts.

My base sample codes are as same as last time.

Chart.js has 8 chart types.

This time, I use "line" type.

No options

sample-drawer.ts

...
    private drawSample(canvas: HTMLCanvasElement) {
        const chart = new Chart(canvas, {
            type: 'line',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [30, 90, 60, 80, 20, 70, 50],
                }]
            }
        });
    }
...
Enter fullscreen mode Exit fullscreen mode

Result

Alt Text

Change styles

I add some codes to change the chart styles.

sample-drawer.ts

...
    private drawSample(canvas: HTMLCanvasElement) {
        const chart = new Chart(canvas, {
            type: 'line',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [30, 90, 60, 80, 20, 70, 50],
                    // hide the color under the line
                    backgroundColor: "rgba(0, 0, 0, 0)",
                    // line color
                    borderColor: "rgb(255, 170, 100)",
                    pointStyle: 'triangle',
                    // point background color
                    pointBackgroundColor: "rgba(200, 255, 255, 1)",
                    // I also can use color name
                    pointBorderColor: 'green',
                    // default point size
                    radius: 3,
                    pointHoverBackgroundColor: "rgba(100, 170, 100, 0.2)",
                    // hovered point size
                    pointHoverRadius: 7,
                    borderWidth: 1.2,
                    pointHoverBorderColor: "rgb(100, 170, 100)",
                    pointHoverBorderWidth: 2,
                    // make the line straight
                    lineTension: 0,
                }]
            }
        });
    }
...
Enter fullscreen mode Exit fullscreen mode

Result

Alt Text

Offset

How I can start drawing the line from the point where is a little distance from the left edge?

One solution is changing the parent's chart type and set the child's chart type.

sample-drawer.ts

...
    private drawSample(canvas: HTMLCanvasElement) {
        const chart = new Chart(canvas, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    type: 'line',
...
                }]
            }
        });
    }
...
Enter fullscreen mode Exit fullscreen mode

Result

Alt Text

Multiple lines

I can add data to add other lines.

sample-drawer.ts

...
    private drawSample(canvas: HTMLCanvasElement) {
        const chart = new Chart(canvas, {
            type: 'line',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    type: 'line',
...
                },
                {
                    label: '# of Votes 2',
                    data: [12, 19, 3, 5, 2, 3],
                    lineTension: 0,
                    backgroundColor: [
                        'rgba(100, 255, 200, 1)',
                    ],
                    borderColor: [
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 2,
                }]
            }
        });
    }
...
Enter fullscreen mode Exit fullscreen mode

Result

Alt Text

Ignore the point what has no data

If the second line doesn't have the data of 'Green', how can I ignore it?
Though I can set 'null' like below, the line will be broken.

sample-drawer.ts

...
    private drawSample(canvas: HTMLCanvasElement) {
        const chart = new Chart(canvas, {
            type: 'line',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
...
                },
                {
                    label: '# of Votes 2',
                    data: [12, 19, 3, null, 2, 3],
...
                }]
            }
        });
    }
...
Enter fullscreen mode Exit fullscreen mode

Result

Alt Text

I can use { x: , y: } to set the graph data.
So if the points what have no data aren't first or last one, I can ignore them.

sample-drawer.ts

...
    private drawSample(canvas: HTMLCanvasElement) {
        const chart = new Chart(canvas, {
            type: 'line',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
...
                },
                {
                    label: '# of Votes 2',
                    data: [
                        {x: 'Red', y: 12},
                        {x: 'Blue', y: 19},
                        {x: 'Yellow', y: 3},
                        {x: 'Purple', y: 2},
                        {x: 'Orange', y: 3}
                    ],
...
                }]
            }
        });
    }
...
Enter fullscreen mode Exit fullscreen mode

Result

Alt Text

Options

I can add options to set x-axies or y-axies infomations of the graph.

sample-drawer.ts

...
    private drawSample(canvas: HTMLCanvasElement) {
        const chart = new Chart(canvas, {
            type: 'line',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
...
                },
                {
                    // use the right side label
                    yAxisID: 'y2',
                    label: '# of Votes2',
...
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        scaleLabel: {
                            fontColor: "black"
                        },
                        gridLines: {
                            color: "rgba(126, 126, 126, 0.4)",
                            zeroLineColor: "black"
                        },
                        ticks: {
                            fontColor: "black",
                            beginAtZero: true,
                            suggestedMax: 250,
                            stepSize: 50
                        }
                    },
                    {
                        id: "y2",
                        position: "right",

                        gridLines: {
                            display: false
                        },
                        ticks: {
                            fontColor: "black",
                            beginAtZero: true,
                            max: 100,
                            stepSize: 20,
                            callback: function(val) {
                                return val + '%';
                            }
                        }
                    }],
                    xAxes: [{
                        scaleLabel: {
                            fontColor: "black",
                            display: true,
                            labelString: 'Colors'
                        },
                        gridLines: {
                            color: "rgba(126, 126, 126, 0.4)",
                            zeroLineColor: "black"
                        },
                        ticks: {
                            fontColor: "black"
                        }
                    }]
                }
            }
        });        
    }
}
Enter fullscreen mode Exit fullscreen mode

Result

Alt Text

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more