0
# Basic Chart Types
1

2
Common chart types for everyday data visualization including scatter plots, bar charts, histograms, pie charts, and box plots.
3

4
## Capabilities
5

6
### Scatter Plots
7

8
Line charts, scatter plots, and bubble charts using the scatter trace type.
9

10
```javascript { .api }
11
/**
12
 * Scatter plot trace configuration
13
 */
14
interface ScatterTrace {
15
  type: 'scatter';
16
  x: any[];
17
  y: any[];
18
  mode?: 'lines' | 'markers' | 'lines+markers' | 'lines+markers+text' | 'none';
19
  name?: string;
20
  text?: string | string[];
21
  textposition?: string;
22
  marker?: {
23
    size?: number | number[];
24
    color?: string | string[] | number[];
25
    symbol?: string | string[];
26
    line?: {
27
      width?: number;
28
      color?: string;
29
    };
30
    colorscale?: string;
31
    showscale?: boolean;
32
  };
33
  line?: {
34
    color?: string;
35
    width?: number;
36
    dash?: 'solid' | 'dot' | 'dash' | 'longdash' | 'dashdot' | 'longdashdot';
37
    shape?: 'linear' | 'spline' | 'hv' | 'vh' | 'hvh' | 'vhv';
38
  };
39
  fill?: 'none' | 'tozeroy' | 'tozerox' | 'tonexty' | 'tonextx' | 'toself' | 'tonext';
40
  fillcolor?: string;
41
}
42
```
43

44
**Usage Examples:**
45

46
```javascript
47
// Basic line chart
48
Plotly.newPlot('myDiv', [{
49
    x: [1, 2, 3, 4, 5],
50
    y: [1, 4, 2, 8, 5],
51
    type: 'scatter',
52
    mode: 'lines',
53
    name: 'Line Chart'
54
}]);
55

56
// Scatter plot with markers
57
Plotly.newPlot('myDiv', [{
58
    x: [1, 2, 3, 4, 5],
59
    y: [1, 4, 2, 8, 5],
60
    type: 'scatter',
61
    mode: 'markers',
62
    marker: {
63
        size: 12,
64
        color: 'red',
65
        symbol: 'circle'
66
    }
67
}]);
68

69
// Bubble chart (varying marker sizes)
70
Plotly.newPlot('myDiv', [{
71
    x: [1, 2, 3, 4, 5],
72
    y: [1, 4, 2, 8, 5],
73
    type: 'scatter',
74
    mode: 'markers',
75
    marker: {
76
        size: [10, 20, 30, 40, 50],
77
        color: [1, 2, 3, 4, 5],
78
        colorscale: 'Viridis',
79
        showscale: true
80
    }
81
}]);
82

83
// Filled area chart
84
Plotly.newPlot('myDiv', [{
85
    x: [1, 2, 3, 4, 5],
86
    y: [1, 4, 2, 8, 5],
87
    type: 'scatter',
88
    mode: 'lines',
89
    fill: 'tozeroy',
90
    fillcolor: 'rgba(255, 0, 0, 0.3)'
91
}]);
92
```
93

94
### Bar Charts
95

96
Vertical and horizontal bar charts for categorical data.
97

98
```javascript { .api }
99
/**
100
 * Bar chart trace configuration
101
 */
102
interface BarTrace {
103
  type: 'bar';
104
  x?: any[];
105
  y?: any[];
106
  orientation?: 'v' | 'h';
107
  name?: string;
108
  text?: string | string[];
109
  textposition?: 'inside' | 'outside' | 'auto' | 'none';
110
  marker?: {
111
    color?: string | string[] | number[];
112
    colorscale?: string;
113
    line?: {
114
      color?: string;
115
      width?: number;
116
    };
117
  };
118
  width?: number | number[];
119
  offset?: number;
120
  base?: number | number[];
121
}
122
```
123

124
**Usage Examples:**
125

