Intro

ApexCharts

Create stunning charts with endless capabilities directly from the Apex Charts Library.
Kindly go through the documentation to see the available options and the expected value

You Need to Set a chart_id in the Attributes Tab to initialize the chart

Demo

Attribute Documentation - Line/Bar/Area

  • Attributes for the Line/Bar/Area

    Attribute

    Description

    		Sample Data
    chart_colors

    Array of Color

    Colors for the chart’s data. When all colors of the array are used, it starts from the beginning.
    		['#546E7A', '#E91E63'];
    chart_height

    Number

    Height of the chart.
    		400
    chart_id

    String

    Each Chart is to have a different ID. And you need to set the ID to initialize the chart
    		olumise-chart
    chart_title

    String

    Text to display as a title of chart.
    		Olumise Chart
    chart_type

    String

    Specify the chart type: Available Options: line, area, bar
    		Line
    data_categories

    Array

    Categories are labels which are displayed on the x-axis.
    		[ 'Mon' , 'Tue' , 'Wed"]
    data_info

    Array

    Accepts an array of object for axis charts
    		[ { name: "Series 1", data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10] } ];
    grid_border_color

    Color

    Colors of grid borders / lines
    		#DB0913
    grid_dash

    Number

    Creates dashes in borders of svg path. Higher number creates more space between dashes in the border.
    		5
    horizontal_bar

    Boolean

    This option will turn a column chart into a horizontal bar chart.
    		False
    markers_color

    Color

    Sets the fill color(s) of the marker point.
    		#000
    markers_size

    Number

    Size of the marker point.
    		4
    row_grid_color

    Color

    Grid background color filling in row pattern
    		#023a3
    row_grid_opacity

    Number

    Opacity of the row background colors
    		0.4
    show_legend

    Boolean

    Whether to show or hide the legend container.
    		True
    show_toolbar

    Boolean

    Whether to show or hide the Toolbar.
    		True
    stroke_curve

    String

    In line / area charts, whether to draw smooth lines or straight lines. Available Options: straight: connect the points in straight lines. smooth: Uses the simplest smoothing function which produces flowing lines that are accurate
    		Smooth
    stroke_width

    Number

    Sets the width of border for svg path
    		3
    xaxis_title

    String

    Sets the title for the X Axis
    		Months in the Year
    yaxis_title

    String

    Sets the title for the Y Axis
    		Amount (Thousand)
    currency_symbol

    String

    Every Number/Amount is formatted well, you can add your custom currency sign
    		$
    xaxis_label_color

    Color

    Set the Color for the Label on the Xaxis
    		#023a3
    xaxis_title_color

    Color

    Set the Color for the Title on the Xaxis
    		#023a3
    yaxis_label_color

    Color

    Set the Color for the Label on the Yaxis
    		#023a3
    yaxis_title_color

    Color

    Set the Color for the Title on the Yaxis
    		#023a3
    legend_label_color

    Color

    Set the Color for the label of legend
    		#023a3

Attribute Documentation - Pie/Donut

  • Attributes for the Pie/Donut

    Attribute

    Description

    		Sample Data
    chart_start_angle

    Number

    A custom angle from which the pie/donut slices should start.
    		-90
    chart_end_angle

    Number

    A custom angle to which the pie/donut slices should end
    		90
    chart_id

    String

    Each Chart is to have a different ID. And you need to set the ID to initialize the chart
    		olumise-chart
    chart_colors

    Array of Color

    Colors for the chart’s data. When all colors of the array are used, it starts from the beginning.
    		['#546E7A', '#E91E63'];
    chart_height

    Number

    Height of the chart.
    		400
    chart_title

    String

    Text to display as a title of chart
    		Olumise Chart
    chart_type

    String

    Specify the chart type: Available Options: line, area, bar
    		Line
    data_info

    Array

    Accepts an array of object for axis charts
    		[ 45, 52, 38, 24, 33, 26, 21, 20 ];
    markers_color

    Color

    Sets the fill color(s) of the marker point.
    		#000
    markers_size

    Number

    Size of the marker point.
    		4
    show_legend

    Boolean

    Whether to show or hide the legend container.
    		True
    show_toolbar

    Boolean

    Whether to show or hide the Toolbar.
    		True
    stroke_size

    Number

    Sets the width of border for svg path
    		3
    show_stroke

    Boolean

    To show or hide path-stroke / line
    		True
    chart_labels

    Array

    Labels can be set instead of setting xaxis categories option
    		['Apples', 'Oranges', 'Berries', 'Grapes']
    donut_size

    String

    Donut / ring size in percentage relative to the total pie area.
    		60%
    show_data_label

    Boolean

    To determine whether to show dataLabels or not
    		True
    data_label_offset

    Number

    Offset by which labels will move outside / inside of the donut area
    		-1
    show_donut_total_label

    Boolean

    Show the total of all the series in the inner area of donut
    		True
    legend_label_color

    Color

    Set the Color for the Label of the Legend
    		#000
    donut_label_color

    Color

    Set the Color for the label in the middle of the donut
    		#000