Examples
58 charts, each a small project you can edit in place or open in the playground. Every one is drawn by the same code that's checked against Chartist 1.x, pixel for pixel.
Line charts
- Simple line chartThree series, Monday to Friday, stretched to the full width.
- Line chart with areaOne series drawn as a line with the area below it filled down to zero.
- Auto scale axisA halving series on an auto scale x axis that only uses whole numbers.
- Fixed and auto scale axisA step line on an auto scale x axis and a fixed y axis with hand-picked ticks.
- Bi-polar Line chart with area onlyFour series swinging above and below zero, drawn as filled areas only.
- Holes in dataSeries with missing values, where each line breaks at every hole.
- Filled holes in dataSeries with missing values, bridged by a cardinal spline that fills the holes.
- Using events to replace graphicsA plugin swaps every point for a triangle while the chart is composed.
- Only whole numbersFour series between -3 and 3 on a y axis that only labels whole numbers.
- SVG Path animationLines and areas of three series grow from the bottom, one series after the other.
- Line scatter diagram with responsive settingsFour series of random points over 52 weeks, with more week labels on wider screens.
- Series OverridesThree named series, each with its own interpolation, area or points.
- Simple responsive optionsA growing series whose labels shorten and whose points or line hide as the screen narrows.
- Line Interpolation / SmoothingTwo series with large jumps, drawn with simple smoothing instead of a cardinal spline.
- Simple SMIL AnimationsPoints of two series fade and slide in one after the other, replayed every eight seconds.
- Advanced SMIL AnimationsGrid lines, labels, points and lines of four series fly in one after the other.
- TimeseriesTwo series of dated values on a fixed scale X axis with six month and day labels.
Bar charts
- Bi-polar bar chartTen weeks of positive and negative values around zero, with every other label shown.
- Distributed seriesOne series of clothing sizes, each value drawn as its own bar and color.
- Extreme responsive configurationFive series per quarter that switch between stacked, horizontal and grouped bars as the screen grows.
- Horizontal bar chartTwo series across the days of the week, drawn sideways.
- Label placementTwo weekly series with the x-axis labels on top and the y-axis labels on the right.
- Multi-line labelsQuarterly amounts in CHF with long labels that wrap onto several lines.
- Overlapping bars on mobileTwo series over twelve months whose bars move closer together and labels shorten on small screens.
- Stacked bar chartThree series stacked per quarter, with a plugin that widens every bar.
- Stacked bar chart with accumulate-relative stack modePositive and negative values stacked separately, up and down from zero.
- Add peak circles using the draw eventsA plugin adds a circle at the peak of every bar, sized by its value.
Pie and donut charts
- Simple pie chartThree slices, each labelled with its share of the total.
- Pie chart with custom labelsFruit slices labelled with an initial on small screens and the full name, pushed outside, on larger ones.
- Donut chartFour labelled slices on a thick ring, starting at the left.
- Animating a Donut with Svg.animateA plugin draws the donut slice by slice with SMIL, each one starting where the previous one ends.
- Gauge chartFour values on a half ring: a total of twice their sum leaves the lower half empty.
Composed charts
- Bars and a line with two Y axesQuarterly revenue as bars on the left axis and the margin as a line on the right one.
- Container queries (experimental)One config in a narrow and a wide container: the narrow one drops the margin line, its axis and the grid.
- SVG text labelsBars and a line with SVG text labels, which also work where foreignObject does not.
- Band chartThe range of six stores as a band, with their average and one store drawn on top.
- Grouped stacked barsNew and returning customers per quarter, one stack per year, drawn by two bar layers side by side.
- Two Y axes with different unitsTemperature as a line and rainfall as an area, each on its own Y axis.
Styling
Live data
- Sensor with a sliding windowA new reading every second, and a line under the chart that says which elements each update kept, added and removed.
- Dashboard with animated barsTwo series by region get new numbers every two seconds, and the bars overshoot a little on their way.
- Network speedFour samples a second as touching bars, with their running average as a line on top.
- SeismographA thin trace that scrolls every 80 ms, quiet until a quake comes through.
- Votes by districtThe results of each district as it reports: the slices and their labels turn to the new shares.
- Live gaugeA half ring that follows the CPU load, updated every 1.2 seconds.
- Grouped and stackedNew numbers and a switch between grouped and stacked bars in one update, every bar moving to its new place.
Essentials
- Axis titlesA line chart of visits per day with a title for each axis, each in room of its own.
- Axis titles on two Y axesRevenue in EUR and ad spend in USD on their own Y axes, each named, one title aligned to the end and one turned to face the chart.
- Target lines on a bar chartMonthly sales against a goal and a minimum, added to the bar chart preset as extra layers.
- Bars with a trend lineMonthly sign-ups as bars, with the least-squares trend through them added to the bar chart preset.
- Scatter plot with a regression lineIce cream sales against the temperature as points, with the least-squares line through them.
- Value labels on barsProfit per quarter with each value past the end of its bar, and below it for a loss.
- Labels on stacked segmentsHours per work order on three machines as stacked horizontal bars, each segment labeled with its order and hours.
- Labeled points with a unitTemperatures in two cities, each point labeled in degrees and in its series' color.
- Log axisUsers growing from 120 to 850,000 in six years on a log Y axis, where each tenfold step is the same height.
- Moore's law, linear or logTransistors per processor from 1971 to 2022 on a log Y axis with minor grid lines, and a button that moves the points to a linear scale and back.
- Log-log chartBody mass and metabolic rate from a mouse to an elephant on two log axes with minor grid lines, and the straight trend line of their power law.