Related
I've been trying to use the watermark plugin for charts.js. I have successfully downloaded the plugin and uploaded it to Github and created an online version of this file, viewable at: https://cdn.jsdelivr.net/gh/AjaniSt/chartjs-plugin-watermark/chartjs-plugin-watermark.js. However, the plugin is not working. I have tried using a local file instead, putting the "watermark" data in and out of the "plugin" data, and trying the HTML online. However, none have worked. Some guidance would be greatly appreciated. My HTML file is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/AjaniSt/chartjs-plugin-watermark/chartjs-plugin-watermark.js"></script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="250" height="200"></canvas>
<script>
var ctx = document.getElementById("myChart");
var imageNew = new Image()
imageNew.src = 'https://image.shutterstock.com/image-vector/hi-hello-banner-speech-bubble-260nw-1505210795.jpg'
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1880,
1881,
1882,
1883,
1884,
1885,
1886
],
datasets: [{
label: 'Temperature Anomaly',
data: [-0.16,
-0.08,
-0.1,
-0.17,
-0.28,
-0.33,
-0.31
],
fill: true,
backgroundColor: [
'rgba(10, 168, 196, 0.2)',
'rgba(102, 96, 151, 0.2)',
'rgba(57, 87, 255, 0.2)',
'rgba(233, 182, 233, 0.2)',
'rgba(108, 213, 207, 0.2)',
'rgba(125, 178, 230, 0.2)'
],
borderColor: [
'rgba(10, 168, 196, 1)',
'rgba(102, 96, 151, 1)',
'rgba(57, 87, 255, 1)',
'rgba(233, 182, 233, 1)',
'rgba(108, 213, 207, 1)',
'rgba(125, 178, 230, 1)'
],
borderWidth: 1,
pointRadius: 3,
pointHitRadius: 8
}]
},
options: {
scales: {
y: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return value + '°C';
}
},
title: {
display: true,
text: 'Test'
}
}],
xAxes: [{
ticks: {
maxTicksLimit: 15
}
}]
},
plugins:{
legend: {display: false},
watermark: {
x: 0,
y: 0,
height: 50,
width: 50,
alignX: "top",
alignY: "left",
alignToChartArea: true,
position: "front",
opacity: 1,
image: imageNew,
},
},
onClick: handleClick
}
});
window.onmessage = function(event){
if (event.data && Array.isArray(event.data)) {
myChart.data.datasets[0].data = event.data;
myChart.update();
}
else {
console.log("HTML Code Element received a generic message:");
console.log(event.data);
}
};
function handleClick(e){
var activeBars = myChart.getElementAtEvent(e);
var value = myChart.config.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index];
var label = activeBars[0]._model.label;
window.parent.postMessage({
"type":"click",
"label":label,
"value":value
} , "*");
}
function ready(){
window.parent.postMessage({"type":"ready"}, "*");
}
</script>
</body>
</html>
What looks like the main reason that it's not working is because this plugin was written for V2 and you are using V3, the way you register plugins has changed so you need to change this line which can be found at the bottom of the file: Chart.pluginService.register(watermarkPlugin); to this: Chart.register(watermarkPlugin)
Since this question was posted, chartjs-plugin-watermark 2.0.0 has been released and supports Chart.js 3 and 4. Additionally, the watermark config should be moved from options.plugins.watermark to just options.watermark:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/AlbinoDrought/chartjs-plugin-watermark/chartjs-plugin-watermark.js"></script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="250" height="200"></canvas>
<script>
var ctx = document.getElementById("myChart");
var imageNew = new Image()
imageNew.src = 'https://image.shutterstock.com/image-vector/hi-hello-banner-speech-bubble-260nw-1505210795.jpg'
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1880,
1881,
1882,
1883,
1884,
1885,
1886
],
datasets: [{
label: 'Temperature Anomaly',
data: [-0.16,
-0.08,
-0.1,
-0.17,
-0.28,
-0.33,
-0.31
],
fill: true,
backgroundColor: [
'rgba(10, 168, 196, 0.2)',
'rgba(102, 96, 151, 0.2)',
'rgba(57, 87, 255, 0.2)',
'rgba(233, 182, 233, 0.2)',
'rgba(108, 213, 207, 0.2)',
'rgba(125, 178, 230, 0.2)'
],
borderColor: [
'rgba(10, 168, 196, 1)',
'rgba(102, 96, 151, 1)',
'rgba(57, 87, 255, 1)',
'rgba(233, 182, 233, 1)',
'rgba(108, 213, 207, 1)',
'rgba(125, 178, 230, 1)'
],
borderWidth: 1,
pointRadius: 3,
pointHitRadius: 8
}]
},
options: {
scales: {
y: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return value + '°C';
}
},
title: {
display: true,
text: 'Test'
}
}],
xAxes: [{
ticks: {
maxTicksLimit: 15
}
}]
},
plugins:{
legend: {display: false},
},
watermark: {
x: 0,
y: 0,
height: 50,
width: 50,
alignX: "top",
alignY: "left",
alignToChartArea: true,
position: "front",
opacity: 1,
image: imageNew,
},
onClick: handleClick
}
});
window.onmessage = function(event){
if (event.data && Array.isArray(event.data)) {
myChart.data.datasets[0].data = event.data;
myChart.update();
}
else {
console.log("HTML Code Element received a generic message:");
console.log(event.data);
}
};
function handleClick(e){
var activeBars = myChart.getElementAtEvent(e);
var value = myChart.config.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index];
var label = activeBars[0]._model.label;
window.parent.postMessage({
"type":"click",
"label":label,
"value":value
} , "*");
}
function ready(){
window.parent.postMessage({"type":"ready"}, "*");
}
</script>
</body>
</html>
I'm using vue-chartjs in my nuxt.js project. I have line chart and I want to draw vertical line while hovering like this example. Below chart options.
The problem is that I could not integrate code from the example with vue. Thanks in advance))
WeatherChart.vue
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
props: {},
data() {
return {
options: {
responsive: true,
maintainAspectRatio: false,
legend: false,
tooltips: {
enabled: false,
mode: 'x',
intersect: false,
xPadding: 14,
yPadding: 14,
position: 'nearest',
custom: (tooltipModel) => {
// Tooltip Element
let tooltipEl = document.getElementById('chartjs-tooltip')
//There some options
},
},
},
}
},
mounted() {
this.renderChart(
{
labels: this.labels,
datasets: [
{
label: 'Kunduzi',
borderColor: 'rgba(0, 195, 137, 1)',
pointBackgroundColor: 'rgba(0, 195, 137, 1)',
borderWidth: 3,
pointBorderColor: 'rgba(0, 195, 137, 1)',
backgroundColor: 'rgba(226, 255, 246, 0.5)',
data: this.dataDay,
fill: '+1',
},
{
label: 'Kechasi',
borderColor: 'rgba(19, 133, 250, 1)',
pointBackgroundColor: 'rgba(19, 133, 250, 1)',
pointBorderColor: 'rgba(19, 133, 250, 1)',
borderWidth: 3,
backgroundColor: 'rgba(212, 234, 255, 0.5)',
data: this.dataNight,
},
],
},
this.options
)
},
}
</script>
I would like to stick the below into a function as I am currently calling it multiple times.
var chart = LightweightCharts.createChart(document.getElementById("chart"), {
width: 250,
height: 250,
layout: {
textColor: '#d1d4dc',
backgroundColor: 'black',
},
localization: {
priceFormatter: formatters[formatterNames[0]],
},
priceScale: {
borderColor: 'rgba(255, 255, 255, 0.8)',
},
timeScale: {
visible: false,
borderColor: 'rgba(255, 255, 255, 0.8)',
},
priceScale: {
scaleMargins: {
top: 0.3,
bottom: 0.25,
},
},
grid: {
vertLines: {
color: 'rgba(255, 255, 255, 0.2)',
},
horzLines: {
color: 'rgba(255, 255, 255, 0.2)',
},
},
});
I thought I would add it into a function like this:
function Makechart (chartname){
LightweightCharts.createChart(document.getElementById(chartname), {
width: 250,
height: 250,
layout: {
textColor: '#d1d4dc',
backgroundColor: 'black',
},
localization: {
priceFormatter: formatters[formatterNames[0]],
},
priceScale: {
borderColor: 'rgba(255, 255, 255, 0.8)',
},
timeScale: {
visible: false,
borderColor: 'rgba(255, 255, 255, 0.8)',
},
priceScale: {
scaleMargins: {
top: 0.3,
bottom: 0.25,
},
},
grid: {
vertLines: {
color: 'rgba(255, 255, 255, 0.2)',
},
horzLines: {
color: 'rgba(255, 255, 255, 0.2)',
},
},
});
and then call it by setting the variable as the function
Var chart1 =Makechart("chart1")
Ver chart2 =Makechart("chart1")
But the code is not running so I am doing something wrong but can't see what I am doing incorrectly.
You are missing the return keyword to return a value from the function.
If the chart wont initialize after then you should probably check your console for errors.
In the first example you select an element with the id of chart and in later examples chart1. Make sure that your element exists.
function Makechart(chartname) {
return LightweightCharts.createChart(document.getElementById(chartname), {
width: 250,
height: 250,
layout: {
textColor: '#d1d4dc',
backgroundColor: 'black',
},
localization: {
priceFormatter: formatters[formatterNames[0]],
},
priceScale: {
borderColor: 'rgba(255, 255, 255, 0.8)',
},
timeScale: {
visible: false,
borderColor: 'rgba(255, 255, 255, 0.8)',
},
priceScale: {
scaleMargins: {
top: 0.3,
bottom: 0.25,
},
},
grid: {
vertLines: {
color: 'rgba(255, 255, 255, 0.2)',
},
horzLines: {
color: 'rgba(255, 255, 255, 0.2)',
},
}
});
}
I was using a different chart on my site which was causing some issues so we migrated to chartjs. Everything works fine but I have one requirement which I cannot find in chartjs.
In the site I am working on, the user gives an assessment and it shows the graph based on the assessment results.
So in the assessment, there is a question "Are you feeling exacerbation?" If the user selects yes then in the graph it shows an image above that bar like below image.
In the picture you can see "E" above the two bars.
I want to achieve the same in chartjs. Is it possible? If not then can you guys suggest a way to notify the user that they have selected "exacerbation".
Thank you
You can place images on top of individual bars using chartjs-plugin-labels.
Please have a look at the following runnable code snippet:
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: 'My Dataset',
data: [25, 59, 80, 76],
fill: false,
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)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)'],
borderWidth: 1
}]
},
options: {
plugins: {
labels: {
render: 'image',
textMargin: 10,
images: [
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null,
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null
]
}
},
layout: {
padding: {
top: 30
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
canvas {
max-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" width="10" height="6"></canvas>
I'm making a chart with chart.js and I'm trying to figure out how I can change the label/legend styling.
I want to remove the rectangle part and instead use a circle. I've read that you can make your custom legend (using legendCallback), but for the life of me I cannot figure out how to do it. This is how my chart looks now - image.
This is my HTML:
<div class="container">
<canvas id="myChart"></canvas>
</div>
And this is my JS:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Link One',
data: [1, 2, 3, 2, 1, 1.5, 1],
backgroundColor: [
'#D3E4F3'
],
borderColor: [
'#D3E4F3',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: '#333',
}
}
}
});
I'm new to JS in general, so please be as specific as possible with your answers. Thank you so much!
No need to use legendCallback function. You can set usePointStyle = true to turn that rectangle into a circle.
Chart.defaults.global.legend.labels.usePointStyle = true;
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Link One',
data: [1, 2, 3, 2, 1, 1.5, 1],
backgroundColor: [
'#D3E4F3'
],
borderColor: [
'#D3E4F3',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: '#333'
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="container">
<canvas id="myChart"></canvas>
</div>
for angular4-chart.js you could use the options attribute like so:
options = {
legend:{
display: true,
labels: {
usePointStyle: true,
}
}
}
Step 1:
Change options to this:
options: {
legend: {
display: false,
}
}
Step 2:
Append to your canvas this code (just after canvas):
<div id='chartjsLegend' class='chartjsLegend'></div> //Or prepend to show the legend at top, if you append then it will show to bottom.
Step 3:
Generate this legend instead of default with this (just after mychart):
document.getElementById('chartjsLegend').innerHTML = myChart.generateLegend();
Step 4:
Make css so it generates as circle:
.chartjsLegend li span {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;
border-radius: 25px;
}
Step 5:
Change css with what ever you feel like should be better.
Time for some chimichangas now.
Use usePointStyle:true
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Link One',
data: [1, 2, 3, 2, 1, 1.5, 1],
backgroundColor: [
'#D3E4F3'
],
borderColor: [
'#D3E4F3',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: '#333',
usePointStyle:true
}
}
}
});
Additional information on #GRUNT 's answer
I assign usePointStyle inside legend.labels not what #GRUNT did Chart.defaults.global.legend.labels.usePointStyle = true;
This is useful when you are using react
legend: {
labels: {
usePointStyle: true,
},
}
more info here
Display point style on legend in chart.js
add this in your options
legend: {
display: true,
position: 'bottom',
labels: {
boxWidth: 9,
fontColor: '#474747',
fontFamily: '6px Montserrat',
},
},
for example :
this.testChart = new Chart('testPie', {
type: 'doughnut',
data: {
labels: [ 'Success','Failure','Aborted'],
datasets: [
{
data: [],
backgroundColor: [ '#45D78F', '#F58220','#FFD403'],
},
],
},
options: {
maintainAspectRatio: false,
cutoutPercentage: 50, // for thikness of doughnut
title: {
display: false,
text: 'Runs',
fontSize: 14,
fontFamily: 'Roboto',
fontColor: '#474747',
},
legend: {
display: true,
position: 'bottom',
labels: {
boxWidth: 9,
fontColor: '#474747',
fontFamily: '6px Montserrat',
},
},
},
});