- A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time.
- It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.
+ A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time.
+ It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.
- For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette.
- These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
+ For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette.
+ These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
@@ -31,8 +31,8 @@
- By default, the chart is using the default locale of the platform on which it is running.
- In the following example, you will see the chart in the German locale (de_DE).
+ By default, the chart is using the default locale of the platform on which it is running.
+ In the following example, you will see the chart in the German locale (de_DE).
@@ -48,9 +48,12 @@
+
+
+
@code {
- private readonly string pageUrl = "/charts/line-chart";
- private readonly string title = "Blazor Line Chart";
- private readonly string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
- private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png";
+ private readonly string pageUrl = "/charts/line-chart";
+ private readonly string title = "Blazor Line Chart";
+ private readonly string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
+ private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png";
}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_07_Time_Axis.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_07_Time_Axis.razor
new file mode 100644
index 000000000..eb12a1062
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_07_Time_Axis.razor
@@ -0,0 +1,95 @@
+
+
+@* You need to enable a date adapter for ChartJS, e.g. Luxon: *@
+
+
+
+
+
+
+
+
+
+@code {
+ private LineChart lineChart = default!;
+ private LineChartOptions lineChartOptions = default!;
+ private ChartData chartData = default!;
+ private DateTime startOfYear = new DateTime( DateTime.Today.Year, 1, 1 );
+
+ protected override void OnInitialized()
+ {
+ var colors = ColorUtility.CategoricalTwelveColors;
+
+ var rng = new Random();
+ var labels = new List();
+ var data = new List();
+ for( int i = 0; i < 20; i++ )
+ {
+ labels.Add( startOfYear.AddDays( rng.Next( 0, 365 ) ).ToString( "yyyy-MM-dd" ) );
+ data.Add( rng.Next( 0, 200 ) );
+ }
+
+ var datasets = new List();
+ labels.Sort();
+ var dataset = new LineChartDataset
+ {
+ Label = "Value",
+ Data = data,
+ BackgroundColor = colors[ 0 ],
+ BorderColor = colors[ 0 ],
+ BorderWidth = 2,
+ HoverBorderWidth = 4
+ };
+ datasets.Add( dataset );
+
+ chartData = new ChartData { Labels = labels, Datasets = datasets };
+
+ lineChartOptions = new();
+ lineChartOptions.Responsive = true;
+ lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };
+
+ lineChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Day", Display = true };
+ lineChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Value", Display = true };
+ }
+
+ protected async Task TextLabels()
+ {
+ // Set the defaults
+ lineChartOptions.Scales.X!.Type = null;
+ lineChartOptions.Scales.X!.Time = null;
+
+ lineChartOptions.Scales.X!.Min = null;
+ lineChartOptions.Scales.X!.Max = null;
+
+ await lineChart.UpdateAsync( chartData, lineChartOptions );
+ }
+
+ protected async Task DateLabels( string format )
+ {
+ lineChartOptions.Scales.X!.Type = ChartAxesType.Time;
+ lineChartOptions.Scales.X!.Time = new ChartTimeAxisOptions()
+ {
+ TooltipFormat = format,
+ DisplayFormats = new
+ {
+ month = format
+ },
+ Unit = ChartTimeUnit.Month
+ };
+
+ lineChartOptions.Scales.X!.Min = startOfYear.ToString( "yyyy-MM-dd" );
+ lineChartOptions.Scales.X!.Max = startOfYear.AddYears( 1 ).ToString( "yyyy-MM-dd" );
+
+ await lineChart.UpdateAsync( chartData, lineChartOptions );
+ }
+
+ protected override async Task OnAfterRenderAsync( bool firstRender )
+ {
+ if( firstRender )
+ {
+ await lineChart.InitializeAsync( chartData, lineChartOptions );
+ }
+ await base.OnAfterRenderAsync( firstRender );
+ }
+
+}
\ No newline at end of file
diff --git a/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs
index 686eebea3..d8311d895 100644
--- a/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs
+++ b/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs
@@ -1,4 +1,6 @@
-namespace BlazorBootstrap;
+using System;
+
+namespace BlazorBootstrap;
public interface IChartOptions { }
@@ -7,43 +9,43 @@ public interface IChartOptions { }
///
public class ChartOptions : IChartOptions
{
- #region Properties, Indexers
-
- //aspectRatio
- //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options
-
- ///
- /// Gets or sets the locale.
- /// By default, the chart is using the default locale of the platform which is running on.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public string? Locale { get; set; }
-
- ///
- /// Maintain the original canvas aspect ratio (width / height) when resizing.
- /// .
- ///
- ///
- /// Default value is .
- ///
- public bool MaintainAspectRatio { get; set; } = true;
-
- //onResize
- //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options
-
- //resizeDelay
- //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options
-
- ///
- /// Resizes the chart canvas when its container does.
- /// . ///
- ///
- ///
- /// Default value is .
- ///
- public bool Responsive { get; set; }
-
- #endregion
+ #region Properties, Indexers
+
+ //aspectRatio
+ //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options
+
+ ///
+ /// Gets or sets the locale.
+ /// By default, the chart is using the default locale of the platform which is running on.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public string? Locale { get; set; }
+
+ ///
+ /// Maintain the original canvas aspect ratio (width / height) when resizing.
+ /// .
+ ///
+ ///
+ /// Default value is .
+ ///
+ public bool MaintainAspectRatio { get; set; } = true;
+
+ //onResize
+ //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options
+
+ //resizeDelay
+ //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options
+
+ ///
+ /// Resizes the chart canvas when its container does.
+ /// . ///
+ ///
+ ///
+ /// Default value is .
+ ///
+ public bool Responsive { get; set; }
+
+ #endregion
}
///
@@ -52,22 +54,22 @@ public class ChartOptions : IChartOptions
///
public class ChartLayout
{
- #region Properties, Indexers
-
- ///
- /// Apply automatic padding so visible elements are completely drawn.
- ///
- ///
- /// Default value is .
- ///
- public bool AutoPadding { get; set; } = true;
-
- ///
- /// The padding to add inside the chart.
- ///
- public int Padding { get; set; } = 0;
-
- #endregion
+ #region Properties, Indexers
+
+ ///
+ /// Apply automatic padding so visible elements are completely drawn.
+ ///
+ ///
+ /// Default value is .
+ ///
+ public bool AutoPadding { get; set; } = true;
+
+ ///
+ /// The padding to add inside the chart.
+ ///
+ public int Padding { get; set; } = 0;
+
+ #endregion
}
///
@@ -76,74 +78,74 @@ public class ChartLayout
///
public class Interaction
{
- #region Fields and Constants
+ #region Fields and Constants
- private InteractionMode mode;
+ private InteractionMode mode;
- #endregion
+ #endregion
- #region Constructors
+ #region Constructors
- public Interaction()
- {
- Mode = InteractionMode.Nearest;
- }
+ public Interaction()
+ {
+ Mode = InteractionMode.Nearest;
+ }
+
+ #endregion
+
+ #region Methods
+
+ private void SetMode( InteractionMode interactionMode ) =>
+ ChartInteractionMode = interactionMode switch
+ {
+ InteractionMode.Dataset => "dataset",
+ InteractionMode.Index => "index",
+ InteractionMode.Nearest => "nearest",
+ InteractionMode.Point => "point",
+ InteractionMode.X => "x",
+ InteractionMode.Y => "y",
+ _ => ""
+ };
+
+ #endregion
+
+ #region Properties, Indexers
- #endregion
-
- #region Methods
-
- private void SetMode(InteractionMode interactionMode) =>
- ChartInteractionMode = interactionMode switch
- {
- InteractionMode.Dataset => "dataset",
- InteractionMode.Index => "index",
- InteractionMode.Nearest => "nearest",
- InteractionMode.Point => "point",
- InteractionMode.X => "x",
- InteractionMode.Y => "y",
- _ => ""
- };
-
- #endregion
-
- #region Properties, Indexers
-
- //axis
- //https://www.chartjs.org/docs/latest/configuration/interactions.html#interactions
-
- ///
- /// Sets which elements appear in the interaction.
- ///
- [JsonPropertyName("mode")]
- public string ChartInteractionMode { get; private set; }
-
- ///
- /// if , the interaction mode only applies when the mouse position intersects an item on the chart.
- ///
- ///
- /// Default value is .
- ///
- public bool Intersect { get; set; } = true;
-
- ///
- /// Sets which elements appear in the tooltip. See Interaction Modes for details.
- ///
- [JsonIgnore]
- public InteractionMode Mode
+ //axis
+ //https://www.chartjs.org/docs/latest/configuration/interactions.html#interactions
+
+ ///
+ /// Sets which elements appear in the interaction.
+ ///
+ [JsonPropertyName( "mode" )]
+ public string ChartInteractionMode { get; private set; }
+
+ ///
+ /// if , the interaction mode only applies when the mouse position intersects an item on the chart.
+ ///
+ ///
+ /// Default value is .
+ ///
+ public bool Intersect { get; set; } = true;
+
+ ///
+ /// Sets which elements appear in the tooltip. See Interaction Modes for details.
+ ///
+ [JsonIgnore]
+ public InteractionMode Mode
+ {
+ get => mode;
+ set
{
- get => mode;
- set
- {
- mode = value;
- SetMode(value);
- }
+ mode = value;
+ SetMode( value );
}
+ }
- #endregion
+ #endregion
- //includeInvisible
- //https://www.chartjs.org/docs/latest/configuration/interactions.html#interactions
+ //includeInvisible
+ //https://www.chartjs.org/docs/latest/configuration/interactions.html#interactions
}
public enum InteractionMode
@@ -151,130 +153,136 @@ public enum InteractionMode
///
/// Finds items in the same dataset.
///
- Dataset,
+ Dataset,
///
/// Finds item at the same index.
///
- Index,
+ Index,
///
/// Gets the items that are at the nearest distance to the point.
///
- Nearest,
+ Nearest,
///
/// Finds all of the items that intersect the point
///
- Point,
+ Point,
///
/// Returns all items that would intersect based on the X coordinate of the position only. Would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts.
///
- X,
+ X,
///
/// Returns all items that would intersect based on the Y coordinate of the position. This would be useful for a horizontal cursor implementation. Note that this only applies to cartesian charts.
///
- Y
+ Y
}
public class Scales
{
- #region Properties, Indexers
+ #region Properties, Indexers
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public ChartAxes? X { get; set; } = new();
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] public ChartAxes? X { get; set; } = new();
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public ChartAxes? Y { get; set; } = new();
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] public ChartAxes? Y { get; set; } = new();
- #endregion
+ #endregion
}
public class ChartAxesType
{
- #region Fields and Constants
+ #region Fields and Constants
- public static readonly string Linear = "linear";
- public static readonly string Logarithmic = "logarithmic";
- public static readonly string Category = "category";
- public static readonly string Time = "time";
- public static readonly string Timeseries = "timeseries";
+ public static readonly string Linear = "linear";
+ public static readonly string Logarithmic = "logarithmic";
+ public static readonly string Category = "category";
+ public static readonly string Time = "time";
+ public static readonly string Timeseries = "timeseries";
- #endregion
+ #endregion
}
public class ChartAxes
{
- #region Properties, Indexers
-
- public bool BeginAtZero { get; set; } = true;
-
- ///
- /// Define options for the border that run perpendicular to the axis.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public ChartAxesBorder? Border { get; set; }
-
- ///
- /// Gets or sets the grid configuration.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public ChartAxesGrid? Grid { get; set; }
-
- ///
- /// User defined maximum number for the scale, overrides maximum value from data.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public double? Max { get; set; }
-
- ///
- /// User defined minimum number for the scale, overrides minimum value from data.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public double? Min { get; set; }
-
- ///
- /// Should the data be stacked.
- /// By default data is not stacked.
- /// If the stacked option of the value scale (y-axis on horizontal chart) is true, positive and negative values are stacked
- /// separately.
- ///
- public bool Stacked { get; set; }
-
- ///
- /// Adjustment used when calculating the maximum data value.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public double? SuggestedMax { get; set; }
-
- ///
- /// Adjustment used when calculating the minimum data value.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public double? SuggestedMin { get; set; }
-
- ///
- /// Gets or sets the tick configuration.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public ChartAxesTicks? Ticks { get; set; }
-
- ///
- /// Gets or sets the title configuration.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public ChartAxesTitle? Title { get; set; }
-
- ///
- /// Gets or sets the index scale type. See .
- ///
- ///
- /// Default value is .
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public string? Type { get; set; }
-
- #endregion
+ #region Properties, Indexers
+
+ public bool BeginAtZero { get; set; } = true;
+
+ ///
+ /// Define options for the border that run perpendicular to the axis.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public ChartAxesBorder? Border { get; set; }
+
+ ///
+ /// Gets or sets the grid configuration.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public ChartAxesGrid? Grid { get; set; }
+
+ ///
+ /// User defined maximum number for the scale, overrides maximum value from data.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public object? Max { get; set; }
+
+ ///
+ /// User defined minimum number for the scale, overrides minimum value from data.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public object? Min { get; set; }
+
+ ///
+ /// Should the data be stacked.
+ /// By default data is not stacked.
+ /// If the stacked option of the value scale (y-axis on horizontal chart) is true, positive and negative values are stacked
+ /// separately.
+ ///
+ public bool Stacked { get; set; }
+
+ ///
+ /// Adjustment used when calculating the maximum data value.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public double? SuggestedMax { get; set; }
+
+ ///
+ /// Adjustment used when calculating the minimum data value.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public double? SuggestedMin { get; set; }
+
+ ///
+ /// Gets or sets the tick configuration.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public ChartAxesTicks? Ticks { get; set; }
+
+ ///
+ /// Gets or sets the title configuration.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public ChartAxesTitle? Title { get; set; }
+
+ ///
+ /// Gets or sets the index scale type. See .
+ ///
+ ///
+ /// Default value is .
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public string? Type { get; set; }
+
+ ///
+ /// Gets or sets the time axis configuration
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public ChartTimeAxisOptions? Time { get; set; }
+
+ #endregion
}
///
@@ -283,46 +291,46 @@ public class ChartAxes
///
public class ChartAxesBorder
{
- #region Properties, Indexers
-
- ///
- /// The color of the border line.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public string? Color { get; set; }
-
- ///
- /// Length and spacing of dashes on grid lines
- ///
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public List? Dash { get; set; }
-
- ///
- /// Offset for line dashes.
- ///
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public int? DashOffset { get; set; }
-
- ///
- /// If , draw a border at the edge between the axis and the chart area.
- ///
- public bool Display { get; set; } = true;
-
- ///
- /// The width of the border line.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public int? Width { get; set; }
-
- ///
- /// z-index of the border layer. Values <= 0 are drawn under datasets, > 0 on top.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public int? Z { get; set; }
-
- #endregion
+ #region Properties, Indexers
+
+ ///
+ /// The color of the border line.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public string? Color { get; set; }
+
+ ///
+ /// Length and spacing of dashes on grid lines
+ ///
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public List? Dash { get; set; }
+
+ ///
+ /// Offset for line dashes.
+ ///
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public int? DashOffset { get; set; }
+
+ ///
+ /// If , draw a border at the edge between the axis and the chart area.
+ ///
+ public bool Display { get; set; } = true;
+
+ ///
+ /// The width of the border line.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public int? Width { get; set; }
+
+ ///
+ /// z-index of the border layer. Values <= 0 are drawn under datasets, > 0 on top.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public int? Z { get; set; }
+
+ #endregion
}
///
@@ -331,99 +339,99 @@ public class ChartAxesBorder
///
public class ChartAxesGrid
{
- #region Properties, Indexers
-
- ///
- /// If , gridlines are circular (on radar and polar area charts only).
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public bool? Circular { get; set; }
-
- ///
- /// Color of the grid axis lines. Here one can write a CSS method or even a JavaScript method for a dynamic color.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public string? Color { get; set; }
-
- ///
- /// If false, do not display grid lines for this axis.
- ///
- public bool Display { get; set; } = true;
-
- ///
- /// If , draw lines on the chart area inside the axis lines. This is useful when there are multiple
- /// axes and you need to control which grid lines are drawn.
- ///
- public bool DrawOnChartArea { get; set; } = true;
-
- ///
- /// If , draw lines beside the ticks in the axis area beside the chart.
- ///
- public bool DrawTicks { get; set; } = true;
-
- ///
- /// Stroke width of grid lines.
- ///
- public int LineWidth { get; set; } = 1;
-
- ///
- /// If , grid lines will be shifted to be between labels. This is set to true for a bar chart by
- /// default.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public bool? Offset { get; set; } = false;
-
- ///
- /// Length and spacing of the tick mark line.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public List? TickBorderDash { get; set; }
-
- ///
- /// Offset for the line dash of the tick mark.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public int? TickBorderDashOffset { get; set; }
-
- ///
- /// Color of the tick line. If unset, defaults to the grid line color.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public string? TickColor { get; set; }
-
- ///
- /// Length in pixels that the grid lines will draw into the axis area.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public int? TickLength { get; set; }
-
- ///
- /// Width of the tick mark in pixels.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public int? TickWidth { get; set; }
-
- ///
- /// z-index of the gridline layer. Values <= 0 are drawn under datasets, > 0 on top.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public int? Z { get; set; }
-
- #endregion
+ #region Properties, Indexers
+
+ ///
+ /// If , gridlines are circular (on radar and polar area charts only).
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public bool? Circular { get; set; }
+
+ ///
+ /// Color of the grid axis lines. Here one can write a CSS method or even a JavaScript method for a dynamic color.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public string? Color { get; set; }
+
+ ///
+ /// If false, do not display grid lines for this axis.
+ ///
+ public bool Display { get; set; } = true;
+
+ ///
+ /// If , draw lines on the chart area inside the axis lines. This is useful when there are multiple
+ /// axes and you need to control which grid lines are drawn.
+ ///
+ public bool DrawOnChartArea { get; set; } = true;
+
+ ///
+ /// If , draw lines beside the ticks in the axis area beside the chart.
+ ///
+ public bool DrawTicks { get; set; } = true;
+
+ ///
+ /// Stroke width of grid lines.
+ ///
+ public int LineWidth { get; set; } = 1;
+
+ ///
+ /// If , grid lines will be shifted to be between labels. This is set to true for a bar chart by
+ /// default.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public bool? Offset { get; set; } = false;
+
+ ///
+ /// Length and spacing of the tick mark line.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public List? TickBorderDash { get; set; }
+
+ ///
+ /// Offset for the line dash of the tick mark.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public int? TickBorderDashOffset { get; set; }
+
+ ///
+ /// Color of the tick line. If unset, defaults to the grid line color.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public string? TickColor { get; set; }
+
+ ///
+ /// Length in pixels that the grid lines will draw into the axis area.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public int? TickLength { get; set; }
+
+ ///
+ /// Width of the tick mark in pixels.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public int? TickWidth { get; set; }
+
+ ///
+ /// z-index of the gridline layer. Values <= 0 are drawn under datasets, > 0 on top.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public int? Z { get; set; }
+
+ #endregion
}
public enum TicksAlignment
{
- Center, // default
- Start,
- End
+ Center, // default
+ Start,
+ End
}
public enum TitleAlignment
{
- Center, // default
- Start,
- End
+ Center, // default
+ Start,
+ End
}
///
@@ -432,96 +440,96 @@ public enum TitleAlignment
///
public class ChartAxesTicks
{
- #region Fields and Constants
-
- private TicksAlignment ticksAlignment;
-
- #endregion
-
- #region Methods
-
- private void SetTicksAlignment(TicksAlignment interactionMode) =>
- Alignment = interactionMode switch
- {
- TicksAlignment.Center => "center",
- TicksAlignment.Start => "start",
- TicksAlignment.End => "end",
- _ => null
- };
-
- #endregion
-
- #region Properties, Indexers
-
- [JsonPropertyName("align")]
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public string? Alignment { get; private set; }
-
- ///
- /// Color of label backdrops
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public string? BackdropColor { get; set; }
-
- ///
- /// Padding of label backdrop
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public int? BackdropPadding { get; set; }
-
- ///
- /// Color of ticks
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public string? Color { get; set; }
-
- ///
- /// If , show tick labels.
- ///
- public bool Display { get; set; } = true;
-
- ///
- /// defines options for the major tick marks that are generated by the axis.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public ChartAxesTicksMajor? Major { get; set; }
-
- ///
- /// Sets the offset of the tick labels from the axis
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public int? Padding { get; set; }
-
- ///
- /// If , draw a background behind the tick labels.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public bool? ShowLabelBackdrop { get; set; }
-
- ///
- /// The color of the stroke around the text.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public string? TextStrokeColor { get; set; }
-
- ///
- /// Stroke width around the text.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public int? TextStrokeWidth { get; set; }
-
- [JsonIgnore]
- public TicksAlignment TicksAlignment
+ #region Fields and Constants
+
+ private TicksAlignment ticksAlignment;
+
+ #endregion
+
+ #region Methods
+
+ private void SetTicksAlignment( TicksAlignment interactionMode ) =>
+ Alignment = interactionMode switch
+ {
+ TicksAlignment.Center => "center",
+ TicksAlignment.Start => "start",
+ TicksAlignment.End => "end",
+ _ => null
+ };
+
+ #endregion
+
+ #region Properties, Indexers
+
+ [JsonPropertyName( "align" )]
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public string? Alignment { get; private set; }
+
+ ///
+ /// Color of label backdrops
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public string? BackdropColor { get; set; }
+
+ ///
+ /// Padding of label backdrop
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public int? BackdropPadding { get; set; }
+
+ ///
+ /// Color of ticks
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public string? Color { get; set; }
+
+ ///
+ /// If , show tick labels.
+ ///
+ public bool Display { get; set; } = true;
+
+ ///
+ /// defines options for the major tick marks that are generated by the axis.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public ChartAxesTicksMajor? Major { get; set; }
+
+ ///
+ /// Sets the offset of the tick labels from the axis
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public int? Padding { get; set; }
+
+ ///
+ /// If , draw a background behind the tick labels.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public bool? ShowLabelBackdrop { get; set; }
+
+ ///
+ /// The color of the stroke around the text.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public string? TextStrokeColor { get; set; }
+
+ ///
+ /// Stroke width around the text.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public int? TextStrokeWidth { get; set; }
+
+ [JsonIgnore]
+ public TicksAlignment TicksAlignment
+ {
+ get => ticksAlignment;
+ set
{
- get => ticksAlignment;
- set
- {
- ticksAlignment = value;
- SetTicksAlignment(value);
- }
+ ticksAlignment = value;
+ SetTicksAlignment( value );
}
+ }
- #endregion
+ #endregion
}
///
@@ -529,15 +537,15 @@ public TicksAlignment TicksAlignment
///
public class ChartAxesTicksMajor
{
- #region Properties, Indexers
+ #region Properties, Indexers
- ///
- /// If , major ticks are generated. A major tick will affect auto skipping and major will be defined
- /// on ticks in the scriptable options context.
- ///
- public bool Enabled { get; set; } = false;
+ ///
+ /// If , major ticks are generated. A major tick will affect auto skipping and major will be defined
+ /// on ticks in the scriptable options context.
+ ///
+ public bool Enabled { get; set; } = false;
- #endregion
+ #endregion
}
///
@@ -546,66 +554,66 @@ public class ChartAxesTicksMajor
///
public class ChartAxesTitle
{
- #region Fields and Constants
+ #region Fields and Constants
- private TitleAlignment titleAlignment;
+ private TitleAlignment titleAlignment;
- #endregion
+ #endregion
- #region Methods
+ #region Methods
- private void SetTitleAlignment(TitleAlignment interactionMode) =>
- Alignment = interactionMode switch
- {
- TitleAlignment.Center => "center", // default
- TitleAlignment.Start => "start",
- TitleAlignment.End => "end",
- _ => null
- };
+ private void SetTitleAlignment( TitleAlignment interactionMode ) =>
+ Alignment = interactionMode switch
+ {
+ TitleAlignment.Center => "center", // default
+ TitleAlignment.Start => "start",
+ TitleAlignment.End => "end",
+ _ => null
+ };
- #endregion
+ #endregion
- #region Properties, Indexers
+ #region Properties, Indexers
- ///
- /// Alignment of the title.
- /// Options are: 'start', 'center', and 'end'
- ///
- [JsonPropertyName("align")]
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public string? Alignment { get; private set; }
+ ///
+ /// Alignment of the title.
+ /// Options are: 'start', 'center', and 'end'
+ ///
+ [JsonPropertyName( "align" )]
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public string? Alignment { get; private set; }
- ///
- /// Color of text.
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public string? Color { get; set; } = "black";
+ ///
+ /// Color of text.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public string? Color { get; set; } = "black";
- ///
- /// Is the title shown?
- ///
- public bool Display { get; set; }
+ ///
+ /// Is the title shown?
+ ///
+ public bool Display { get; set; }
- public ChartFont? Font { get; set; } = new();
+ public ChartFont? Font { get; set; } = new();
- //fullSize
- //padding
- //position
+ //fullSize
+ //padding
+ //position
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? Text { get; set; }
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] public string? Text { get; set; }
- [JsonIgnore]
- public TitleAlignment TitleAlignment
+ [JsonIgnore]
+ public TitleAlignment TitleAlignment
+ {
+ get => titleAlignment;
+ set
{
- get => titleAlignment;
- set
- {
- titleAlignment = value;
- SetTitleAlignment(value);
- }
+ titleAlignment = value;
+ SetTitleAlignment( value );
}
+ }
- #endregion
+ #endregion
}
///
@@ -613,39 +621,116 @@ public TitleAlignment TitleAlignment
///
public class ChartFont
{
- #region Properties, Indexers
-
- ///
- /// Default font family for all text, follows CSS font-family options.
- /// 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public string? Family { get; set; }
-
- ///
- /// Height of an individual line of text
- ///
- ///
- public double LineHeight { get; set; } = 1.2;
-
- ///
- /// Default font size (in px) for text. Does not apply to radialLinear scale point labels.
- ///
- public int Size { get; set; } = 12;
-
- ///
- /// Default font style. Does not apply to tooltip title or footer. Does not apply to chart title.
- /// Follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public string? Style { get; set; }
-
- ///
- /// Default font weight (boldness).
- ///
- ///
- [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
- public string? Weight { get; set; } = "bold";
-
- #endregion
+ #region Properties, Indexers
+
+ ///
+ /// Default font family for all text, follows CSS font-family options.
+ /// 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public string? Family { get; set; }
+
+ ///
+ /// Height of an individual line of text
+ ///
+ ///
+ public double LineHeight { get; set; } = 1.2;
+
+ ///
+ /// Default font size (in px) for text. Does not apply to radialLinear scale point labels.
+ ///
+ public int Size { get; set; } = 12;
+
+ ///
+ /// Default font style. Does not apply to tooltip title or footer. Does not apply to chart title.
+ /// Follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public string? Style { get; set; }
+
+ ///
+ /// Default font weight (boldness).
+ ///
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public string? Weight { get; set; } = "bold";
+
+ #endregion
+}
+
+public enum ChartTimeUnit
+{
+ Millisecond,
+ Second,
+ Minute,
+ Hour,
+ Day,
+ Week,
+ Month,
+ Quarter,
+ Year
}
+
+///
+///
+///
+public class ChartTimeAxisOptions
+{
+ #region Properties, Indexers
+
+ ///
+ /// Sets how different time units are displayed.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public object? DisplayFormats { get; set; }
+
+ ///
+ /// If boolean and true and the unit is set to 'week', then the first day of the week will be Monday. Otherwise, it will be Sunday. If number, the index of the first day of the week (0 - Sunday, 6 - Saturday)
+ ///
+ [JsonIgnore]
+ public DayOfWeek? IsoWeekday { get; set; }
+
+ [JsonInclude]
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ private int? isoWeekDay => (int?)IsoWeekday;
+
+ ///
+ /// If defined, dates will be rounded to the start of this unit. See Units below for the allowed units.
+ ///
+ [JsonIgnore]
+ public ChartTimeUnit? Round { get; set; }
+
+
+ [JsonInclude]
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ private string round => Round?.ToString().ToLower();
+
+ ///
+ /// The format string to use for the tooltip.
+ ///
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ public string? TooltipFormat { get; set; }
+
+ ///
+ /// If defined, will force the unit to be a certain type. See Units section below for details.
+ ///
+ [JsonIgnore]
+ public ChartTimeUnit? Unit { get; set; }
+
+ [JsonInclude]
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ private string unit => Unit?.ToString().ToLower();
+
+ ///
+ /// The minimum display format to be used for a time unit.
+ ///
+ [JsonIgnore]
+ public ChartTimeUnit? MinUnit { get; set; }
+
+
+ [JsonInclude]
+ [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )]
+ private string minUnit => MinUnit?.ToString().ToLower();
+
+ #endregion
+}
\ No newline at end of file