I'm using Chartist for browser visualization.
The requirement here is that I need to add title to the X and Y axis, so that viewers know what does each axis represent. However I went through the online document of Chartist and found no documentation about this. Did I miss something, or this feature is not supported in Chartist? If it's not supported, is there any way to work this out?
You can download and use the Axis Title Plugin developed by Alex Stanbury. This is the code you must add to your existing chart options.
plugins: [
Chartist.plugins.ctAxisTitle({
axisX: {
axisTitle: 'X title',
axisClass: 'ct-axis-title',
offset: {
x: 0,
y: 50
},
textAnchor: 'middle'
},
axisY: {
axisTitle: 'Y title',
axisClass: 'ct-axis-title',
offset: {
x: 0,
y: 0
},
textAnchor: 'middle',
flipTitle: false
}
})
]
I used css for this, try if this help you.
HTML:
<div id="chartist" class="chartist" data-x-axis="X axis label" data-y-axis="Y axis label"></div>
CSS:
[data-x-axis]::before {
content: attr(data-x-axis);
position: absolute;
width: 100%;
text-align: center;
left: 0;
bottom: 0;
font-size: 11px;
color: #777;
}
[data-y-axis]::after {
content: attr(data-y-axis);
position: absolute;
top: 50%;
left: -20px;
font-size: 11px;
color: #777;
text-align: center;
transform: rotate(-90deg)translateY(50%);
}
Titles are currently (June 2015) not supported.
The issue for this suggests that the Chartist authors want you to label the graph outside of Chartist but does include a way to do this in your HTML though with some notable caveats.
Related
Please how can we set the map div to be height: 100% of its container?
I have tried this within a bootstrap template content section, but all I get is height of 0px. Even Google-Dev tools shows #map height as 0px.
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
Set
#map{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
and give its container position: relative.
The above answer didn't work for me, but this did:
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
..from A full screen leaflet.js map
Leaflet needs an absolute height, and height: 100% only refers to the height of the parent element - if this isn't set, it will default to 0.
If your map is the only element in the body, use height: 100vh to match the height of the viewport (Example).
If your map is inside a container, set height: 100vh on the container (or other desired height) and height: 100% on the map element (Example).
So i have a simple button with a shiny effect run through using ::after and transform.
.shiny {
background-color: #000000;
padding: 10px;
color: white;
border-radius: 5px;
position: relative;
}
#keyframes sheen {
/* make the sheen run forward for 1.5s then back for the last 0.5s */
75% {
transform: rotateZ(60deg) translate(1em, -9em);
}
}
.shiny::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.shiny:hover::after, .shiny:focus::after {
animation: sheen 2s;
}
<button class="shiny">Shiny Button</button>
In original code, the percent in #keyframe was 100% and 'sheen' effect ran forward in exactly 2s.
Here i set the percent to below 100% (75% for example), the effect will run forward for 75% of the animation-duration, then runs backward for the last 25%.
Does that behavior have anything to do with 'transform' property? can anyone explain it to me
As a matter of fact, the animation does not repeat itself. Animation begins-and-ends. It just emulates properties that give it a reference value when you not define what to do animation.
Here, you basically define that moment by giving concrete properties such as where it will be at the 75%th moment of 2s, what color it will be, what its opacity will be. But from 75.1% you haven't defined what to do until the animation is complete (100%).
If CSS Animations are not defined at any instant of the frames, they accept parent properties that refer to it.
.dummy {
animation: dummy ... ... ...;
opacity: .75;
}
#keyframes dummy {
50% {
opacity: .5;
}
}
In the example above, the element will animate with an opacity of typically .75, .50 and .75 respectively.
If we didn't specify the property opacity: .75;, it would also animate the 1.0, .50 and 1.0 animation with default values.
You can imagine this for the opposite situation as well.
In other words, if I define where an element will be initially in the animation and this position is different from the values it actually references, the element will be animated by moving from the point I defined to the reference values.
Here is a simple example,
p {
animation-duration: 3s;
animation-name: slidein;
}
#keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
}
<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>
Returning to the example in your question, it would suffice to define that it should exhibit the same behavior between 75% and 100%. Here is the example;
.shiny {
background-color: #000000;
padding: 10px;
color: white;
border-radius: 5px;
position: relative;
}
#keyframes sheen {
/* make the sheen run forward for 1.5s then back for the last 0.5s */
75%, 100% {
transform: rotateZ(60deg) translate(1em, -9em);
}
}
.shiny::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.shiny:hover::after, .shiny:focus::after {
animation: sheen 2s;
}
<button class="shiny">Shiny Button</button>
As you can see in this codesandbox, I have used the 'transform' property, based on this answer, also tried changing the font-size on the StepIconProps (commented out code on CSB).
The first option results in the circle resizing while still retaining its centre, and hence its alignment with the line, but the text stays in the same place.
The second option means the circle loses its alignment with the line, but the text stays nicely positioned relative to the circle.
I'm not sure either are entirely the correct way to do it. There is an example in the docs where the icon has been customised, but this involves an implementation a whole new icon, which I'd rather avoid. I am happy with all of the default appearance, with the only exception being the size.
I created a div element using styled components and I passed it as a prop icon at StepLabel from material UI.
import React, { useState, useEffect } from "react";
import { Stepper, Step, StepLabel } from "#material-ui/core";
const stepsOptions = {
0: [0],
1: [0, 1],
2: [0, 1, 2],
};
const StepIcon = styled.div`
background-color: ${({ backgroundColor }) =>
backgroundColor ? "#008a98" : "#DCDCDC"};
color: #fff;
width: 50px;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
font-size: 20px;
border-radius: 50%;
margin-top: -13px;
font-weight: 500;
z-index: 1;
`;
const Component = () => {
const [stepsArray, setStepsArray] = useState([]);
useEffect(() => {
setStepsArray(stepsOptions[activeStep]);
}, [activeStep]);
return (
<Stepper activeStep={activeStep} alternativeLabel>
{steps.map((label, index) => (
<Step key={label}>
<StepLabel
icon={
<StepIcon backgroundColor={stepsArray.includes(index)}>
<p>{index + 1}</p>
</StepIcon>
}
>
<Paragraph>{label}</Paragraph>
</StepLabel>
</Step>
))}
</Stepper>
)}
I'm trying to implement some functions that use ion-range as input. The functions are okay, my problem is related to the aesthetic issue of the ion-range element. Although there is this option to implement ticks in the documentation, they are the same height as the bar, making them very difficult to see if the primary color of the app is not dark enough.
I managed to modify it through the dev console and was able to acquire the style I wanted. I tried to modify the .range-tick class that is created, but to no avail. I saw a similar question that change the style of the range pin, but how can access this options for the range-tick?
I dev console I can see that style is currently this way:
.range-tick {
position: absolute;
top: calc((var(--height) - var(--bar-height)) / 2);
width: var(--bar-height);
height: var(--bar-height);
background: var(--bar-background-active);
z-index: 1;
pointer-events: none;
}
From this question suggestion I tried to add the currently empty variable --bar-height in my :root (src/theme/variables.scss), but this don't change anything.
I want to modify the class to include this options:
.range-tick {
position: absolute;
top: 25%; // <-- Changed
width: var(--bar-height);
height: 20px; // <-- Changed
background: var(--bar-background-active);
z-index: 1;
pointer-events: none;
}
I also tried to modify the range.md.css and range.ios.css files located in project_folder/node_modules/#ionic/core/dist/collection/components/range/, which looks exactly what I can see in dev console. After modify the class and recompile nothing has changed, in dev console Inspector I can see that the class is still using the initial class and not the modified one.
I read some comments of people in ionic forum saying that this can only be changed by Ionic team, so I created a new issue.
You can use CSS Shadow Parts.
To set the style for all non active ticks
ion-range::part(tick){
height: 10px;
width: 10px;
top: 16px;
border-radius: 50%;
}
To set the style of all active ticks
ion-range::part(tick-active){
height: 10px;
width: 10px;
top: 16px;
border-radius: 50%;
}
For more you can refer https://ionicframework.com/docs/api/range#css-shadow-parts
I just found out about position sticky in CSS. I thought this is really cool and eliminates the need of writing a JS function for this simple behaviour.
So, I thought I give it a try. In the following example the header is sticking to the top, but I don't understand why the footer is not sticking to the bottom:
body {
height: 180vh;
padding: 0;
margin: 10px 0;
}
header,
footer {
position: -webkit-sticky;
position: sticky;
padding: 10px;
color: #ffffff;
text-align: center;
}
header {
top: 0;
background-color: brown;
}
footer {
bottom: 0;
background-color: #2d3142;
}
<header>I'm sticking to the top of the page</header>
<footer>I'm sticking to the Bottom of the page</footer>
Why is that?
I'm not sure about sticky but if all you are trying to do is put your footer at the bottom you can try this.
.alwaysBottom {
position: absolute;
bottom: 0;
}