126
```javascript
127
// Vertical bar chart
128
Plotly.newPlot('myDiv', [{
129
    x: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
130
    y: [20, 14, 23, 25, 22],
131
    type: 'bar',
132
    name: 'Sales'
133
}]);
134

135
// Horizontal bar chart
136
Plotly.newPlot('myDiv', [{
137
    x: [20, 14, 23, 25, 22],
138
    y: ['Product A', 'Product B', 'Product C', 'Product D', 'Product E'],
139
    type: 'bar',
140
    orientation: 'h'
141
}]);
142

143
// Grouped bar chart
144
Plotly.newPlot('myDiv', [
145
    {
146
        x: ['Jan', 'Feb', 'Mar'],
147
        y: [20, 14, 23],
148
        type: 'bar',
149
        name: 'Series 1'
150
    },
151
    {
152
        x: ['Jan', 'Feb', 'Mar'],
153
        y: [16, 18, 17],
154
        type: 'bar',
155
        name: 'Series 2'
156
    }
157
]);
158

159
// Stacked bar chart
160
Plotly.newPlot('myDiv', [
161
    {
162
        x: ['Jan', 'Feb', 'Mar'],
163
        y: [20, 14, 23],
164
        type: 'bar',
165
        name: 'Series 1'
166
    },
167
    {
168
        x: ['Jan', 'Feb', 'Mar'],
169
        y: [16, 18, 17],
170
        type: 'bar',
171
        name: 'Series 2'
172
    }
173
], {
174
    barmode: 'stack'
175
});
176
```
177

178
### Histograms
179

180
Distribution visualization for continuous data.
181

182
```javascript { .api }
183
/**
184
 * Histogram trace configuration
185
 */
186
interface HistogramTrace {
187
  type: 'histogram';
188
  x?: number[];
189
  y?: number[];
190
  nbinsx?: number;
191
  nbinsy?: number;
192
  autobinx?: boolean;
193
  autobiny?: boolean;
194
  xbins?: {
195
    start?: number;
196
    end?: number;
197
    size?: number;
198
  };
199
  ybins?: {
200
    start?: number;
201
    end?: number;
202
    size?: number;
203
  };
204
  histfunc?: 'count' | 'sum' | 'avg' | 'min' | 'max';
205
  histnorm?: '' | 'percent' | 'probability' | 'density' | 'probability density';
206
  name?: string;
207
  marker?: {
208
    color?: string;
209
    line?: {
210
      color?: string;
211
      width?: number;
212
    };
213
  };
214
}
215
```
216

217
**Usage Examples:**
218

219
```javascript
220
// Basic histogram
221
Plotly.newPlot('myDiv', [{
222
    x: [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5],
223
    type: 'histogram',
224
    nbinsx: 10
225
}]);
226

227
// Normalized histogram
228
Plotly.newPlot('myDiv', [{
229
    x: [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5],
230
    type: 'histogram',
231
    histnorm: 'probability'
232
}]);
233

234
// Custom bin configuration
235
Plotly.newPlot('myDiv', [{
236
    x: [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5],
237
    type: 'histogram',
238
    xbins: {
239
        start: 0,
240
        end: 6,
241
        size: 0.5
242
    }
243
}]);
244
```
245

246
### Pie Charts
247

248
Circular charts for showing proportions and percentages.
249

250
```javascript { .api }
251
/**
252
 * Pie chart trace configuration
253
 */
254
interface PieTrace {
255
  type: 'pie';
256
  labels: string[];
257
  values: number[];
258
  name?: string;
259
  hole?: number;
260
  pull?: number | number[];
261
  rotation?: number;
262
  direction?: 'clockwise' | 'counterclockwise';
263
  sort?: boolean;
264
  textinfo?: string;
265
  textposition?: 'inside' | 'outside' | 'auto' | 'none';
266
  marker?: {
267
    colors?: string[];
268
    line?: {
269
      color?: string | string[];
270
      width?: number;
271
    };
272
  };
273
  domain?: {
274
    x?: [number, number];
275
    y?: [number, number];
276
  };
277
}
278
```
279

280
**Usage Examples:**
281

282
```javascript
283
// Basic pie chart
284
Plotly.newPlot('myDiv', [{
285
    labels: ['Oxygen', 'Hydrogen', 'Carbon_Dioxide', 'Nitrogen'],
286
    values: [4500, 2500, 1053, 500],
287
    type: 'pie'
288
}]);
289

290
// Donut chart
291
Plotly.newPlot('myDiv', [{
292
    labels: ['A', 'B', 'C', 'D'],
293
    values: [40, 30, 20, 10],
294
    type: 'pie',
295
    hole: 0.4
296
}]);
297

298
// Pie chart with pulled slices
299
Plotly.newPlot('myDiv', [{
300
    labels: ['A', 'B', 'C', 'D'],
301
    values: [40, 30, 20, 10],
302
    type: 'pie',
303
    pull: [0, 0, 0.2, 0]  // Pull out third slice
304
}]);
305
```
306

