Blank Chart Templates

Implementation Instructions

1. Include the Charts Library

First, include the blank-charts.js file in your page:

<script src="assets/js/charts/blank-charts.js"></script>

2. Create a Container

Add a container element where you want to display the chart:

<div id="myChartContainer" style="width: 100%; height: 300px;"></div>

3. Initialize the Chart

Call the appropriate chart creation method:

<script>
    // Create a line chart
    BlankCharts.createLineChart('myChartContainer', 600, 400, {
        lineColor: '#3498db',
        backgroundColor: '#ffffff',
        gridColor: '#e0e0e0',
        showGrid: true
    });
    
    // Or create a bar chart
    // BlankCharts.createBarChart('myChartContainer', 600, 400, {...});
    
    // Or create a pie chart
    // BlankCharts.createPieChart('myChartContainer', 400, 400, {...});
    
    // Or create an area chart
    // BlankCharts.createAreaChart('myChartContainer', 600, 400, {...});
    
    // Or create a scatter plot
    // BlankCharts.createScatterPlot('myChartContainer', 600, 400, {...});
</script>

4. Customization Options

Each chart type supports various options for customization:

• Line Chart Options: lineColor, backgroundColor, gridColor, axisColor, showGrid, padding
• Bar Chart Options: barColor, backgroundColor, gridColor, axisColor, showGrid, padding, barCount
• Pie Chart Options: backgroundColor, colors (array), padding, sliceCount
• Area Chart Options: areaColor, backgroundColor, gridColor, axisColor, showGrid, padding
• Scatter Plot Options: pointColor, backgroundColor, gridColor, axisColor, showGrid, padding, pointCount, pointRadius