Create a new widget using code called “Newer Area Chart” without using any json files. Prioritize compatibility with WordPress and elementor.

For Content: Make a categories section for both X and Y values that allows inputs of categories individually. Allow those inputs to be customized with a full range of topography options, color options, and transparency. Make a Chart Settings category that allows options for the shape of the area, and label settings.Make a category for Legend Settings.Add an option to have a highlighted zone section that highlights a portion of the area graph with 2 vertical lines. Allow options for color changes, and make the animation appear from the bottle of the chart, animate upwards, and then split off into two lines with the highlighted section in the middle. Allow options to change the speed of the animation and for the highlighted range to be completely contained within the fill of the selected graph section.For the Style section: Make a full range of options for the card style that includes toggling the background on and off as well as the option to add or remove the grid or lines. Allow full topography and color options to all text and lines.Add options to change the chart size by pixels for both height and width which scale accordingly. Add animation settings that allow options to animate when the graph appears on the viewing screen, has options for speed and delay in milliseconds.Make the animation ultra smooth and animate from left to right from the first data point to the last, almost in a snake like fashion. Have the fill follow the stroke as it animates from left to right. Add an option to change the size and color of the stroke on the top of the fill area. Add an option to edit the points on the graph as well as remove them.

For the highlighted zone, add an option to delay its animation in milliseconds.Add options for labels for both Y and X axis.For all labels, allow options to change color for each individual value without affecting a point color.Allow all color options to have gradient abilities. 

Add an option for the Y axis to have a minimum and a maximum.Add the option to change the gradient direction of the fill and highlighted area.

Create a new widget using code named “Angie Progress Bar 2”.Give it the same code as a usual progress bar widget, but with these additions:Add an option to have fill gradient capabilities for the fill color.Add an option to give it a sleek 3d effect, and a shadow effect.Add an option to round both ends of the progress bar.Add an option for the animation that allows it to either start from the left and animate to the right, or start from the right and animate left, or start from the middle, and animate out left and right simultaneously.

Add options for animation speed and delay. 

Add option for gradient direction and type, so that one option is to have the gradient start in the middle and change color outwards in both directions. Radial might be good here. 

Add option to add a border to the fill section with full color options. 

My Skill
Web Designer 50%
Progress Bar
0%

Create a new widget using code called “Area Chart New 6/27” without using a JSON file.

Give it all the normal options for a WordPress area chart.

Give it the option to animate from the first X axis data point to the last in an ultra smooth, snakelike animation.

Give options to change the speed and delay of that animation and allow option to start the animation upon appearing on the screen.

Add a “Highlighted Zone” option that allows for a section of the fill area to be highlighted. 

Make the animation appear as a solid line that grows from the bottom of the graph to the top of the fill area, then splits into 2 solid lines and have each move left and right respectively. Give options for speed and delay for this animation.

Give color options for the main fill, the highlighted section, and all values, including gradient, gradient direction, and transparency. 

This looks great, but there are some edits:Add an option under Style to add or remove the circular points on the stroke line at the top of the fill area.The color settings aren’t working for the X and Y axis lines, or the X and Y axis Titles, or the X and Y Values. Fix that.Add an option to change the color of each value on the X and Y axis individually, including transparency.

Make a new area chart widget using code called “New New Area Chart” without using a JSON file .Give it options for font style, font size, and font color for the X and Y axis. Add an option to highlight portions of the graph with vertical lines and shaded areas from inputs. Give the graph animation options like slow, smooth animation from left to right. Give an option to animate when the graph comes into view of the screen. give color options for the fill of the graph, as well as the stroke. give the stroke size options. allow all coloring to be gradient.

For style options, allow input for chart size in terms of pixels for width and height which will scale accordingly. Put in an option to make the chart stroke style smooth, straight, or step line. Add option for highlight zone to be contained within the area chart fill. Add options for X and Y axis labels.

Also make the highlight zone animate after the area chart animation finishes, and have it pop up from the bottom in the middle, then split apart to create the highlight zone.