307
### Box Plots
308

309
Statistical distribution visualization showing quartiles, outliers, and median.
310

311
```javascript { .api }
312
/**
313
 * Box plot trace configuration
314
 */
315
interface BoxTrace {
316
  type: 'box';
317
  x?: any[];
318
  y?: number[];
319
  name?: string;
320
  orientation?: 'v' | 'h';
321
  boxpoints?: 'all' | 'outliers' | 'suspectedoutliers' | false;
322
  boxmean?: true | 'sd' | false;
323
  notched?: boolean;
324
  whiskerwidth?: number;
325
  width?: number;
326
  offset?: number;
327
  marker?: {
328
    color?: string;
329
    size?: number;
330
    outliercolor?: string;
331
  };
332
  line?: {
333
    color?: string;
334
    width?: number;
335
  };
336
  fillcolor?: string;
337
}
338
```
339

340
**Usage Examples:**
341

342
```javascript
343
// Basic box plot
344
Plotly.newPlot('myDiv', [{
345
    y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15],
346
    type: 'box',
347
    name: 'Sample Data'
348
}]);
349

350
// Grouped box plots
351
Plotly.newPlot('myDiv', [
352
    {
353
        y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
354
        type: 'box',
355
        name: 'Group A'
356
    },
357
    {
358
        y: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
359
        type: 'box',
360
        name: 'Group B'
361
    }
362
]);
363

364
// Box plot with all points shown
365
Plotly.newPlot('myDiv', [{
366
    y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15],
367
    type: 'box',
368
    boxpoints: 'all',
369
    boxmean: true
370
}]);
371
```
372

373
### Violin Plots
374

375
Distribution visualization combining box plot and kernel density estimation.
376

377
```javascript { .api }
378
/**
379
 * Violin plot trace configuration
380
 */
381
interface ViolinTrace {
382
  type: 'violin';
383
  x?: any[];
384
  y?: number[];
385
  name?: string;
386
  orientation?: 'v' | 'h';
387
  side?: 'both' | 'positive' | 'negative';
388
  width?: number;
389
  points?: 'all' | 'outliers' | 'suspectedoutliers' | false;
390
  box?: {
391
    visible?: boolean;
392
    width?: number;
393
  };
394
  meanline?: {
395
    visible?: boolean;
396
  };
397
  span?: [number, number];
398
  bandwidth?: number;
399
}
400
```
401

402
**Usage Examples:**
403

404
```javascript
405
// Basic violin plot
406
Plotly.newPlot('myDiv', [{
407
    y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 2, 3, 4, 5, 6],
408
    type: 'violin',
409
    name: 'Distribution'
410
}]);
411

412
// Violin plot with box plot inside
413
Plotly.newPlot('myDiv', [{
414
    y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 2, 3, 4, 5, 6],
415
    type: 'violin',
416
    box: {
417
        visible: true
418
    },
419
    meanline: {
420
        visible: true
421
    }
422
}]);
423
```
424

425
## Layout Options for Basic Charts
426

427
### Bar Chart Layout
428
```javascript { .api }
429
interface BarLayoutOptions {
430
  barmode?: 'stack' | 'group' | 'overlay' | 'relative';
431
  bargap?: number;
432
  bargroupgap?: number;
433
}
434
```
435

436
### Common Axis Configuration
437
```javascript { .api }
438
interface BasicAxisOptions {
439
  title?: string;
440
  type?: 'linear' | 'log' | 'date' | 'category' | 'multicategory';
441
  range?: [number, number];
442
  autorange?: boolean | 'reversed';
443
  showgrid?: boolean;
444
  zeroline?: boolean;
445
  showline?: boolean;
446
  showticklabels?: boolean;
447
  tickmode?: 'linear' | 'array';
448
  tick0?: number;
449
  dtick?: number;
450
  tickvals?: any[];
451
  ticktext?: string[];
452
}
453
```