Component for creating markers in chrt charts. Markers are visual elements (typically circles) used to highlight significant points in a chart, making data points more visible or emphasizing specific values. Markers can be added to any chart component (lines, bars, columns) and can be customized in size, color, and appearance.
For use with Webpack, Rollup, or other Node-based bundlers, chrt-markers can be installed as a standalone module via a package manager such as Yarn or npm.
npm install chrt-markers chrt-corechrt-markers can be used as part of the chrt package:
npm install chrtimport Chrt from "chrt-core";
import { chrtMarkers } from "chrt-markers";
// Add markers to a line chart
Chrt().add(chrt.line().data(data).add(chrtMarkers()));Creates a new markers component that can be added to any chart element.
// Basic markers
chrt.line().add(chrtMarkers());
// Customized markers
chrt.line().add(chrtMarkers().size(5).fill("#ff0000"));Sets the size (radius) of markers. Both methods are aliases.
chrtMarkers().size(5); // 5 pixel radius
// Size based on data
chrtMarkers().size((d, i) => d.importance * 2);Sets the fill color and opacity of markers.
chrtMarkers().fill("#ff0000").fillOpacity(0.5);
// Color based on data
chrtMarkers().fill((d) => (d.value > 100 ? "#ff0000" : "#0000ff"));Sets the stroke (border) properties of markers.
chrtMarkers().stroke("#000000").strokeWidth(2).strokeOpacity(0.8);Controls which markers are displayed. Both methods are aliases.
// Show specific markers
chrtMarkers().showMarkers((d) => d.value > 100);
// Show only even indices
chrtMarkers().filter((d, i) => i % 2 === 0);
// Show specific values
chrtMarkers().filter([10, 20, 30]);Hides markers based on a filter condition (inverse of showMarkers).
// Hide markers below threshold
chrtMarkers().hideMarkers((d) => d.value < 100);Shows or hides first/last markers.
// Show only first marker
chrtMarkers().firstMarker();
// Show only last marker
chrtMarkers().lastMarker();Shows or hides both first and last markers.
// Show only first and last markers
chrtMarkers().firstAndLastMarkers();Chrt()
.data(data)
.add(chrt.line().add(chrtMarkers().size(3).fill("#ff0000")));Chrt().add(
chrt
.line()
.data(data)
.add(
chrtMarkers()
.fill("#ff0000")
.fillOpacity(0.5)
.size(10)
.stroke("#0000ff")
.strokeWidth(3)
.strokeOpacity(0.5),
),
);Chrt().add(
chrt
.chrtBars()
.data(data)
.add(
chrtMarkers()
.size(5)
.filter((d) => d.value > threshold),
),
);Chrt().add(
chrt.line().data(data).add(
chrtMarkers()
.firstAndLastMarkers() // Show only first and last points
.size(8)
.fill("#ff0000"),
),
);