add_control( 'data_source', [ 'label' => esc_html__('Data Source', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'custom', 'options' => [ 'custom' => esc_html__('Custom', 'king-addons'), 'pro-csv' => 'CSV' . ' ' . esc_html__('File', 'king-addons') . ' (Pro)', ], 'frontend_available' => true, ] ); } protected function register_controls() { $this->start_controls_section( 'section_chart_general', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('General', 'king-addons'), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control_choose_chart_data_source(); Core::renderUpgradeProNotice($this, Controls_Manager::RAW_HTML, 'charts', 'data_source', ['pro-csv']); $this->add_control( 'csv_source', [ 'label' => esc_html__('CSV Source', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'url', 'options' => [ 'url' => esc_html__('Remote URL', 'king-addons'), 'file' => esc_html__('File', 'king-addons'), ], 'condition' => [ 'data_source' => 'csv', ], 'frontend_available' => true, ] ); $this->add_control( 'data_csv_separator', [ 'label' => esc_html__('Separator', 'king-addons'), 'type' => Controls_Manager::TEXT, 'default' => ',', 'label_block' => true, 'condition' => [ 'data_source' => 'csv', ], ] ); $this->add_control( 'data_source_csv_url', [ 'label' => esc_html__('Remote URL', 'king-addons'), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'label_block' => true, 'condition' => [ 'data_source' => 'csv', 'csv_source' => 'url', ], ] ); $this->add_control( 'data_source_csv_file', [ 'label' => esc_html__('Upload CSV File', 'king-addons'), 'type' => Controls_Manager::MEDIA, 'dynamic' => [' active' => true, ], 'media_type' => [], 'label_block' => true, 'condition' => [ 'data_source' => 'csv', 'csv_source' => 'file', ], ] ); $this->add_control( 'chart_type', [ 'label' => esc_html__('Chart Styles', 'king-addons'), 'type' => Controls_Manager::SELECT, 'description' => esc_html__('Doughnut, pie and polar area charts only work with custom data source', 'king-addons'), 'default' => 'bar', 'options' => [ 'bar' => esc_html__('Bar Vertical', 'king-addons'), 'bar_horizontal' => esc_html__('Bar Horizontal', 'king-addons'), 'line' => esc_html__('Line', 'king-addons'), 'radar' => esc_html__('Radar', 'king-addons'), 'doughnut' => esc_html__('Doughnut', 'king-addons'), 'pie' => esc_html__('Pie', 'king-addons'), 'polarArea' => esc_html__('Polar Area', 'king-addons'), ], 'separator' => 'before' ] ); $this->add_control( 'data_type', [ 'label' => esc_html__('Data Grid Type', 'king-addons'), 'type' => Controls_Manager::SELECT, 'options' => [ 'linear' => esc_html__('Linear', 'king-addons'), 'logarithmic' => esc_html__('Logarithmic', 'king-addons'), ], 'default' => 'linear', 'condition' => [ 'chart_type' => ['bar', 'bar_horizontal', 'line'] ], 'frontend_available' => true, ] ); $this->add_control( 'column_width_x', [ 'label' => esc_html__('Column Width', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => 0.5, 'step' => 0.1, 'min' => 0, 'max' => 1, 'frontend_available' => true, 'separator' => 'before', 'condition' => [ 'chart_type' => ['bar', 'bar_horizontal'], ] ] ); $this->add_control( 'exclude_dataset_on_click', [ 'label' => esc_html__('Exclude Data on Legend Click', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'return_value' => 'yes', 'separator' => 'before' ] ); $this->add_control( 'stacked_bar_chart', [ 'label' => esc_html__('Enable Stacked Chart', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'return_value' => 'yes', 'condition' => [ 'chart_type' => ['bar', 'bar_horizontal', 'radar', 'doughnut', 'pie'] ] ] ); $this->add_control( 'inner_datalabels', [ 'label' => esc_html__('Show Data Values', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'false', 'return_value' => 'true', 'condition' => [ 'chart_type' => ['bar', 'bar_horizontal', 'line', ''] ] ] ); $this->add_control( 'enable_min_max', [ 'label' => esc_html__('Min-Max Values', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'return_value' => 'yes', 'separator' => 'before', 'condition' => [ 'chart_type!' => ['doughnut', 'polarArea', 'pie'], ] ] ); $this->add_control( 'min_value', [ 'label' => esc_html__('Min. Value', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => -100, 'condition' => [ 'enable_min_max' => 'yes', ] ] ); $this->add_control( 'max_value', [ 'label' => esc_html__('Max. Value', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => 100, 'condition' => [ 'enable_min_max' => 'yes', ] ] ); $this->add_control( 'animations_heading', [ 'label' => esc_html__('Animation', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'chart_animation', [ 'label' => esc_html__('Animation', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'return_value' => 'yes', 'chart_type' => ['line', 'radar'] ] ); $this->add_control( 'chart_animation_loop', [ 'label' => esc_html__('Loop', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'return_value' => 'yes', 'condition' => [ 'chart_animation' => 'yes', 'chart_type' => ['line', 'radar'] ] ] ); $this->add_control( 'chart_animation_duration', [ 'label' => esc_html__('Animation Duration (ms)', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => 1000, 'min' => 1, 'condition' => [ 'chart_animation' => 'yes', 'chart_type' => ['radar', 'line'] ] ] ); $this->add_control( 'animation_transition_type', [ 'label' => esc_html__('Animation Timing', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'linear', 'options' => [ 'linear' => 'linear', 'easeInBack' => 'easeInBack', 'easeInBounce' => 'easeInBounce', 'easeInCirc' => 'easeInCirc', 'easeInCubic' => 'easeInCubic', 'easeInElastic' => 'easeInElastic', 'easeInExpo' => 'easeInExpo', 'easeInOutBack' => 'easeInOutBack', 'easeInOutBounce' => 'easeInOutBounce', 'easeInOutCirc' => 'easeInOutCirc', 'easeInOutCubic' => 'easeInOutCubic', 'easeInOutElastic' => 'easeInOutElastic', 'easeInOutExpo' => 'easeInOutExpo', 'easeInOutQuad' => 'easeInOutQuad', 'easeInOutQuart' => 'easeInOutQuart', 'easeInOutQuint' => 'easeInOutQuint', 'easeInOutSine' => 'easeInOutSine', 'easeInQuad' => 'easeInQuad', 'easeInQuart' => 'easeInQuart', 'easeInQuint' => 'easeInQuint', 'easeInSine' => 'easeInSine', 'easeOutBack' => 'easeOutBack', 'easeOutBounce' => 'easeOutBounce', 'easeOutCirc' => 'easeOutCirc', 'easeOutCubic' => 'easeOutCubic', 'easeOutElastic' => 'easeOutElastic', 'easeOutExpo' => 'easeOutExpo', 'easeOutQuad' => 'easeOutQuad', 'easeOutQuart' => 'easeOutQuart', 'easeOutQuint' => 'easeOutQuint', 'easeOutSine' => 'easeOutSine', ], 'condition' => [ 'chart_animation' => 'yes', 'chart_type' => ['radar', 'line'] ] ] ); $this->end_controls_section(); $this->start_controls_section( 'section_chart_data', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Data', 'king-addons'), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'charts_labels_data', [ 'label' => esc_html__('Data Labels', 'king-addons'), 'type' => Controls_Manager::TEXTAREA, 'dynamic' => [ 'active' => true, ], 'default' => esc_html__('January, February, March', 'king-addons'), 'description' => esc_html__('Enter the comma-separated list of values (Used only with custom data source)', 'king-addons'), 'label_block' => true, 'condition' => [ 'data_source' => 'custom', ], ] ); if (!king_addons_freemius()->can_use_premium_code__premium_only()) { $this->add_control( 'charts_repeater_labels_data_pro_notice', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => 'More than 3 Data Labels are available
in the Pro version', 'content_classes' => 'king-addons-pro-notice', ] ); } $chart_repeater_labels = new Repeater(); $chart_repeater_labels->add_control( 'chart_data_label', [ 'label' => esc_html__('Label', 'king-addons'), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'default' => esc_html__('Label #1', 'king-addons'), 'label_block' => true, ] ); $chart_repeater_labels->add_control( 'chart_data_set', [ 'label' => esc_html__('Data', 'king-addons'), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'default' => '10,23,15', 'label_block' => true, 'description' => esc_html__("Only works with custom charts. Enter comma separated data values (Shouldn't Exceed number of values provided in Data Labels option).", 'king-addons'), ] ); $chart_repeater_labels->start_controls_tabs( 'chart_data_bar_background_tab' ); $chart_repeater_labels->start_controls_tab( 'chart_data_bar_background_normal', [ 'label' => esc_html__('Normal', 'king-addons'), ] ); $chart_repeater_labels->add_control( 'chart_data_background_color', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#5B03FF', ] ); $chart_repeater_labels->add_control( 'chart_data_border_color', [ 'label' => esc_html__('Border Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#5B03FF', ] ); $chart_repeater_labels->end_controls_tab(); $chart_repeater_labels->start_controls_tab( 'chart_data_bar_background_hover', [ 'label' => esc_html__('Hover', 'king-addons'), ] ); $chart_repeater_labels->add_control( 'chart_data_background_color_hover', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#7A7A7ACC' ] ); $chart_repeater_labels->add_control( 'chart_data_border_color_hover', [ 'label' => esc_html__('Border Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#7A7A7ACC', ] ); $chart_repeater_labels->end_controls_tab(); $chart_repeater_labels->end_controls_tabs(); $chart_repeater_labels->add_control( 'chart_data_border_width', [ 'label' => esc_html__('Border Width', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => '1', ] ); $this->add_control( 'charts_data_set', [ 'label' => esc_html__('Set Data', 'king-addons'), 'type' => Controls_Manager::REPEATER, 'default' => [ [ 'chart_data_label' => esc_html__('Laptops', 'king-addons'), 'chart_data_set' => '13,20,15', 'chart_data_background_color' => '#5B03FFCC', 'chart_data_border_color' => '#5B03FFCC', 'chart_data_border_width' => 1, ], [ 'chart_data_label' => esc_html__('Phones', 'king-addons'), 'chart_data_set' => '20,10,33', 'chart_data_background_color' => '#E5605BCC', 'chart_data_border_color' => '#E5605BCC', 'chart_data_border_width' => 1, ], [ 'chart_data_label' => esc_html__('Other', 'king-addons'), 'chart_data_set' => '10,3,23', 'chart_data_background_color' => '#5BE560CC', 'chart_data_border_color' => '#5BE560CC', 'chart_data_border_width' => 1, ], ], 'fields' => $chart_repeater_labels->get_controls(), 'title_field' => '{{{ chart_data_label }}}', ] ); if (!king_addons_freemius()->can_use_premium_code__premium_only()) { $this->add_control( 'charts_repeater_pro_notice', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => 'More than 3 Items are available
in the Pro version', 'content_classes' => 'king-addons-pro-notice', ] ); } $this->end_controls_section(); $this->start_controls_section( 'section_chart_axis_r', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Axis', 'king-addons'), 'tab' => Controls_Manager::TAB_CONTENT, 'condition' => [ 'chart_type' => ['radar', 'polarArea'] ], ] ); $this->add_control( 'r_axis_conditions', [ 'label' => esc_html__('Axis', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before' ] ); $this->add_control( 'display_r_axis', [ 'label' => esc_html__('Grid Lines', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'true', 'return_value' => 'true' ] ); $this->add_control( 'grid_line_width_r', [ 'label' => esc_html__('Grid Line Width', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => '1', 'step' => 0.1, 'condition' => [ 'display_r_axis' => 'true' ] ] ); $this->add_control( 'display_r_ticks', [ 'label' => esc_html__('Ticks (Labels)', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'true', 'return_value' => 'true' ] ); $this->add_control( 'r_step_size', [ 'label' => esc_html__('Step Size', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'max' => 360, 'default' => 0, 'frontend_available' => true, 'condition' => [ 'display_r_ticks' => 'true' ] ] ); $this->add_control( 'border_dash_length_r', [ 'label' => esc_html__('Border Dash length', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => '1', 'separator' => 'before', ] ); $this->add_control( 'border_dash_spacing_r', [ 'label' => esc_html__('Border Dash spacing', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => '1' ] ); $this->add_control( 'border_dash_offset_r', [ 'label' => esc_html__('Border Dash offset', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => '1' ] ); $this->end_controls_section(); $this->start_controls_section( 'section_chart_axis', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Axis', 'king-addons'), 'tab' => Controls_Manager::TAB_CONTENT, 'condition' => [ 'chart_type' => ['bar', 'bar_horizontal', 'line'] ], ] ); $this->add_control( 'x_axis_conditions', [ 'label' => esc_html__('X-Axis', 'king-addons'), 'type' => Controls_Manager::HEADING, ] ); $this->add_control( 'display_x_axis', [ 'label' => esc_html__('Grid Lines', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'true', 'return_value' => 'true', ] ); $this->add_control( 'grid_line_width_x', [ 'label' => esc_html__('Grid Line Width', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => '1', 'step' => 0.1, 'condition' => [ 'display_x_axis' => 'true' ] ] ); $this->add_control( 'display_x_ticks', [ 'label' => esc_html__('Ticks (Labels)', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'true', 'return_value' => 'true' ] ); $this->add_control( 'x_step_size', [ 'label' => esc_html__('Step Size', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'max' => 360, 'default' => 0, 'frontend_available' => true, 'condition' => [ 'display_x_ticks' => 'true' ] ] ); $this->add_control( 'display_x_axis_title', [ 'label' => esc_html__('Show Title', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'true', 'return_value' => 'true' ] ); $this->add_control( 'x_axis_title', [ 'label' => esc_html__('Title', 'king-addons'), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'placeholder' => esc_html__('X-Axis', 'king-addons'), 'default' => esc_html__('X-Axis', 'king-addons'), 'condition' => [ 'display_x_axis_title' => 'true' ] ] ); $this->add_control( 'labels_rotation_x_axis', [ 'label' => esc_html__('Ticks (Labels) Rotation', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'max' => 360, 'default' => 0, 'frontend_available' => true ] ); $this->add_control( 'y_axis_conditions', [ 'label' => esc_html__('Y-Axis', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before' ] ); $this->add_control( 'display_y_axis', [ 'label' => esc_html__('Grid Lines', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'true', 'return_value' => 'true' ] ); $this->add_control( 'grid_line_width_y', [ 'label' => esc_html__('Grid Line Width', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => '1', 'step' => 0.1, 'condition' => [ 'display_y_axis' => 'true' ] ] ); $this->add_control( 'display_y_ticks', [ 'label' => esc_html__('Ticks (Labels)', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'true', 'return_value' => 'true' ] ); $this->add_control( 'y_step_size', [ 'label' => esc_html__('Step Size', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'max' => 360, 'default' => 0, 'frontend_available' => true, 'condition' => [ 'display_y_ticks' => 'true' ] ] ); $this->add_control( 'display_y_axis_title', [ 'label' => esc_html__('Show Title', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'true', 'return_value' => 'true' ] ); $this->add_control( 'y_axis_title', [ 'label' => esc_html__('Title', 'king-addons'), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'placeholder' => esc_html__('Y-Axis', 'king-addons'), 'default' => esc_html__('Y-Axis', 'king-addons'), 'condition' => [ 'display_y_axis_title' => 'true' ] ] ); $this->add_control( 'labels_rotation_y_axis', [ 'label' => esc_html__('Ticks (Labels) Rotation', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'max' => 360, 'default' => 0, 'frontend_available' => true ] ); $this->add_control( 'reverse_x', [ 'label' => esc_html__('Reverse Charts', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'return_value' => 'yes', 'separator' => 'before', 'condition' => [ 'show_chart_legend' => 'yes', 'chart_type' => 'bar_horizontal' ] ] ); $this->add_control( 'reverse_y', [ 'label' => esc_html__('Reverse Charts', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'return_value' => 'yes', 'separator' => 'before', 'condition' => [ 'show_chart_legend' => 'yes', 'chart_type' => ['bar', 'line'] ] ] ); $this->add_control( 'border_dash_length', [ 'label' => esc_html__('Border Dash length', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => '1', 'separator' => 'before', 'conditions' => [ 'relation' => 'or', 'terms' => [ [ 'name' => 'display_x_axis', 'operator' => '==', 'value' => 'true' ], [ 'name' => 'display_y_axis', 'operator' => '==', 'value' => 'true' ] ] ] ] ); $this->add_control( 'border_dash_spacing', [ 'label' => esc_html__('Border Dash spacing', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => '1', 'conditions' => [ 'relation' => 'or', 'terms' => [ [ 'name' => 'display_x_axis', 'operator' => '==', 'value' => 'true' ], [ 'name' => 'display_y_axis', 'operator' => '==', 'value' => 'true' ] ] ] ] ); $this->add_control( 'border_dash_offset', [ 'label' => esc_html__('Border Dash offset', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => '1', 'conditions' => [ 'relation' => 'or', 'terms' => [ [ 'name' => 'display_x_axis', 'operator' => '==', 'value' => 'true' ], [ 'name' => 'display_y_axis', 'operator' => '==', 'value' => 'true' ] ] ] ] ); $this->end_controls_section(); $this->start_controls_section( 'section_chart_title', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Title', 'king-addons'), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'show_chart_title', [ 'label' => esc_html__('Show Title', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes' ] ); $this->add_control( 'chart_title', [ 'label' => esc_html__('Title', 'king-addons'), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'placeholder' => esc_html__('To Be Applied', 'king-addons'), 'default' => esc_html__('To Be Applied', 'king-addons'), 'condition' => [ 'show_chart_title' => 'yes', ], ] ); $this->add_control( 'chart_title_position', [ 'label' => esc_html__('Position', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'top', 'label_block' => false, 'options' => [ 'top' => esc_html__('Top', 'king-addons'), 'right' => esc_html__('Right', 'king-addons'), 'bottom' => esc_html__('Bottom', 'king-addons'), 'left' => esc_html__('Left', 'king-addons'), ], 'condition' => [ 'show_chart_title' => 'yes', ] ] ); $this->add_control( 'chart_title_align', [ 'label' => esc_html__('Align', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'center', 'label_block' => false, 'options' => [ 'start' => esc_html__('Start', 'king-addons'), 'center' => esc_html__('Center', 'king-addons'), 'end' => esc_html__('End', 'king-addons'), ], 'condition' => [ 'show_chart_title' => 'yes', ] ] ); $this->end_controls_section(); $this->start_controls_section( 'section_chart_legend', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Legends', 'king-addons'), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'show_chart_legend', [ 'label' => esc_html__('Show Legends', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'return_value' => 'yes', ] ); $this->add_control( 'reverse_legend', [ 'label' => esc_html__('Reverse', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'return_value' => 'yes', 'condition' => [ 'show_chart_legend' => 'yes', ] ] ); $this->add_control( 'charts_legend_shape', [ 'label' => esc_html__('Shape', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'rectangle', 'label_block' => false, 'render_type' => 'template', 'options' => [ 'rectangle' => esc_html__('Rectangle', 'king-addons'), 'point' => esc_html__('Point', 'king-addons'), ], 'condition' => [ 'show_chart_legend' => 'yes', ] ] ); $this->add_control( 'charts_legend_position', [ 'label' => esc_html__('Position', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'top', 'label_block' => false, 'options' => [ 'top' => esc_html__('Top', 'king-addons'), 'right' => esc_html__('Right', 'king-addons'), 'bottom' => esc_html__('Bottom', 'king-addons'), 'left' => esc_html__('Left', 'king-addons'), 'chartArea' => esc_html__('chartArea', 'king-addons'), ], 'condition' => [ 'show_chart_legend' => 'yes', ] ] ); $this->add_control( 'charts_legend_align', [ 'label' => esc_html__('Align', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'center', 'label_block' => false, 'options' => [ 'start' => esc_html__('Start', 'king-addons'), 'center' => esc_html__('Center', 'king-addons'), 'end' => esc_html__('End', 'king-addons'), ], 'condition' => [ 'show_chart_legend' => 'yes', ] ] ); $this->end_controls_section(); $this->start_controls_section( 'section_chart_tooltip', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Tooltip', 'king-addons'), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'show_chart_tooltip', [ 'label' => esc_html__('Show Tooltip', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'return_value' => 'yes' ] ); $this->add_control( 'tooltips_percent', [ 'label' => esc_html__('Convert Values to Percents', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'true', 'default' => 'true', 'frontend_available' => true, 'condition' => [ 'show_chart_tooltip' => 'yes' ] ] ); $this->add_control( 'trigger_tooltip_on', [ 'label' => esc_html__('Show Tooltip On', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'mousemove', 'options' => [ 'mousemove' => esc_html__('Hover', 'king-addons'), 'click' => esc_html__('Click', 'king-addons'), ], 'condition' => [ 'show_chart_tooltip' => 'yes' ] ] ); $this->add_control( 'chart_interaction_mode', [ 'label' => esc_html__('Interaction Mode', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'point', 'options' => [ 'point' => esc_html__('Point', 'king-addons'), 'index' => esc_html__('Index', 'king-addons'), 'dataset' => esc_html__('Dataset', 'king-addons'), ], 'condition' => [ 'show_chart_tooltip' => 'yes' ] ] ); $this->add_control( 'chart_tooltip_position', [ 'label' => esc_html__('Position', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'nearest', 'options' => [ 'nearest' => esc_html__('Nearest', 'king-addons'), 'average' => esc_html__('Average', 'king-addons'), ], 'condition' => [ 'show_chart_tooltip' => 'yes' ] ] ); $this->end_controls_section(); $this->start_controls_section( 'section_chart_lines', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Lines', 'king-addons'), 'tab' => Controls_Manager::TAB_CONTENT, 'condition' => [ 'chart_type' => ['line', 'radar'], ] ] ); $this->add_control( 'show_lines', [ 'label' => esc_html__('Show Lines', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'return_value' => 'yes', 'separator' => 'before', ] ); $this->add_control( 'chart_type_line_fill', [ 'label' => esc_html__('Show Background Fill', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'return_value' => 'yes', 'condition' => [ 'chart_type!' => ['bar', 'bar_horizontal'], ] ] ); $this->add_control( 'line_dots', [ 'label' => esc_html__('Show Dots', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'return_value' => 'yes', 'condition' => [ 'chart_type!' => ['bar', 'bar_horizontal'], ] ] ); $this->add_responsive_control( 'line_dots_radius', [ 'label' => esc_html__('Dots Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'devices' => ['desktop', 'mobile'], 'exclude' => ['tablet'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 50, ], ], 'size_units' => ['px'], 'default' => [ 'unit' => 'px', 'size' => 10, ], 'mobile_default' => [ 'unit' => 'px', 'size' => 5 ], 'condition' => [ 'chart_type!' => ['bar', 'bar_horizontal'], 'line_dots' => 'yes', ] ] ); $this->end_controls_section(); $this->start_controls_section( 'chart_section_style_res', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Responsive', 'king-addons'), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'responsive_chart', [ 'label' => esc_html__('Responsive Layout', 'king-addons'), 'description' => esc_html__('Enables scrollbar on tablet and mobile screens', 'king-addons'), 'default' => 'yes', 'type' => Controls_Manager::SWITCHER, 'selectors' => [ '{{WRAPPER}} .king-addons-charts-container' => 'overflow: auto;', '{{WRAPPER}} .king-addons-charts-wrapper' => 'position: relative; margin: 0 auto;', ], ] ); $this->add_responsive_control( 'chart_res_width', [ 'label' => esc_html__('Min Width (px)', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 1600 ] ], 'default' => [ 'size' => 800, ], 'selectors' => [ '{{WRAPPER}} .king-addons-charts-wrapper' => 'min-width: {{SIZE}}px;', ], 'separator' => 'before', 'condition' => [ 'responsive_chart' => 'yes', ], ] ); $this->add_responsive_control( 'chart_res_height', [ 'label' => esc_html__('Min Height (px)', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 1600 ] ], 'default' => [ 'size' => 400, ], 'selectors' => [ '{{WRAPPER}} .king-addons-charts-wrapper' => 'min-height: {{SIZE}}px;', ], 'condition' => [ 'responsive_chart' => 'yes', ], ] ); $this->end_controls_section(); Core::renderProFeaturesSection($this, '', Controls_Manager::RAW_HTML, 'charts', [ 'Upload CSV File', 'Import CSV File from URL', 'Import Published Google Sheets', 'Add Unlimited Chart Items', 'Add Unlimited Data Labels' ]); $this->start_controls_section( 'section_datalabels_styles', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Data Values', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'inner_datalabels' => 'true' ] ] ); $this->add_control( 'inner_datalabels_color', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#FFF', ] ); $this->add_control( 'inner_datalabels_font_family', [ 'label' => esc_html__('Font Family', 'king-addons'), 'type' => Controls_Manager::FONT, 'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'), 'default' => 'Arial', ] ); $this->add_control( 'inner_datalabels_font_style', [ 'label' => esc_html__('Font Style', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'normal', 'options' => [ 'normal' => 'Normal', 'italic' => 'Italic', 'oblique' => 'Oblique', ], ] ); $this->add_control( 'inner_datalabels_font_weight', [ 'label' => esc_html__('Font Weight ', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'default' => 600, 'frontend_available' => true ] ); $this->add_control( 'inner_datalabels_font_size', [ 'label' => esc_html__('Font Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 10, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 14, ] ] ); $this->end_controls_section(); $this->start_controls_section( 'section_styles_chart_axis_r', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Axis', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'chart_type' => ['radar', 'polarArea'] ], ] ); $this->add_control( 'r_axis_angle_lines_heading', [ 'label' => esc_html__('Angle Lines', 'king-addons'), 'type' => Controls_Manager::HEADING, ] ); $this->add_control( 'angle_lines_color', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#E7E7E7' ] ); $this->add_control( 'r_axis_grid_lines_heading', [ 'label' => esc_html__('Grid Lines', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'axis_grid_line_color_r', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#E7E7E7' ] ); $this->add_control( 'axis_labels_heading', [ 'label' => esc_html__('Axis Labels', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'axis_labels_color', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#222222' ] ); $this->add_control( 'axis_labels_bg_color', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#B2B2B200' ] ); $this->add_control( 'axis_labels_padding', [ 'label' => esc_html__('Padding', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 5, ], ] ); $this->add_control( 'chart_point_labels_heading', [ 'label' => esc_html__('Ticks', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before' ] ); $this->add_control( 'chart_point_labels_color_r', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#B2B2B2' ] ); $this->add_control( 'point_labels_font_family_r', [ 'label' => esc_html__('Font Family', 'king-addons'), 'type' => Controls_Manager::FONT, 'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'), 'default' => 'Arial', ] ); $this->add_control( 'point_labels_font_style_r', [ 'label' => esc_html__('Font Style', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'normal', 'options' => [ 'normal' => 'Normal', 'italic' => 'Italic', 'oblique' => 'Oblique', ], ] ); $this->add_control( 'point_labels_font_weight_r', [ 'label' => esc_html__('Font Weight ', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'default' => 600, 'frontend_available' => true, ] ); $this->add_control( 'point_labels_font_size_r', [ 'label' => esc_html__('Font Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 10, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 14, ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_chart_axis_styles', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Axis', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'chart_type' => ['bar', 'bar_horizontal', 'line'] ], ] ); $this->add_control( 'x_axis_grid_lines_heading', [ 'label' => esc_html__('Grid Lines (X)', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'axis_grid_line_color_x', [ 'label' => esc_html__('Color (X)', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#999999' ] ); $this->add_control( 'y_axis_grid_lines_heading', [ 'label' => esc_html__('Grid Lines (Y)', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'axis_grid_line_color_y', [ 'label' => esc_html__('Color (Y)', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#999999' ] ); $this->add_control( 'x_axis_title_styles_heading', [ 'label' => esc_html__('X-Title', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'axis_title_color_x', [ 'label' => esc_html__('Color (X)', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#C0C0C0' ] ); $this->add_control( 'axis_title_font_family_x', [ 'label' => esc_html__('Font Family', 'king-addons'), 'type' => Controls_Manager::FONT, 'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'), 'default' => 'Arial', ] ); $this->add_control( 'axis_title_font_style_x', [ 'label' => esc_html__('Font Style', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'normal', 'options' => [ 'normal' => 'Normal', 'italic' => 'Italic', 'oblique' => 'Oblique', ], ] ); $this->add_control( 'axis_title_font_weight_x', [ 'label' => esc_html__('Font Weight ', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'default' => 600, 'frontend_available' => true, ] ); $this->add_control( 'axis_title_font_size_x', [ 'label' => esc_html__('Font Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 10, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 14, ], ] ); $this->add_control( 'y_axis_title_styles_heading', [ 'label' => esc_html__('Y-Title', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'axis_title_color_y', [ 'label' => esc_html__('Color (Y)', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#C0C0C0' ] ); $this->add_control( 'axis_title_font_family_y', [ 'label' => esc_html__('Font Family', 'king-addons'), 'type' => Controls_Manager::FONT, 'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'), 'default' => 'Arial', ] ); $this->add_control( 'axis_title_font_style_y', [ 'label' => esc_html__('Font Style', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'normal', 'options' => [ 'normal' => 'Normal', 'italic' => 'Italic', 'oblique' => 'Oblique', ], ] ); $this->add_control( 'axis_title_font_weight_y', [ 'label' => esc_html__('Font Weight ', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'default' => 600, 'frontend_available' => true, ] ); $this->add_control( 'axis_title_font_size_y', [ 'label' => esc_html__('Font Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 10, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 14, ], ] ); $this->add_control( 'x_ticks_styles_heading', [ 'label' => esc_html__('X-Ticks', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'chart_ticks_color_x', [ 'label' => esc_html__('Ticks Color (X)', 'king-addons'), 'type' => Controls_Manager::COLOR, ] ); $this->add_control( 'ticks_font_family_x', [ 'label' => esc_html__('Font Family', 'king-addons'), 'type' => Controls_Manager::FONT, 'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'), 'default' => 'Arial', ] ); $this->add_control( 'ticks_font_style_x', [ 'label' => esc_html__('Font Style', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'normal', 'options' => [ 'normal' => 'Normal', 'italic' => 'Italic', 'oblique' => 'Oblique', ], ] ); $this->add_control( 'ticks_font_weight_x', [ 'label' => esc_html__('Font Weight ', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'default' => 600, 'frontend_available' => true, ] ); $this->add_control( 'ticks_font_size_x', [ 'label' => esc_html__('Font Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 10, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 17, ], ] ); $this->add_control( 'ticks_padding_x', [ 'label' => esc_html__('Distance', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 50, ], ], 'size_units' => ['px'], 'default' => [ 'unit' => 'px', 'size' => 10, ] ] ); $this->add_control( 'y_ticks_styles_heading', [ 'label' => esc_html__('Y-Ticks', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'chart_ticks_color_y', [ 'label' => esc_html__('Ticks Color (Y)', 'king-addons'), 'type' => Controls_Manager::COLOR, ] ); $this->add_control( 'ticks_font_family_y', [ 'label' => esc_html__('Font Family', 'king-addons'), 'type' => Controls_Manager::FONT, 'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'), 'default' => 'Arial', ] ); $this->add_control( 'ticks_font_style_y', [ 'label' => esc_html__('Font Style', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'normal', 'options' => [ 'normal' => 'Normal', 'italic' => 'Italic', 'oblique' => 'Oblique', ], ] ); $this->add_control( 'ticks_font_weight_y', [ 'label' => esc_html__('Font Weight ', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'default' => 600, 'frontend_available' => true, ] ); $this->add_control( 'ticks_font_size_y', [ 'label' => esc_html__('Font Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 10, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 14, ], ] ); $this->add_control( 'ticks_padding_y', [ 'label' => esc_html__('Distance', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 50, ], ], 'size_units' => ['px'], 'default' => [ 'unit' => 'px', 'size' => 10, ] ] ); $this->end_controls_section(); $this->start_controls_section( 'section_chart_title_styles', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Title', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'show_chart_title' => 'yes' ] ] ); $this->add_control( 'chart_title_color', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, ] ); $this->add_control( 'title_font_family', [ 'label' => esc_html__('Font Family', 'king-addons'), 'type' => Controls_Manager::FONT, 'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'), 'default' => 'Arial', ] ); $this->add_control( 'title_font_style', [ 'label' => esc_html__('Font Style', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'normal', 'options' => [ 'normal' => 'Normal', 'italic' => 'Italic', 'oblique' => 'Oblique', ], ] ); $this->add_control( 'title_font_weight', [ 'label' => esc_html__('Font Weight ', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'default' => 600, 'frontend_available' => true, ] ); $this->add_control( 'title_font_size', [ 'label' => esc_html__('Font Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 10, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 14, ], ] ); $this->add_control( 'chart_title_padding', [ 'label' => esc_html__('Padding', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 50, ], ], 'size_units' => ['px'], 'default' => [ 'unit' => 'px', 'size' => 10, ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_chart_legend_styles', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Legend', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'chart_legend_text_color', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#222222' ] ); $this->add_control( 'legend_font_family', [ 'label' => esc_html__('Font Family', 'king-addons'), 'type' => Controls_Manager::FONT, 'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'), 'default' => 'Arial', ] ); $this->add_control( 'legend_font_style', [ 'label' => esc_html__('Font Style', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'normal', 'options' => [ 'normal' => 'Normal', 'italic' => 'Italic', 'oblique' => 'Oblique', ], ] ); $this->add_control( 'legend_font_weight', [ 'label' => esc_html__('Font Weight ', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'default' => 600, 'frontend_available' => true, ] ); $this->add_control( 'legend_font_size', [ 'label' => esc_html__('Font Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 10, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 14, ], ] ); $this->add_control( 'legend_box_width', [ 'label' => esc_html__('Box Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 200, ], ], 'size_units' => ['px'], 'default' => [ 'unit' => 'px', 'size' => 40, ] ] ); $this->add_control( 'chart_legend_padding', [ 'label' => esc_html__('Gutter', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 50, ], ], 'size_units' => ['px'], 'default' => [ 'unit' => 'px', 'size' => 10, ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_chart_tooltip_styles', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Tooltip', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'show_chart_tooltip' => 'yes' ] ] ); $this->add_control( 'chart_tooltip_bg_color', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, ] ); $this->add_control( 'tooltip_padding', [ 'label' => esc_html__('Padding', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 5, ], ] ); $this->add_responsive_control( 'tooltip_caret_size', [ 'label' => esc_html__('Triangle Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'devices' => ['desktop', 'mobile'], 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 10, ], 'mobile_default' => [ 'unit' => 'px', 'size' => 6, ], ] ); $this->add_control( 'tooltip_title_heading', [ 'label' => esc_html__('Tooltip Title', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'chart_tooltip_title_color', [ 'label' => esc_html__('Title Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#FFF' ] ); $this->add_control( 'chart_tooltip_title_font', [ 'label' => esc_html__('Font Family', 'king-addons'), 'type' => Controls_Manager::FONT, 'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'), 'default' => 'Arial', ] ); $this->add_control( 'chart_tooltip_title_font_size', [ 'label' => esc_html__('Font Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 10, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 14, ], 'separator' => 'before' ] ); $this->add_control( 'chart_tooltip_title_margin_bottom', [ 'label' => esc_html__('Title Spacing', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 50, ], ], 'size_units' => ['px'], 'default' => [ 'unit' => 'px', 'size' => 10, ], ] ); $this->add_control( 'chart_tooltip_title_align', [ 'label' => esc_html__('Title Alignment', 'king-addons'), 'type' => Controls_Manager::CHOOSE, 'default' => 'center', 'label_block' => false, 'options' => [ 'left' => [ 'title' => esc_html__('Left', 'king-addons'), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__('Center', 'king-addons'), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__('Right', 'king-addons'), 'icon' => 'eicon-text-align-right', ], ], 'separator' => 'before' ] ); $this->add_control( 'tooltip_item_heading', [ 'label' => esc_html__('Tooltip Item', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'chart_tooltip_item_color', [ 'label' => esc_html__('Item Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#FFF' ] ); $this->add_control( 'chart_tooltip_item_font', [ 'label' => esc_html__('Font Family', 'king-addons'), 'type' => Controls_Manager::FONT, 'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'), 'default' => 'Arial', ] ); $this->add_control( 'chart_tooltip_item_font_size', [ 'label' => esc_html__('Font Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 10, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 14, ], 'separator' => 'before' ] ); $this->add_control( 'chart_tooltip_item_spacing', [ 'label' => esc_html__('Item Spacing', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 50, ], ], 'size_units' => ['px'], 'default' => [ 'unit' => 'px', 'size' => 10, ], ] ); $this->add_control( 'chart_tooltip_item_align', [ 'label' => esc_html__('Item Alignment', 'king-addons'), 'type' => Controls_Manager::CHOOSE, 'default' => 'center', 'label_block' => false, 'options' => [ 'left' => [ 'title' => esc_html__('Left', 'king-addons'), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__('Center', 'king-addons'), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__('Right', 'king-addons'), 'icon' => 'eicon-text-align-right', ], ], 'separator' => 'before' ] ); $this->end_controls_section(); } protected function render() { $settings = $this->get_settings_for_display(); // Security fix: Extract only specific safe settings to prevent variable injection $chart_type = $settings['chart_type'] ?? ''; $charts_labels_data = $settings['charts_labels_data'] ?? ''; $charts_datasets_data = $settings['charts_datasets_data'] ?? ''; $chart_title = $settings['chart_title'] ?? ''; $chart_title_show = $settings['chart_title_show'] ?? ''; $chart_legend_show = $settings['chart_legend_show'] ?? ''; $chart_tooltips_show = $settings['chart_tooltips_show'] ?? ''; $chart_options = $settings['chart_options'] ?? ''; $chart_height = $settings['chart_height'] ?? ''; $chart_width = $settings['chart_width'] ?? ''; $chart_responsive = $settings['chart_responsive'] ?? ''; $chart_maintain_aspect_ratio = $settings['chart_maintain_aspect_ratio'] ?? ''; $chart_animation_duration = $settings['chart_animation_duration'] ?? ''; $chart_animation_easing = $settings['chart_animation_easing'] ?? ''; $chart_show_labels = $settings['chart_show_labels'] ?? ''; $chart_label_position = $settings['chart_label_position'] ?? ''; $chart_label_color = $settings['chart_label_color'] ?? ''; $chart_label_font_size = $settings['chart_label_font_size'] ?? ''; $chart_label_font_family = $settings['chart_label_font_family'] ?? ''; $chart_label_font_style = $settings['chart_label_font_style'] ?? ''; $chart_label_font_weight = $settings['chart_label_font_weight'] ?? ''; $chart_grid_lines = $settings['chart_grid_lines'] ?? ''; $chart_grid_color = $settings['chart_grid_color'] ?? ''; $chart_grid_line_width = $settings['chart_grid_line_width'] ?? ''; $chart_point_radius = $settings['chart_point_radius'] ?? ''; $chart_point_hover_radius = $settings['chart_point_hover_radius'] ?? ''; $chart_point_background_color = $settings['chart_point_background_color'] ?? ''; $chart_point_border_color = $settings['chart_point_border_color'] ?? ''; $chart_point_border_width = $settings['chart_point_border_width'] ?? ''; $chart_line_tension = $settings['chart_line_tension'] ?? ''; $chart_line_border_width = $settings['chart_line_border_width'] ?? ''; $chart_line_border_color = $settings['chart_line_border_color'] ?? ''; $chart_line_background_color = $settings['chart_line_background_color'] ?? ''; $chart_bar_border_width = $settings['chart_bar_border_width'] ?? ''; $chart_bar_border_color = $settings['chart_bar_border_color'] ?? ''; $chart_bar_background_color = $settings['chart_bar_background_color'] ?? ''; $chart_doughnut_cutout = $settings['chart_doughnut_cutout'] ?? ''; $chart_doughnut_circumference = $settings['chart_doughnut_circumference'] ?? ''; $chart_doughnut_rotation = $settings['chart_doughnut_rotation'] ?? ''; $chart_polar_area_start_angle = $settings['chart_polar_area_start_angle'] ?? ''; $chart_polar_area_start_angle = $settings['chart_polar_area_start_angle'] ?? ''; $chart_radar_point_labels = $settings['chart_radar_point_labels'] ?? ''; $chart_radar_angle_lines = $settings['chart_radar_angle_lines'] ?? ''; $chart_radar_grid_lines = $settings['chart_radar_grid_lines'] ?? ''; $chart_radar_point_radius = $settings['chart_radar_point_radius'] ?? ''; $chart_radar_point_hover_radius = $settings['chart_radar_point_hover_radius'] ?? ''; $chart_radar_point_background_color = $settings['chart_radar_point_background_color'] ?? ''; $chart_radar_point_border_color = $settings['chart_radar_point_border_color'] ?? ''; $chart_radar_point_border_width = $settings['chart_radar_point_border_width'] ?? ''; $chart_radar_line_tension = $settings['chart_radar_line_tension'] ?? ''; $chart_radar_line_border_width = $settings['chart_radar_line_border_width'] ?? ''; $chart_radar_line_border_color = $settings['chart_radar_line_border_color'] ?? ''; $chart_radar_line_background_color = $settings['chart_radar_line_background_color'] ?? ''; // Additional chart settings $charts_data_set = $settings['charts_data_set'] ?? ''; $animation_transition_type = $settings['animation_transition_type'] ?? ''; $axis_grid_line_color_r = $settings['axis_grid_line_color_r'] ?? ''; $axis_grid_line_color_x = $settings['axis_grid_line_color_x'] ?? ''; $axis_grid_line_color_y = $settings['axis_grid_line_color_y'] ?? ''; $axis_title_color_x = $settings['axis_title_color_x'] ?? ''; $axis_title_color_y = $settings['axis_title_color_y'] ?? ''; $axis_title_font_family_x = $settings['axis_title_font_family_x'] ?? ''; $axis_title_font_family_y = $settings['axis_title_font_family_y'] ?? ''; $axis_title_font_style_x = $settings['axis_title_font_style_x'] ?? ''; $axis_title_font_style_y = $settings['axis_title_font_style_y'] ?? ''; $axis_title_font_weight_x = $settings['axis_title_font_weight_x'] ?? ''; $axis_title_font_weight_y = $settings['axis_title_font_weight_y'] ?? ''; $border_dash_length = $settings['border_dash_length'] ?? ''; $border_dash_length_r = $settings['border_dash_length_r'] ?? ''; $border_dash_offset = $settings['border_dash_offset'] ?? ''; $border_dash_offset_r = $settings['border_dash_offset_r'] ?? ''; $border_dash_spacing = $settings['border_dash_spacing'] ?? ''; $border_dash_spacing_r = $settings['border_dash_spacing_r'] ?? ''; $chart_interaction_mode = $settings['chart_interaction_mode'] ?? ''; $chart_tooltip_bg_color = $settings['chart_tooltip_bg_color'] ?? ''; $chart_tooltip_item_align = $settings['chart_tooltip_item_align'] ?? ''; $chart_tooltip_item_color = $settings['chart_tooltip_item_color'] ?? ''; $chart_tooltip_item_font = $settings['chart_tooltip_item_font'] ?? ''; $chart_tooltip_title_align = $settings['chart_tooltip_title_align'] ?? ''; $chart_tooltip_title_color = $settings['chart_tooltip_title_color'] ?? ''; $chart_tooltip_title_font = $settings['chart_tooltip_title_font'] ?? ''; $data_source = $settings['data_source'] ?? ''; $display_r_axis = $settings['display_r_axis'] ?? ''; $display_r_ticks = $settings['display_r_ticks'] ?? ''; $display_x_axis = $settings['display_x_axis'] ?? ''; $display_x_axis_title = $settings['display_x_axis_title'] ?? ''; $display_x_ticks = $settings['display_x_ticks'] ?? ''; $display_y_axis = $settings['display_y_axis'] ?? ''; $display_y_axis_title = $settings['display_y_axis_title'] ?? ''; $display_y_ticks = $settings['display_y_ticks'] ?? ''; $exclude_dataset_on_click = $settings['exclude_dataset_on_click'] ?? ''; $grid_line_width_r = $settings['grid_line_width_r'] ?? ''; $grid_line_width_x = $settings['grid_line_width_x'] ?? ''; $grid_line_width_y = $settings['grid_line_width_y'] ?? ''; $inner_datalabels = $settings['inner_datalabels'] ?? ''; $inner_datalabels_color = $settings['inner_datalabels_color'] ?? ''; $charts_legend_align = $settings['charts_legend_align'] ?? ''; $legend_box_width = $settings['legend_box_width'] ?? ''; $legend_font_family = $settings['legend_font_family'] ?? ''; $legend_font_size = $settings['legend_font_size'] ?? ''; $legend_font_style = $settings['legend_font_style'] ?? ''; $legend_font_weight = $settings['legend_font_weight'] ?? ''; $chart_legend_padding = $settings['chart_legend_padding'] ?? ''; $charts_legend_position = $settings['charts_legend_position'] ?? ''; $charts_legend_shape = $settings['charts_legend_shape'] ?? ''; $chart_legend_text_color = $settings['chart_legend_text_color'] ?? ''; $max_value = $settings['max_value'] ?? ''; $min_value = $settings['min_value'] ?? ''; $point_labels_font_family_r = $settings['point_labels_font_family_r'] ?? ''; $point_labels_font_style_r = $settings['point_labels_font_style_r'] ?? ''; $point_labels_font_weight_r = $settings['point_labels_font_weight_r'] ?? ''; $r_step_size = $settings['r_step_size'] ?? ''; $reverse_legend = $settings['reverse_legend'] ?? ''; $reverse_x = $settings['reverse_x'] ?? ''; $reverse_y = $settings['reverse_y'] ?? ''; $labels_rotation_x_axis = $settings['labels_rotation_x_axis'] ?? ''; $labels_rotation_y_axis = $settings['labels_rotation_y_axis'] ?? ''; $data_csv_separator = $settings['data_csv_separator'] ?? ''; $show_chart_legend = $settings['show_chart_legend'] ?? ''; $show_chart_title = $settings['show_chart_title'] ?? ''; $show_chart_tooltip = $settings['show_chart_tooltip'] ?? ''; $chart_ticks_color_x = $settings['chart_ticks_color_x'] ?? ''; $ticks_font_family_x = $settings['ticks_font_family_x'] ?? ''; $ticks_font_family_y = $settings['ticks_font_family_y'] ?? ''; $ticks_font_style_x = $settings['ticks_font_style_x'] ?? ''; $ticks_font_style_y = $settings['ticks_font_style_y'] ?? ''; $ticks_font_weight_x = $settings['ticks_font_weight_x'] ?? ''; $ticks_font_weight_y = $settings['ticks_font_weight_y'] ?? ''; $title_font_family = $settings['title_font_family'] ?? ''; $title_font_weight = $settings['title_font_weight'] ?? ''; $tooltips_percent = $settings['tooltips_percent'] ?? ''; $chart_tooltip_position = $settings['chart_tooltip_position'] ?? ''; $trigger_tooltip_on = $settings['trigger_tooltip_on'] ?? ''; $data_source_csv_file = $settings['data_source_csv_file'] ?? ''; $x_axis_title = $settings['x_axis_title'] ?? ''; $x_step_size = $settings['x_step_size'] ?? ''; $y_axis_title = $settings['y_axis_title'] ?? ''; $y_step_size = $settings['y_step_size'] ?? ''; $premium = king_addons_freemius()->can_use_premium_code__premium_only(); $data_charts_array = []; if (in_array($chart_type, ['bar', 'bar_horizontal', 'line', 'radar'])) { if (!empty($charts_labels_data)) { $labels = explode(',', trim($charts_labels_data)); if (!$premium && count($labels) > 3) { $labels = array_slice($labels, 0, 3); } $data_charts_array['labels'] = $labels; } if (is_array($charts_data_set) && count($charts_data_set)) { foreach ($charts_data_set as $charts_counter => $chart_data) { if (!$premium && $charts_counter === 3) break; $data_charts_array['datasets'][] = [ 'label' => $chart_data['chart_data_label'], 'data' => array_map('floatval', explode(',', trim($chart_data['chart_data_set'], ','))), 'backgroundColor' => $chart_data['chart_data_background_color'], 'hoverBackgroundColor' => $chart_data['chart_data_background_color_hover'], 'borderColor' => $chart_data['chart_data_border_color'], 'hoverBorderColor' => $chart_data['chart_data_border_color_hover'], 'borderWidth' => $chart_data['chart_data_border_width'], 'barPercentage' => $settings['column_width_x'] ?? '', 'fill' => !empty($settings['chart_type_line_fill']) && 'yes' === $settings['chart_type_line_fill'], ]; } } } else { if (is_array($charts_data_set) && count($charts_data_set) && $settings['data_source'] !== 'csv') { $chart_data_number_values = $chart_background_colors = $chart_background_hover_colors = []; $chart_data_border_colors = $chart_data_border_hover_colors = $chart_data_border_width = $chart_data_bar_percentage = []; $data_charts_array['labels'] = []; foreach ($charts_data_set as $labels_data) { if (!$premium && count($data_charts_array['labels']) === 3) break; $data_charts_array['labels'][] = $labels_data['chart_data_label']; } $data_charts_array_test = !empty($charts_labels_data) ? explode(',', trim($charts_labels_data)) : []; foreach ($data_charts_array_test as $key => $test_data) { if (!$premium && $key === 3) break; $chart_data_number_values[$key] = []; foreach ($charts_data_set as $key_inner => $chart_data) { if (!$premium && $key_inner === 3) break; $numbers = array_map('floatval', explode(',', trim($chart_data['chart_data_set'], ','))); $chart_data_number_values[$key][] = $numbers[$key] ?? '0'; } } foreach ($charts_data_set as $key => $chart_data) { if (!$premium && $key === 3) break; $chart_background_colors[] = trim($chart_data['chart_data_background_color']); $chart_background_hover_colors[] = trim($chart_data['chart_data_background_color_hover']); $chart_data_border_colors[] = trim($chart_data['chart_data_border_color']); $chart_data_border_hover_colors[] = trim($chart_data['chart_data_border_color_hover']); $chart_data_border_width[] = trim($chart_data['chart_data_border_width']); if (!empty($settings['column_width_x'])) { $chart_data_bar_percentage[] = trim($chart_data['column_width_x']); } } foreach ($data_charts_array_test as $key => $data_test) { if (!$premium && $key === 3) break; $data_charts_array['datasets'][] = [ 'label' => $data_test, 'data' => $chart_data_number_values[$key], 'backgroundColor' => $chart_background_colors, 'hoverBackgroundColor' => $chart_background_hover_colors, 'borderColor' => $chart_data_border_colors, 'hoverBorderColor' => $chart_data_border_hover_colors, 'borderWidth' => $chart_data_border_width, 'barPercentage' => $chart_data_bar_percentage, ]; } } } $layout_settings = [ 'angle_lines_color' => $angle_lines_color ?? '', 'animation_transition_type' => $animation_transition_type, 'axis_grid_line_color_r' => $axis_grid_line_color_r, 'axis_grid_line_color_x' => $axis_grid_line_color_x, 'axis_grid_line_color_y' => $axis_grid_line_color_y, 'axis_labels_bg_color' => $axis_labels_bg_color ?? '', 'axis_labels_color' => $axis_labels_color ?? '', 'axis_labels_padding' => $axis_labels_padding['size'] ?? '', 'axis_title_color_x' => $axis_title_color_x, 'axis_title_color_y' => $axis_title_color_y, 'axis_title_font_family_x' => $axis_title_font_family_x, 'axis_title_font_family_y' => $axis_title_font_family_y, 'axis_title_font_size_x' => $axis_title_font_size_x['size'] ?? '', 'axis_title_font_size_y' => $axis_title_font_size_y['size'] ?? '', 'axis_title_font_style_x' => $axis_title_font_style_x, 'axis_title_font_style_y' => $axis_title_font_style_y, 'axis_title_font_weight_x' => $axis_title_font_weight_x, 'axis_title_font_weight_y' => $axis_title_font_weight_y, 'border_dash_length' => $border_dash_length, 'border_dash_length_r' => $border_dash_length_r, 'border_dash_offset' => $border_dash_offset, 'border_dash_offset_r' => $border_dash_offset_r, 'border_dash_spacing' => $border_dash_spacing, 'border_dash_spacing_r' => $border_dash_spacing_r, 'chart_animation' => $chart_animation ?? '', 'chart_animation_duration' => $chart_animation_duration ?? '', 'chart_animation_loop' => $chart_animation_loop ?? '', 'chart_datasets' => !empty($data_charts_array['datasets']) ? wp_json_encode($data_charts_array['datasets']) : '', 'chart_interaction_mode' => $chart_interaction_mode, 'chart_labels' => $data_charts_array['labels'] ?? '', 'chart_title' => $chart_title ?? '', 'chart_title_align' => $chart_title_align ?? '', 'chart_title_color' => $chart_title_color ?? '', 'chart_title_position' => $chart_title_position ?? '', 'chart_tooltip_bg_color' => $chart_tooltip_bg_color, 'chart_tooltip_item_align' => $chart_tooltip_item_align, 'chart_tooltip_item_color' => $chart_tooltip_item_color, 'chart_tooltip_item_font' => $chart_tooltip_item_font, 'chart_tooltip_item_font_size' => $chart_tooltip_item_font_size['size'] ?? 1, 'chart_tooltip_item_spacing' => $chart_tooltip_item_spacing['size'] ?? 1, 'chart_tooltip_title_align' => $chart_tooltip_title_align, 'chart_tooltip_title_color' => $chart_tooltip_title_color, 'chart_tooltip_title_font' => $chart_tooltip_title_font, 'chart_tooltip_title_font_size' => $chart_tooltip_title_font_size['size'] ?? 1, 'chart_tooltip_title_margin_bottom' => $chart_tooltip_title_margin_bottom['size'] ?? 1, 'chart_type' => $chart_type, 'data_source' => $data_source, 'data_type' => $settings['data_type'] ?? 'linear', 'display_r_axis' => $display_r_axis, 'display_r_ticks' => $display_r_ticks, 'display_x_axis' => $display_x_axis, 'display_x_axis_title' => $display_x_axis_title, 'display_x_ticks' => $display_x_ticks, 'display_y_axis' => $display_y_axis, 'display_y_axis_title' => $display_y_axis_title, 'display_y_ticks' => $display_y_ticks, 'exclude_dataset_on_click' => $exclude_dataset_on_click, 'grid_line_width_r' => $grid_line_width_r, 'grid_line_width_x' => $grid_line_width_x, 'grid_line_width_y' => $grid_line_width_y, 'inner_datalabels' => $inner_datalabels, 'inner_datalabels_color' => $inner_datalabels_color, 'inner_datalabels_font_family' => $inner_datalabels_font_family ?? '', 'inner_datalabels_font_size' => $inner_datalabels_font_size['size'] ?? '', 'inner_datalabels_font_style' => $inner_datalabels_font_style ?? '', 'inner_datalabels_font_weight' => $inner_datalabels_font_weight ?? '', 'legend_align' => $charts_legend_align, 'legend_box_width' => $legend_box_width['size'], 'legend_font_family' => $legend_font_family, 'legend_font_size' => $legend_font_size['size'], 'legend_font_style' => $legend_font_style, 'legend_font_weight' => $legend_font_weight, 'legend_padding' => $chart_legend_padding['size'], 'legend_position' => $charts_legend_position, 'legend_shape' => $charts_legend_shape, 'legend_text_color' => $chart_legend_text_color, 'line_dots' => $line_dots ?? '', 'line_dots_radius' => $line_dots_radius['size'] ?? '', 'line_dots_radius_mobile' => $line_dots_radius_mobile['size'] ?? 0, 'max_value' => $max_value, 'min_value' => $min_value, 'point_labels_color_r' => $chart_point_labels_color_r ?? '', 'point_labels_font_family_r' => $point_labels_font_family_r, 'point_labels_font_size_r' => $point_labels_font_size_r['size'] ?? '', 'point_labels_font_style_r' => $point_labels_font_style_r, 'point_labels_font_weight_r' => $point_labels_font_weight_r, 'r_step_size' => $r_step_size, 'reverse_legend' => $reverse_legend, 'reverse_x' => $reverse_x, 'reverse_y' => $reverse_y, 'rotation_x' => $labels_rotation_x_axis, 'rotation_y' => $labels_rotation_y_axis, 'separator' => $data_csv_separator, 'show_chart_legend' => $show_chart_legend, 'show_chart_title' => $show_chart_title, 'show_chart_tooltip' => $show_chart_tooltip, 'show_lines' => $show_lines ?? '', 'stacked_bar_chart' => $stacked_bar_chart ?? '', 'ticks_color_x' => $chart_ticks_color_x, 'ticks_color_y' => $chart_ticks_color_y ?? '', 'ticks_font_family_x' => $ticks_font_family_x, 'ticks_font_family_y' => $ticks_font_family_y, 'ticks_font_size_x' => $ticks_font_size_x['size'] ?? '', 'ticks_font_size_y' => $ticks_font_size_y['size'] ?? '', 'ticks_font_style_x' => $ticks_font_style_x, 'ticks_font_style_y' => $ticks_font_style_y, 'ticks_font_weight_x' => $ticks_font_weight_x, 'ticks_font_weight_y' => $ticks_font_weight_y, 'ticks_padding_x' => $ticks_padding_x['size'] ?? '', 'ticks_padding_y' => $ticks_padding_y['size'] ?? '', 'title_font_family' => $title_font_family, 'title_font_size' => $title_font_size['size'] ?? '', 'title_font_style' => $title_font_style ?? '', 'title_font_weight' => $title_font_weight, 'title_padding' => $chart_title_padding['size'] ?? '', 'tooltips_percent' => $tooltips_percent, 'tooltip_caret_size' => $tooltip_caret_size['size'] ?? 1, 'tooltip_caret_size_mobile' => $tooltip_caret_size_mobile['size'] ?? 0, 'tooltip_padding' => $tooltip_padding['size'] ?? 1, 'tooltip_position' => $chart_tooltip_position, 'trigger_tooltip_on' => $trigger_tooltip_on, 'url' => !empty($data_source_csv_url) ? $data_source_csv_url : (!empty($data_source_csv_file['url']) ? $data_source_csv_file['url'] : ''), 'x_axis_title' => $x_axis_title, 'x_step_size' => $x_step_size, 'y_axis_title' => $y_axis_title, 'y_step_size' => $y_step_size, ]; $this->add_render_attribute('chart-settings', [ 'class' => 'king-addons-charts-container', 'data-settings' => wp_json_encode($layout_settings), ]); echo '
get_render_attribute_string('chart-settings') . '>'; if ($data_source === 'csv') { echo ''; } echo '
'; echo ''; echo '
'; } }