a7d6b37d8f
Solved #460.  --------- Signed-off-by: George Araújo <george.gcac@gmail.com>
188 lines
3.3 KiB
Markdown
188 lines
3.3 KiB
Markdown
---
|
|
layout: post
|
|
title: a post with chart.js
|
|
date: 2024-01-26 01:04:00
|
|
description: this is what included chart.js code could look like
|
|
tags: formatting charts
|
|
categories: sample-posts
|
|
chart: true
|
|
---
|
|
|
|
This is an example post with some chart.js code.
|
|
|
|
````markdown
|
|
```chart
|
|
{
|
|
"type": "line",
|
|
"data": {
|
|
"labels": [
|
|
"January",
|
|
"February",
|
|
"March",
|
|
"April",
|
|
"May",
|
|
"June",
|
|
"July"
|
|
],
|
|
"datasets": [
|
|
{
|
|
"label": "# of bugs",
|
|
"fill": false,
|
|
"lineTension": 0.1,
|
|
"backgroundColor": "rgba(75,192,192,0.4)",
|
|
"borderColor": "rgba(75,192,192,1)",
|
|
"borderCapStyle": "butt",
|
|
"borderDash": [],
|
|
"borderDashOffset": 0,
|
|
"borderJoinStyle": "miter",
|
|
"pointBorderColor": "rgba(75,192,192,1)",
|
|
"pointBackgroundColor": "#fff",
|
|
"pointBorderWidth": 1,
|
|
"pointHoverRadius": 5,
|
|
"pointHoverBackgroundColor": "rgba(75,192,192,1)",
|
|
"pointHoverBorderColor": "rgba(220,220,220,1)",
|
|
"pointHoverBorderWidth": 2,
|
|
"pointRadius": 1,
|
|
"pointHitRadius": 10,
|
|
"data": [
|
|
65,
|
|
59,
|
|
80,
|
|
81,
|
|
56,
|
|
55,
|
|
40
|
|
],
|
|
"spanGaps": false
|
|
}
|
|
]
|
|
},
|
|
"options": {}
|
|
}
|
|
```
|
|
````
|
|
|
|
This is how it looks like:
|
|
|
|
```chart
|
|
{
|
|
"type": "line",
|
|
"data": {
|
|
"labels": [
|
|
"January",
|
|
"February",
|
|
"March",
|
|
"April",
|
|
"May",
|
|
"June",
|
|
"July"
|
|
],
|
|
"datasets": [
|
|
{
|
|
"label": "# of bugs",
|
|
"fill": false,
|
|
"lineTension": 0.1,
|
|
"backgroundColor": "rgba(75,192,192,0.4)",
|
|
"borderColor": "rgba(75,192,192,1)",
|
|
"borderCapStyle": "butt",
|
|
"borderDash": [],
|
|
"borderDashOffset": 0,
|
|
"borderJoinStyle": "miter",
|
|
"pointBorderColor": "rgba(75,192,192,1)",
|
|
"pointBackgroundColor": "#fff",
|
|
"pointBorderWidth": 1,
|
|
"pointHoverRadius": 5,
|
|
"pointHoverBackgroundColor": "rgba(75,192,192,1)",
|
|
"pointHoverBorderColor": "rgba(220,220,220,1)",
|
|
"pointHoverBorderWidth": 2,
|
|
"pointRadius": 1,
|
|
"pointHitRadius": 10,
|
|
"data": [
|
|
65,
|
|
59,
|
|
80,
|
|
81,
|
|
56,
|
|
55,
|
|
40
|
|
],
|
|
"spanGaps": false
|
|
}
|
|
]
|
|
},
|
|
"options": {}
|
|
}
|
|
```
|
|
|
|
Also another example chart.
|
|
|
|
````markdown
|
|
```chart
|
|
{
|
|
"type": "doughnut",
|
|
"data": {
|
|
"labels": [
|
|
"Red",
|
|
"Blue",
|
|
"Yellow"
|
|
],
|
|
"datasets": [
|
|
{
|
|
"data": [
|
|
300,
|
|
50,
|
|
100
|
|
],
|
|
"backgroundColor": [
|
|
"#FF6384",
|
|
"#36A2EB",
|
|
"#FFCE56"
|
|
],
|
|
"hoverBackgroundColor": [
|
|
"#FF6384",
|
|
"#36A2EB",
|
|
"#FFCE56"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
"options": {}
|
|
}
|
|
```
|
|
````
|
|
|
|
Which generates:
|
|
|
|
```chart
|
|
{
|
|
"type": "doughnut",
|
|
"data": {
|
|
"labels": [
|
|
"Red",
|
|
"Blue",
|
|
"Yellow"
|
|
],
|
|
"datasets": [
|
|
{
|
|
"data": [
|
|
300,
|
|
50,
|
|
100
|
|
],
|
|
"backgroundColor": [
|
|
"#FF6384",
|
|
"#36A2EB",
|
|
"#FFCE56"
|
|
],
|
|
"hoverBackgroundColor": [
|
|
"#FF6384",
|
|
"#36A2EB",
|
|
"#FFCE56"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
"options": {}
|
|
}
|
|
```
|