>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3391197. --> Reported by: [andileco](https://www.drupal.org/user/2054544) Related to !141 !128 !75 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>Boxplot and candlestick chart types are relatively common and available in several of the charting libraries included in the Charts module. Now that we can dynamically control which chart type options are available for a given library, we can include these without adding confusion: <a href="https://www.drupal.org/project/charts/issues/3390738">https://www.drupal.org/project/charts/issues/3390738</a></p> <p>Here's a table showing support for area range, boxplots, candlestick charts, and heat maps (with links):</p> <table class="table table-bordered"> <thead> <tr> <th>Library</th> <th>Area range</th> <th>Boxplot</th> <th>Candlestick</th> <th>Heatmap</th> </tr> </thead> <tbody> <tr> <td><a href="https://www.drupal.org/project/charts_apexcharts">Apexcharts.js</a></td> <td> <a href="https://apexcharts.com/javascript-chart-demos/range-area-charts/">Yes</a><br><br> <span>Data format: <code>data: [{x: 'Jan', y: [-2, 4]},]</code></span> </td> <td> <a href="https://apexcharts.com/javascript-chart-demos/box-whisker-charts/basic/">Yes</a><br><br> <span>Data format: <code>data: [{x: 'Jan 2015', y: [54, 66, 69, 75, 88]},]</code></span> </td> <td> <a href="https://apexcharts.com/javascript-chart-demos/candlestick-charts/basic/">Yes</a><br><br> <span>Data format: <code>data: [{x: 'Jan 2015', y: [66, 69, 75, 88]},]</code></span> </td><td> <a href="https://apexcharts.com/javascript-chart-demos/heatmap-charts/basic/">Yes</a><br><br> <span>Data format: <code>data: [{x: 'Jan', y: 20, value: 20},]</code></span><br> </td></tr> <tr> <td>Billboard.js</td> <td> <a href="https://naver.github.io/billboard.js/demo/#Chart.AreaRangeChart">Yes</a><br><br> <span>Data format: <code>data:{columns:[["data1", [1327, 1289, 1348],]}</code></span> </td> <td> No </td><td> <a href="https://naver.github.io/billboard.js/demo/#Chart.CandlestickChart">Yes</a><br><br> <span>Data format: <code>data:{columns:[["data1", [1327, 1369, 1289, 1348],]}</code></span> </td> <td> No </td> </tr> <tr> <td>C3.js</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td>Chart.js</td> <td>Maybe?</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="https://www.drupal.org/project/charts_echarts">eCharts</a></td> <td> <a href="https://echarts.apache.org/en/option.html#series-line.areaStyle">Maybe?</a><br> </td><td> <a href="https://echarts.apache.org/examples/en/editor.html?c=boxplot-light-velocity">Yes</a><br><br> <span>Data format: <code>data: [[1, 2, 3, 4, 5],]</code></span> </td> <td> <a href="https://echarts.apache.org/examples/en/editor.html?c=candlestick-simple">Yes</a><br><br> <span>Data format: <code>data: [[1, 2, 3, 4],]</code></span> </td> <td> <a href="https://echarts.apache.org/examples/en/editor.html?c=heatmap-cartesian">Yes</a><br><br> <span>Data format: <code>data: [[1, 2, 3],]</code></span><br> </td></tr> <tr> <td>Google Charts</td> <td> No </td> <td> <a href="https://developers.google.com/chart/interactive/docs/gallery/intervals#box-plot">Yes</a><br><br> <span>Data format: <code>[['a', 100, 90, 110, 85, 96, 104, 120],]</code></span> </td> <td> <a href="https://developers.google.com/chart/interactive/docs/gallery/candlestickchart">Yes</a><br><br> <span>Data format: <code>[['Mon', 20, 28, 38, 45],]</code></span> </td> <td> No<br> </td></tr> <tr> <td>Highcharts</td> <td> <a href="https://www.highcharts.com/demo/highcharts/arearange">Yes</a><br><br> <span>Data format: <code>data: [[760, 801],]</code></span> </td><td> <a href="https://www.highcharts.com/demo/highcharts/box-plot">Yes</a><br><br> <span>Data format: <code>data: [[760, 801, 848, 895, 965],]</code></span> </td> <td>No</td> <td> <a href="https://www.highcharts.com/demo/highcharts/heatmap">Yes</a><br><br> <span>Data format: <code>data: [[1, 2, 3],]</code></span><br> </td></tr> <tr> <td><a href="https://www.drupal.org/project/charts_highstock">Highcharts Stock</a></td> <td>Yes, since Highcharts is included in Highcharts Stock</td> <td>Yes, since Highcharts is included in Highcharts Stock</td> <td> <a href="https://www.highcharts.com/demo/stock/candlestick">Yes</a><br><br> <span>Data format: <code>data: [[1, 2, 3, 4],]</code></span> </td> <td>Yes, since Highcharts is included in Highcharts Stock</td> </tr> </tbody> </table>