Chart Types

To create different chart types using the provided shortcode format for WP-CanvasJS, you can adjust the options object within the shortcode. Here's how you can modify it for various chart types:

1. Line Chart:

[canvasjschart options="{title:{text: 'CanvasJS Line Chart'}, data: new Array({type: 'line', dataPoints: new Array({ x: 10, y: 71 },{ x: 20, y: 55 },{ x: 30, y: 50 },{ x: 40, y: 65 },{ x: 50, y: 95 })})}"]

2. Column Chart:

[canvasjschart options="{title:{text: 'CanvasJS Line Chart'}, data: new Array({type: 'column', dataPoints: new Array({ x: 10, y: 71 },{ x: 20, y: 55 },{ x: 30, y: 50 },{ x: 40, y: 65 },{ x: 50, y: 95 })})}"]

3. Stacked Column Chart

[canvasjschart options="{title:{text: 'CanvasJS Column Chart'}, data: new Array({type: 'stackedColumn',dataPoints: new Array({ label: 'apple', y: 10 },{ label: 'orange', y: 15 },{ label: 'banana', y: 25 },{ label: 'mango', y: 30 },{ label: 'grape', y: 28 })},{type: 'stackedColumn',dataPoints: new Array({ label: 'apple', y: 10 },{ label: 'orange', y: 15 },{ label: 'banana', y: 25 },{ label: 'mango', y: 30 },{ label: 'grape', y: 28 })})}" style="width:100%;height:360px"]

4. Bar Chart:

[canvasjschart options="{title:{text: 'CanvasJS Line Chart'}, data: new Array({type: 'bar', dataPoints: new Array({ x: 10, y: 71 },{ x: 20, y: 55 },{ x: 30, y: 50 },{ x: 40, y: 65 },{ x: 50, y: 95 })})}"]

5. Stacked Bar Chart

[canvasjschart options="{title:{text: 'CanvasJS Column Chart'}, data: new Array({type: 'stackedBar',dataPoints: new Array({ label: 'apple', y: 10 },{ label: 'orange', y: 15 },{ label: 'banana', y: 25 },{ label: 'mango', y: 30 },{ label: 'grape', y: 28 })},{type: 'stackedBar',dataPoints: new Array({ label: 'apple', y: 10 },{ label: 'orange', y: 15 },{ label: 'banana', y: 25 },{ label: 'mango', y: 30 },{ label: 'grape', y: 28 })})}" style="width:100%;height:360px"]

6. Area Chart:

[canvasjschart options="{title:{text: 'CanvasJS Area Chart'}, data: new Array({type: 'area', dataPoints: new Array({ x: 10, y: 71 },{ x: 20, y: 55 },{ x: 30, y: 50 },{ x: 40, y: 65 },{ x: 50, y: 95 })})}"]

7. Pie Chart:

[canvasjschart options="{title:{text: 'CanvasJS Pie Chart'}, data: new Array({type: 'pie', startAngle: 45, indexLabel: '{label} - #percent%', dataPoints: new Array({ label: 'apple', y: 10 },{ label: 'orange', y: 15 },{ label: 'banana', y: 25 },{ label: 'mango', y: 30 },{ label: 'grape', y: 28 })})}"]

8. Candlestick Chart:

[canvasjschart options="{title:{text: 'CanvasJS Candlestick Chart'}, data: new Array({type: 'candlestick', dataPoints: new Array({ x: 10, y: new Array(20, 30, 10, 15) },{ x: 20, y: new Array(30, 40, 20, 35) },{ x: 30, y: new Array(35, 45, 25, 40) },{ x: 40, y: new Array(45, 50, 30, 40) },{ x: 50, y: new Array(40, 60, 35, 55) })})}"] By adjusting the type attribute within the data object of the shortcode options, you can easily switch between different chart types using the WP-CanvasJS plugin for WordPress. Ensure your data is correctly formatted for each chart type to achieve accurate and visually appealing visualizations.