The chart renders, but changing the page's text color does not give its line a useful stroke. Load Chartist's matching stylesheet and target the SVG series classes when styling the chart. Keep the numerical source in the page so color never becomes the only way to read the result.
This recipe uses Chartist 2's lineChart API. Older examples using a different constructor belong to their own version; check the script you loaded before combining snippets from both.
Open the complete example · Download the full HTML source
Start with the labels and one series
The official Chartist guide shows the current function API and matching CSS distribution. With its browser global build loaded, give the renderer a target:
<div id="requests"></div>
const chart = Chartist.lineChart('#requests', {
labels: ['Mon', 'Tue', 'Wed'],
series: [[8, 12, 10]]
});
The three values here are fictional requests recorded on three consecutive days. Tuesday is the largest value at twelve; the supplied three-day count is thirty. These observations do not establish a trend beyond that tiny source.
Keep the label array aligned with the series values. If you sort the values independently, the drawing may still look reasonable while describing different days.
Style SVG marks deliberately
Chartist renders SVG marks that its stylesheet can target. Inspect the generated SVG and use the classes belonging to the installed version rather than adding unrelated styles to the surrounding div.
A scoped rule for a series line can express the intended stroke without changing every line elsewhere on the page. Keep the selector under this chart's container. Axis labels, grid lines, points, and the data line serve different purposes, so do not give all SVG paths the same heavy stroke.
Choose a visible stroke against the page background and retain point marks for this small dataset. If you introduce a second series, give it a distinct label and a distinguishable mark as well as a different color.
Make the source readable without a tooltip
Put the Monday eight, Tuesday twelve, and Wednesday ten observations into a semantic table with a caption and column headers. Write the reporting unit as requests, not a bare “value.” A reader checking the total should not need to trigger three separate tooltips.
The existing HTML line chart article explains how scales and SVG paths can be built by hand. Chartist supplies that rendering layer here; your responsibility remains the association between labels, observations, and the written finding.
Send the chart with its styles
Copying only the generated SVG is a different delivery from the original HTML application. For a self-contained reading page, retain the library, the CSS it needs, your scoped overrides, and the source data together. Reopen the actual delivery file and compare both the plotted points and table.
When the page is review material in NOS, keep the short finding with the chart: Tuesday is the highest of the three supplied days. Do not turn that sentence into a forecast just because the line continues toward the right edge of the picture.