Is it possible to change specific point color with dx chartjs?
I know how to change point colors for the whole series, but I can't find anything on changing specific points.
You can use
customizePoint
callback.
$("#container").dxChart({
dataSource: dataSource,
...
customizePoint: function() {
if(this.value > highAverage) {
return { color: '#ff4500', hoverStyle: { color: '#ff4500' } };
} else if(this.value < lowAverage) {
return { color: '#00ced1', hoverStyle: { color: '#00ced1' } };
}
},
....
}
});
You can find find documentation and demo
Related
I read all docs I could and searched all over the internet attempting to achieve the following (attached image) on ChartJS 3.9.1. Is it even possible to have each axis on a radar chart labeled on ChartJS?
radar chart
I had the same problem as you and found this solution:
Define the array of base64 images you want as labels
const labelImages = [
/* Image 2 */ 'data:image/png;base64,iVBORw0KGg......',
/* Image 1 */ 'data:image/png;base64,iVBORw0KGgoAA.....'
]
Then use the plugin:
plugins: [
{
id: 'Label images',
afterDraw: (chart) => {
for (const i in chart.scales.r._pointLabelItems) {
const point = chart.scales.r._pointLabelItems[i];
var image = new Image();
image.src = labelImages[i];
// you I had 20x20 images thats why I use 20x20
chart.ctx.drawImage(image, point.x - 10, point.y, 20, 20);
}
}
}
]
Draw image from context options
This solution draws images where the labels are (where they start, i think), if you want only images and no text then you should hide the labels. I did it like this:
options: {
// just so that the images are not outside the canvas
layout: {
padding: 20
},
scales: {
y: {
display: false
},
x: {
display: false
},
r: {
pointLabels: {
// Hides the labels around the radar chart but leaves them in the tooltip
callback: function (label, index) {
return ' ';
}
}
}
}
}
I hope this helps
Here is a codepen that I am using to solve this problem. What I would like to do is get the length of the horizontal bars to determine if the label should be plotted inside or outside of the bar. Currently, what I have happening:
{
datalabels: {
color: function(context) {
return [0, 3].includes(context.dataIndex) ? 'black' : 'white'
},
anchor: 'start',
align: 'right',
offset: function(context) {
const chart = context.chart;
const area = chart.chartArea;
const meta = chart.getDatasetMeta(context.datasetIndex);
const model = meta.data[context.dataIndex];
// model.width is NaN
// is there a way to get this value
// after the animation is complete?
console.log(model, model.width)
return 4;
},
font: {
size: 9
}
}
When you run the codepen you notice that model.width prints as NaN but when you look at the object itself model.width is there. If I introduce a setTimeout to log that value it exists (not NaN). When I turn the animation off model.width is available in the function.
Therefore, I think the way to make this happen is to get the values after the animation renders. Is there a way to do that in the offset function for datalabels or is there another way of doing that?
You can use the getProps on the model to get the width after the animations are over like so:
offset: function(context) {
const chart = context.chart;
const area = chart.chartArea;
const meta = chart.getDatasetMeta(context.datasetIndex);
const model = meta.data[context.dataIndex];
const {
width
} = model.getProps(['width'], true);
console.log(width)
return 4;
},
Updated codepen: https://codepen.io/leelenaleee/pen/MWQGbdM?editors=1010
I might have been thinking about it the wrong way. By playing around with the values I realized the value itself is a pretty good indication of whether it should be inside or outside of the bar. What I've done instead is evaluate if the value is greater than 30. If so the color is white and the anchor is set to start. If it less than 30 the color is black and the anchor is set to end:
https://codepen.io/thoughtassassin/pen/rNJvOrj
plugins: {
datalabels: {
color: (context) => getValue(context) > 30 ? '#fff' : '#000',
anchor: (context) => getValue(context) > 30 ? 'start' : 'end',
align: 'right',
offset: 5,
font: {
size: 9
}
},
}
I would like to add a conditional hover state to my LESS mixin.
I've tried the following but it returns an error:
.foo(#hoverstate:false){
color:red;
&:hover when (#hoverstate = true){
color:blue;
}
}
What is the correct syntax for this?
dotless does not support "CSS guard" construction so you'll need a mixin to put the guard there, e.g.:
.foo(#hoverstate: false) {
color: red;
.-(); .-() when (#hoverstate = true) {
&:hover {
color: blue;
}
}
}
that can be simplified to:
.foo(...) {
color: red;
}
.foo(true) {
&:hover {
color: blue;
}
}
(Note I did not test this code with dotless so it's possible you would need to correct other minor incompatibilities)
How do you transition using CSS the properties of elements with display none?
My current solution is to set display to block with JavaScript, wait 10 milliseconds for repaint, then apply the class that changes the properties I want to animate.
Note: I'm using jQuery for code brevity.
CSS - animating opacity as an example. Don't care about $.show().
.element
{
display:none;
opacity:0;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s;
}
.element.shown
{
opacity:1;
}
JavaScript
function show()
{
var $element=$('.element');
$element.css({display:'block'});
//Add class a few moments later than chaning display to block, otherwise animations CSS Transitions won't fire
setTimeout(function(){
$element.addClass('shown');
},10);
}
function hide()
{
var $element=$('.element');
$element.removeClass('shown');
//Remove element from display after transition ends
$element.on('webkitTransitionEnd otransitionend oTransitionEnd MSTransitionEnd transitionend',function()
{
$element.css({display:'none'});
});
}
I feel there should be a better way though, a CSS-only way. Is there?
I just found workaround. All you need is use animation and start it little bit after you apply display:block. Like this:
#keyframes submenu_animation {
from {
opacity: 0;
}
1% {
opacity: 0;
}
99% {
opacity: 1;
}
to {
opacity: 1;
}
}
li ul {
opacity: 0;
display: none;
animation-name: submenu_animation;
animation-duration: 300ms;
animation-direction: reverse;
li ul.open {
display: block;
}
li:hover ul {
animation-direction: normal;
opacity: 1;
}
Javascript is pretty the same, It will apply class "open" once you hover on required element. When you hover-out it will remove "open" class little bit later, when animation is finished.
I wonder if there is a better solution (or if my solution is even right), to create if statement like behavior with variables and guards.
Goal:
If variable is set to true, compile the code (works)
If variable is set to anything else, ignore the code (default, works)
Keep initial code position (dosnt work, is merged wherever .responsive (#responsive); is called)
My Code:
#responsive: true;
.responsive(true){
a {
color: red;
}
}
.responsive(true) {
b {
color: blue;
}
}
.responsive (#responsive);
I am not completely sure I understand what you say doesn't work.
But if I do ... there are two things connected to this that you have to bare in mind in LESS:
scope matters - not order (you can define a variable/mixin after you call it, as long as you deine it in the same scope or a scope that is accessible)
the mixin gets rendered where you call it not where you define it
that said - if you really want to use the same guard in multiple places to do different things, you would need to define multiple mixins (each place would get another mixin), and if you want to render it in the place you define it, you would just need to call it immediately after (or before) you define it. Something like this:
#responsive: true;
test1 {
color:green;
}
.a() when (#responsive){
a {
color: red;
}
}
.a;
test2 {
color:green;
}
.b() when (#responsive) {
b {
color: blue;
}
}
.b;
the output will be:
test1 {
color: green;
}
a {
color: red;
}
test2 {
color: green;
}
b {
color: blue;
}
So the mixins .a() and .b() are returned if #responsive is set to true, if not you get:
test1 {
color: green;
}
test2 {
color: green;
}
I hope this is kinda what you wanted.
I ended up using this:
#responsive: true;
section.content {
.responsive () when (#responsive) {
#media (min-width: 768px) {
float: right;
width: 80%;
}
#media (min-width: 980px) {
width: 60%;
}
}
.responsive;
}
aside.left {
.responsive () when (#responsive) {
#media (min-width: 768px) {
float: left;
width: 20%;
}
}
.responsive;
}