Wisej.NET Extensions
HomeNewsSupportVideos
  • Overview
  • Introduction
    • Extension Types
    • API
    • Concepts
    • Theme Builder
  • Icon Packs
    • Overview
    • BootstrapIcons
    • ElegantIcons
    • FontAwesome
    • MaterialDesign
    • ModernUI
    • VaadinIcons
    • VisualStudioIcons
  • Extensions
    • Themes
    • AceEditor
      • API
        • AceEditor
    • Amazon S3
      • API
        • S3FileSystemProvider
    • ASPNetControl
      • API
        • AspNetWrapper<T>
        • AspNetWrapperBase
        • HttpModule
        • HttpModuleStartup
    • Barcode
      • API
        • Barcode
        • BarcodeReader
        • BarcodeType
        • ScanEventArgs
        • ScanEventHandler
        • ScanMode
    • BingWallpaper
      • API
        • BingWallpaper
    • Brotli
      • API
        • Brotli
    • Bubbles
      • API
        • BubbleEventArgs
        • BubbleNotification
        • BubbleStyle
    • Camera
      • API
        • Camera
        • CameraErrorEventArgs
    • ChartJS
      • API
        • ChartClickEventArgs
        • ChartClickEventHandler
        • ChartJS
        • ChartType
        • DataLabelAlign
        • DataLabelAnchor
        • DataLabelTextAlignment
        • DataSet
        • DataSetCollection
        • OptionsAxisGridLines
        • OptionsBase
        • OptionsDataLabel
        • OptionsLegend
        • OptionsScales
        • OptionsTitle
        • OptionsTooltips
        • PointStyle
        • ScaleType
        • SteppedLine
    • Chat Control
      • API
    • CKEditor
      • API
        • CKEditor
        • CommandEventArgs
        • ExternalPlugin
        • LinkClickedEventArgs
    • ClearScript
      • API
        • ClearScript
        • EngineType
        • JScriptEngine
        • V8JavaScriptEngine
        • VBScriptEngine
    • ClientClipboard
      • API
    • ClientFileSystem
      • API
    • ColumnFilter
      • API
        • ColumnFilter
        • ColumnFilterPanel
        • SimpleColumnFilterPanel
        • WhereColumnFilterPanel
    • CoolClock
      • API
        • CoolClock
        • CoolClockSkin
        • CoolClockType
    • CountUp
      • API
        • CountUp
    • CustomWallpaper
      • API
        • CustomWallpaper
    • DataGridViewSummaryRow
      • API
        • DataGridViewSummaryRow
        • DataGridViewSummaryRowExtensions
        • SummaryType
    • FullCalendar
      • API
        • BusinessHours
        • ColumnHeaderFormats
        • DayClickEventArgs
        • Event
        • EventClickEventArgs
        • EventCollection
        • EventValueEventArgs
        • FullCalendar
        • ItemDropEventArgs
        • Resource
        • ResourceEventArgs
        • RetrieveVirtualEventEventArgs
        • ThemeSystem
        • ViewType
        • VirtualEventsNeededEventArgs
    • Geolocation
      • API
        • Geolocation
        • StatusCode
    • GoogleMaps
      • API
        • GeocoderLocationType
        • GeocoderResult
        • GoogleMap
        • LatLng
        • LatLngBounds
        • MapMouseEventArgs
        • MapPropertyChangedEventArgs
        • MarkerDragEventArgs
        • TravelMode
    • Html2Canvas
      • API
        • Html2Canvas
        • Html2CanvasOptions
    • jQueryKnob
      • API
        • Knob
        • KnobType
        • LineCapType
    • jSequence
      • API
        • ElementClickEventArgs
        • Sequence
    • JustGage
      • API
        • CustomSector
        • JustGage
    • NavigationBar
      • API
        • NavigationBar
        • NavigationBarItem
        • NavigationBarItemClickEventArgs
        • NavigationBarItemCollection
    • Notification
      • API
        • Notification
        • NotificationClickEventArgs
    • OfficeViewer
      • API
        • OfficeViewer
    • Pannellum
      • API
        • Pannellum
    • Polymer
      • API
        • PolymerComponent
        • PolymerWidget
    • ProgressCircle
      • API
        • ProgressCircle
    • RibbonBar
      • API
        • RibbonBar
        • RibbonBarAppButton
        • [RibbonBarCollectionBase<TOwner, TElement>](extensions/ribbonbar/api/wisej.web.ext.ribbonbar.ribbonb
        • RibbonBarGroup
        • RibbonBarGroupCollection
        • RibbonBarGroupEventArgs
        • RibbonBarItem
        • RibbonBarItemButton
        • RibbonBarItemButtonGroup
        • RibbonBarItemCheckBox
        • RibbonBarItemCollection
        • RibbonBarItemComboBox
        • RibbonBarItemControl
        • RibbonBarItemEventArgs
        • RibbonBarItemRadioButton
        • RibbonBarItemSeparator
        • RibbonBarItemSplitButton
        • RibbonBarItemTextBox
        • RibbonBarMenuItemEventArgs
        • RibbonBarPage
        • RibbonBarPageCollection
    • SideButton
      • API
        • SideButton
    • Signature
      • API
        • Signature
    • SmoothieChart
      • API
        • DataNeededEventArgs
        • InterpolationType
        • SmoothieChart
        • TimeSeries
        • TimeSeriesCollection
    • Speech
      • API
        • SpeechRecognition
        • SpeechRecognitionEventArgs
        • SpeechRecognitionResult
        • SpeechSynthesis
    • TaskBar
      • API
        • TaskBar
    • Tesseract
      • API
        • Tesseract
    • TinyEditor
      • API
        • TinyEditor
    • TinyMCE
      • API
        • TinyMCE
    • TourPanel
      • API
        • TourPanel
        • TourPanelEventArgs
        • TourStep
    • Translation
      • API
        • Translation
        • TranslationProviderBase
        • TranslationProviderYandex
        • TranslationResult
    • WebARIA
      • API
        • ARIA
        • Invalid
        • TriState
        • WebARIA
    • WebAuthn
      • API
        • Assertion
        • AttestationConveyancePreference
        • AuthenticatorAttachment
        • AuthenticatorData
        • AuthenticatorSelectionCriteria
        • AuthenticatorTransport
        • ClientData
        • COSEAlgorithmIdentifier
        • CredentialsResponse
        • PublicKey
        • PublicKeyCredentialDescriptor
        • PublicKeyCredentialParameters
        • PublicKeyCredentialUserEntity
        • RelyingParty
        • ResidentKeyRequirement
        • WebAuthn
    • WebShare
      • API
        • WebShare
    • XTerm
      • API
        • XTerm
  • Premium Extensions
    • Overview
    • Configuration
    • Webix
    • Syncfusion EJ1
    • Syncfusion EJ2
    • Telerik KendoUI
    • Infragistics IgniteUI
    • DevExpress DevExtreme
Powered by GitBook
On this page
  • Features
  • How to Use
  • Code sample

Was this helpful?

  1. Extensions

ChartJS

Simple yet flexible JavaScript charting for designers & developers

PreviousCameraErrorEventArgsNextAPI

Last updated 9 months ago

Was this helpful?

The extension component uses the excellent ChartJS widget to render amazing charts in real time. Please note that this extension is still under development and some advanced options are not yet available. Nevertheless, it’s quite an extension!

Features

The ChartJS Extension includes the following chart types:

  • Line

  • Bar

  • HorizontalBar

  • Radar

  • PolarArea

  • Pie

  • Doughnut

  • Bubble

  • Scatter

How to Use

The ChartJS extension can be added to a Wisej.NET project using NuGet Package Manager.

You can configure your instance by setting Chart specific Options.

For example, you can disable the tooltip using Options:

chartJS1.Options.Tooltips = new Wisej.Web.Ext.ChartJS.OptionsTooltips { Enabled = false };
ChartJS1.Options.Tooltips = New Wisej.Web.Ext.ChartJS.OptionsTooltips With {.Enabled = False}

Data is provided in DataSets.

Code sample

The code snippet below:

var data = new object[10];            
Random random = new Random();
for (int i = 0; i < 10; i++)
{
        data[i] = new Point(i, random.Next(10));
}
DataSet ds = chartJS1.DataSets.Add("ds1");
ds.Data = data;
ds.BackgroundColor = Color.Red;
Dim data(9) As Object
Dim random As New Random()
For i As Integer = 0 To 9
    data(i) = New Point(i, random.Next(10))
Next

Dim ds = ChartJS1.DataSets.Add("ds1")
ds.Data = data
ds.BackgroundColor = Color.Red

Creates the following chart:

You can add labels to the X axis like so:

// Numeric labels
this.chartJS1.Labels = new string[] {"1","2","3","4"};

// Day of the week labels
this.chartJS1.Labels = new string[] {"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"};
'Numeric labels
Me.ChartJS1.Labels = New String() {"1", "2", "3", "4"}

'Day of the week labels
Me.ChartJS1.Labels = New String() {"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"}

Make sure to set the labels of the chart either in the or via code. If there are no labels, the points on the graph will not be shown.

Find more information in our ChartJS example in or in .

Designer
C#
VB.NET
ChartJS
Logowisej-extensions/Wisej.Web.Ext.ChartJS at 3.0 · iceteagroup/wisej-extensionsGitHub
ChartJS Source Code
LogoWisej-3-ChartJS 3.0.9nuget