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.
Related
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 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.
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"), {
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)',
},
}
});
}
Chart.js does not support the "mirror" option on vertical "bar" chart.
I tried to search for a workaround but i did not find any help on internet.
I wrote a workaround solution but there's only one thing to solve to be a perfect mirroring:
align text at the bottom axis.
Actual text alignment
Somebody can help me to fix this?
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["ONE", "TWO", "THREE", "FOUR", "FIVE", "SIX", "SEVEN", "EIGHT"],
datasets: [{
label: "Quota mensile",
backgroundColor: [
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)"
],
borderColor: [
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)"
],
borderWidth: 1,
data: [10, 11, 18, 10, 13, 28, 12, 16]
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
maxRotation: 90,
minRotation: 90,
display: "top"
},
}],
yAxes: [{
display: false
}]
},
tooltips: {
enabled: true
},
maintainAspectRatio: true,
responsive: true
}
});
Chart.plugins.register({
/* Adjust axis labelling font size according to chart size */
id: "responsiveXlabels",
beforeDraw: function(c) {
var chartHeight = c.chart.height;
var size = (chartHeight * 2.5) / 100;
var xAxis = c.scales["x-axis-0"];
xAxis.options.ticks.minor.fontSize = size;
xAxis.height = 10;
xAxis.minSize.height = 10;
c.options.scales.xAxes[0].ticks.padding = -size * 4.5;
xAxis.margins.bottom = size * 12.5;
},
afterDraw: function(c) {
c.options.scales.xAxes[0].ticks.padding = -158;
}
});
<canvas id="myChart" width="800" height="600"></canvas>
the responsiveXlabel plugin is used to transform text on resize.
Hope this helps who wants to implement mirroring on X Axis and satisfy responsive request.
Fiddle link to my solution: Fiddle link
I used a chart.js 2.8.0 modified version that you can find at this link
A CodePEN BY Jukka Kurkela