chart.js

100%

✓ Published0🌍 Public

Last edited Apr 9, 2020

Created on Apr 9, 2020

A line chart displays seven monthly data points with a single dataset, rendered onto a canvas element. The example uses the Chart.js library (version 2.8.0) via its CDN, constructing a `Chart` instance with `type: 'line'`. The dataset defines a red background and border color, with `lineTension: 0.0` to create straight segments between points. The chart is embedded in a minimal HTML page, with the canvas retrieved by ID and styled via CSS to fill the viewport without margins or scrollbars.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

simple line chart from dataset

A simple SVG line chart displays seven monthly data points from a local JSON dataset, plotting date against value. The D3 v4 code uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Circles mark each point, with hover effects changing their color to red and showing the same value label already displayed above each dot. The final value appears in larger text at the line’s end, while month labels sit below the chart.

EElisaDnr

79% match

Loading thumbnail…

simple line chart from dataset

This line chart displays seven monthly data points from a JSON dataset, plotting each value over time on a time-scaled x-axis and a linear y-axis. The chart incorporates interactive hover effects, highlighting a data point and displaying its value with a dashed red line. Built with D3 v4, the SVG visualization uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.json` for data loading, with animations on mouseover via `transition().duration()`.

MMilowB

78% match

Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes a small dataset of seven monthly values from January to July 2016, showing a trend with peaks in May and dips in March and June. The chart uses an SVG canvas, with time parsed via `d3.timeParse` and formatted with `d3.timeFormat`, while an ordinal time scale on the x-axis and a linear scale on the y-axis map the data. The line path is generated by `d3.line`, and circles represent each data point. Hovering a circle highlights it in red, draws a dashed vertical guide line, and displays the value in bold text, all implemented with D3 v4 event handlers. The data comes from the included `dataset.json` file.

CChaf1A

78% match

Loading thumbnail…

simple line chart from dataset

This simple line chart displays seven monthly data points from a JSON dataset, plotting values over time. Built with D3 v4, it uses an SVG rendering with `d3.scaleTime` and `d3.scaleLinear` to map dates and values, and `d3.line` to draw the path. Circles mark each point, with mouseover interactions that highlight a point and show its value. The chart includes a date label below each point and displays the final value in large text near the line's end.

EElisaDnr

78% match

Loading thumbnail…

simple line chart from dataset

This visualization displays a simple line chart plotting seven monthly data points from a JSON dataset, with each point labeled by its abbreviated month and numeric value. The SVG chart includes a black polyline, small circles at each data point that turn red and fill on mouseover, and a large text label showing the final value. Built with D3 v4, it uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, `d3.line` to generate the path, and `d3.timeParse` to convert date strings.

LLRobergeon

77% match

Loading thumbnail…

simple line chart from dataset

This example displays a simple line chart of seven monthly data points, with each point labeled by its date and value. It uses d3.v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to map the dataset to SVG paths and circles. The chart animates circle color on mouseover via `transition().duration(500)`, and the final value is appended as a text label. Data comes from an external `dataset.json` file containing name, value, and date fields.

LLRobergeon

77% match

Loading thumbnail…

simple line chart from dataset

A simple line chart displays seven monthly data points from January to July 2016, with values ranging from 10 to 50. The visualization shows a single black line with labeled x-axis dates and a large final value label. Using D3 v4, the code parses ISO date strings, applies time and linear scales, and generates the path via d3.line. Data loads from an external dataset.json, with SVG rendering and monospace font labels highlighting the last point's value.

EEssohanamKouyou

77% match

Loading thumbnail…

simple line chart from dataset

This simple line chart visualizes a time series of seven monthly values from January to July 2016. The chart uses a black stroked line and light gray circular markers, with interactive mouseover effects that highlight a point in red and display its numeric value. Built with D3 v4, it employs `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and SVG circles for points. Data is loaded from an external `dataset.json` file, and labels show abbreviated month names and the final value.

EEssohanamKouyou

77% match