نمودارهای چارتیست
میله های همپوشانی در تلفن همراه
این مثال از برچسب استفاده می کند درون یابی و ویژگی seriesBarDistance که به شما امکان می دهد بسازید میله ها روی یکدیگر همپوشانی دارند.
نمودار میله ای انباشته
همچنین می توانید نمودار میله ای خود را روی آن تنظیم کنید با استفاده از stackBars به راحتی میله های سری را روی هم قرار دهید دارایی در پیکربندی شما
متحرک سازی یک دونات با Svg.animate
اگرچه ممکن است به این انیمیشن با CSS دست یابید، با برخی موارد جزئی کمتر از حد مطلوب، در اینجا مثالی از نحوه متحرک سازی نمودارهای دونات با استفاده از آن آورده شده است Chartist.Svg.animate و SMIL.
نمودار دایره ای ساده
یک نمودار دایره ای بسیار ساده با برچسب درونیابی برای نشان دادن درصد به جای سری داده های واقعی ارزش
انیمیشن های لبخند پیشرفته
Chartist یک API ساده برای متحرک سازی عناصر روی نمودار با استفاده از SMIL ارائه می دهد.
نمودار خطی ساده
نمونه ای از نمودار خطی ساده با سه سری. شما می توانید این مثال را در زمان واقعی ویرایش کنید.
نمودار پراکندگی خط
این مثال پیشرفته از نمودار خطی استفاده می کند برای رسم نمودار پراکندگی شی داده با یک تابع ایجاد می شود سبک مکانیزم تصادفی
نمودار خطی با مساحت
این نمودار از گزینه showArea استفاده می کند خط، نقطه و همچنین یک شکل منطقه را بکشید. برای تعیین a از گزینه low استفاده کنید کران پایین ثابت است که باعث گسترش منطقه می شود.