We Keep Coding

Legends in Chart Js don't appears

The legend is not shown in Chart JS, I have read documentation and others but nothing...
Only the label in which you typed a phrase is displayed. I know it's something very simple but it's making me waste my time.
my chart
Code:
type: 'bar',
data: {
labels: [{% for elemento1 in mesesEvolucion %}'{{ elemento1 }}',{% endfor %} ],
datasets: [{
label: 'Evolucion de el último año',
data: [{% for elemento1 in elemento.datosGraficaEvolucion %}{{ elemento1.mesX }},{% endfor %} ],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'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: {
scales: {
y: {
beginAtZero: true,
ticks: {color: 'white'}
},
x: {
beginAtZero: true,
ticks: {color: 'white'}
}
},
plugins: {
legend: {
display: true,
labels: {
color: 'rgb(255, 255, 255)'
}
},
title: {
display: true,
text: 'Evolución anual',
color: '#FFFFFF',
font: {
size: '14'
}
}
}
}

Try this:
plugins: {
legend: {
position: "top",
display: true,
labels: {
color: "#0d6dfdb0",
font: {
family: "IRANSansWeb"
}
},
tooltip: {
bodyFont: {
family: "IRANSansWeb"
},
titleFont: {
family: "IRANSansWeb"
}
}
},
title: {
display: true,
text: "some title",
color: "rgb(16, 97, 219)",
font: {
family: "IRANSansWeb",
},
},
},

How draw vertical line while hovering tooltip (with vue-chartjs)?

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>

Not able to change chart.js x and y font colors

I tried changing the xticks color of chart js but somehow this is not working. This is the cdn I am using.
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.4.1/dist/chart.min.js"></script>
function plot(x, y, chartTitle, labelText) {
$("#canvasCard").html(
'<canvas id="myChart" width="600px" height="600px"></canvas>'
);
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: x,
datasets: [
{
label: labelText,
data: y,
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
],
borderColor: [
"rgba(255, 99, 132, 1)",
"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: 2,
},
],
},
options: {
responsive: false,
plugins:{
title: {
display: true,
text: chartTitle
}},
scales: {
y: {
beginAtZero: true,
},
xAxes: [{
ticks: {
fontColor: 'green'
}
}]
},
},
});
}
Doesn't have any effect
I googled the problem and many of them have listed the same thing as it is in the scales object. Still it isn't working. Any help appreciated
Thank you in advance.

I found the answer! In v3.4.1 or v3 and above chart js has different description.
Trying this worked. So this works
scales: {
y: {
beginAtZero: true,
ticks:{
color: "white"
}
},
x:{
ticks:{
color: "white"
}
}
}
Instead of the following code. The following works in previous versions.
scales: {
y: {
beginAtZero: true,
},
xAxes: [{
ticks: {
fontColor: 'green'
}
}]
}
Thank You.

Styling Muitextfield input background, hides label

I am trying to style Textfield from the global theme, but, I can't manage to put a colored background for the input only (white), whithout hiding the label when it move inside the input.
I want to have this result :
But, I have this one :
I put the white background with transparency, to show that the text is indeed behind it, but, if I set the transparency to no transparency, the label will be fully hidden behind the white background, like this :
Here is my theme :
export const testGlobal = createMuiTheme({
palette: {
common: {
black: "#000",
white: "rgba(255, 255, 255, 1)",
blue: {
light: "rgba(184, 244, 255, 1)",
default: "rgba(0, 219, 255, 1)",
dark: "rgba(0, 184, 213, 1)",
},
red: {
light: "#ff1744",
default: "#fd0031",
dark: "#e3002c",
},
orange: {
light: "#ffc046",
default: "#ff8f00",
dark: "#c56000",
},
grey: {
light: "rgba(99, 99, 99, 1)",
medium: "rgba(99, 99, 99, 1)",
paper: "rgba(65, 65, 65, 1)",
default: "rgba(99, 99, 99, 1)",
dark: "rgba(60, 60, 60, 1)",
},
},
},
});
testGlobal.root = {
borderColor: "rgba(85, 85, 85, 1)",
};
testGlobal.img = {
width: "79%",
};
testGlobal.palette = {
...testGlobal.palette,
vumeter: {
top: "#fd0031",
mid: "#ff8f00",
bottom: "rgba(0, 219, 255, 1)",
},
playlist: {
playing: "#ef5350",
},
background: {
light: "rgba(99, 99, 99, 1)",
medium: "rgba(99, 99, 99, 1)",
paper: "rgba(65, 65, 65, 1)",
default: "rgba(99, 99, 99, 1)",
dark: "rgba(60, 60, 60, 1)",
},
primary: {
light: "rgba(184, 244, 255, 1)",
main: "rgba(0, 219, 255, 1)",
dark: "rgba(0, 184, 213, 1)",
contrastText: "rgba(255, 255, 255, 1)",
},
text: {
primary: "rgba(255, 255, 255, 0.87)",
secondary: "rgba(255, 255, 255, 0.54)",
disabled: "rgba(255, 255, 255, 0.38)",
hint: "rgba(255, 255, 255, 0.38)",
},
};
testGlobal.overrides = {
MuiFormLabel: {
root: {
background: "black",
fontWeight: "bolder",
color: "grey",
"&.Mui-focused": { color: "grey" },
paddingLeft: theme.spacing(1),
},
},
MuiInput: {
root: {
fontWeight: "bolder",
background: "white", // the white background that keep hiding my label :(
padding: theme.spacing(1),
color: "black",
},
},
};
testGlobal.props = {
MuiInput: { disableUnderline: true },
};
I did not add additional styling to the textfield component
Why would a background get on top of the label? :(

Would be helpful if you could share a working code link on a JavaScript playground site such as codesandbox.io, however this sounds like it could be a z-index issue. Try to add something such as position: relative;z-index: 99; to the label. z-index controls the overlapping order on the page so this should work.

JavaScript Generated graph into a div

I have created a graph using Javascript. I would like that each chart/graph to be located between specific divs.
<div id="chart"></div>
<p>some text can go here or images ect</p>
<div id="chart2"></div>
This is so I can apply the CSS to it and move them around the page and add heading ext to each one. Currently, the code just generated the graphs under the Divs. My knowledge of Javascript is very basic and its the last part of the puzzle for this work.
Would anyone be able to help?
The main code for creating the two graphs is:
var chart = LightweightCharts.createChart(document.body, {
width: 400,
height: 175,
layout: {
textColor: '#d1d4dc',
backgroundColor: '#000000',
},
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:
var chart2 = LightweightCharts.createChart(document.body, {
width: 400,
height: 175,
layout: {
textColor: '#d1d4dc',
backgroundColor: '#000000',
},
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 have added the full code to generate the graphs and HTML here:
https://codepen.io/jarratt-perkins/pen/KKpqpPb

You need to specify the container element where the chart should be created, when you call LightweightCharts.createChart. It is its first argument.
So change:
var chart = LightweightCharts.createChart(document.body, {
to:
var chart = LightweightCharts.createChart(document.getElementById("chart"), {
And change:
var chart2 = LightweightCharts.createChart(document.body, {
to:
var chart2 = LightweightCharts.createChart(document.getElementById("chart2"), {