Hi, I’m trying to replicate a chart like this. Is this possible with quickchart?? Tahnks
Hi @Gerog13,
It is indeed possible to replicate a chart like this with QuickChart. Using Chart.js v3 and the Annotations plugin:
Here is a link to the chart editor
In summary, we use the annotations plugin to add labels to a horizontal bar chart. getGradientFillHelper is used to create a gradient.
I set the bar value to 100, so that you can think of the xValue positioning as percentage based (e.g. xValue: 75 will indicate approximately 75%).
You may find the chartjs-plugin-annotations documentation useful if you’re interested in learning more about chart labeling.
Hope this helps!
{
type: 'bar',
data: {
labels: ['Q1'],
datasets: [
{
label: 'Users',
data: [100],
backgroundColor: getGradientFillHelper('horizontal', [
'green',
'yellow',
'orange',
'red',
]),
},
],
},
options: {
indexAxis: 'y',
layout: {
padding: 40,
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
plugins: {
legend: {
display: false,
},
annotation: {
clip: false,
common: {
drawTime: 'afterDraw',
},
annotations: {
low: {
type: 'label',
xValue: 4,
content: ['Low'],
font: {
size: 18,
weight: 'bold',
},
},
medium: {
type: 'label',
xValue: 50,
content: ['Medium'],
font: {
size: 18,
weight: 'bold',
},
},
high: {
type: 'label',
xValue: 95,
content: ['High'],
font: {
size: 18,
weight: 'bold',
},
},
arrow: {
type: 'point',
pointStyle: 'triangle',
backgroundColor: '#000',
radius: 15,
xValue: 75,
yAdjust: 65,
},
label1: {
type: 'label',
xValue: 75,
yAdjust: 95,
content: ['Your Lifetime Risk', '10%'],
font: {
size: 18,
weight: 'bold',
},
},
},
},
},
},
}
2 Likes
OMG! You’re a legend Ian, many many thanks for helping me! Have a really a good day 