2.4 KiB
Executable file
| title | date | description | summary | tags | showDate | type | ||||
|---|---|---|---|---|---|---|---|---|---|---|
| Charts | 2019-03-06 | Guide to Chart.js usage in Blowfish | Blowfish includes Chart.js for powerful charts and data visualisations. |
|
false | sample |
Blowfish includes support for Chart.js using the chart shortcode. Simply wrap the chart markup within the shortcode. Blowfish automatically themes charts to match the configured colorScheme parameter, however the colours can be customised using normal Chart.js syntax.
Refer to the [chart shortcode]({{< ref "docs/shortcodes#chart" >}}) docs for more details.
The examples below are a small selection taken from the official Chart.js docs. You can also view the page source on GitHub to see the markup.
Bar chart
{{< chart >}} type: 'bar', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55, 40], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)' ], borderColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)' ], borderWidth: 1 }] } {{< /chart >}}
Line chart
{{< chart >}} type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55, 40], tension: 0.2 }] } {{< /chart >}}
Doughnut chart
{{< chart >}} type: 'doughnut', data: { labels: ['Red', 'Blue', 'Yellow'], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgba(255, 99, 132, 0.7)', 'rgba(54, 162, 235, 0.7)', 'rgba(255, 205, 86, 0.7)' ], borderWidth: 0, hoverOffset: 4 }] } {{< /chart >}}