I need to use the select state in a Treemap to change the color of the selected area (it works well for other charts like pie charts, bubble charts...). But the state seems to not be taken into account.
The demo is here : https://jsfiddle.net/vegaelce/0xuqvrg3/
I tried to use the settings described in the documentation (I tried "color" and "marker/fillColor") :
plotOptions: {
series: {
allowPointSelect: true,
states: {
hover: {
color: "#ff0000",
marker: {
fillColor: "#ff0000"
}
},
select: {
color: "#0000ff",
marker: {
fillColor: "#0000ff"
}
}
},
But no success... Any idea to achieve that please ?
Thanks in advance
Related
I'd like to change the default white in the Material UI theme from #fff to #fdf6e3.
I'd expect instances of default white to change but I'm not sure if this is even the right way to do this.
export const newTheme = createTheme(baseTheme, {
palette: {
mode: "light",
common: { white: "#fdf6e3" },
background: { default: "#073642" },
primary: { main: "#002b36" },
secondary: { main: "#dc322f" },
},
})
I found the structure here: https://mui.com/material-ui/customization/default-theme
I am using echarts with Vuejs. Behavior of chart is hover line. Line will be highlight and all point will be show like this.
default
when mouse hover
I try to use option emphasis of series of type line. But it make only highlight line. not work for item style. like this
I want to default the all point not show. and all point will be show when emphasis active. But document of echarts not mention of this issue. Here is my config:
itemStyle: {
color: '#fff',
borderColor: color,
borderWidth: 3,
opacity: 0,
},
lineStyle: {
width: 2,
color,
},
emphasis: {
focus: 'series',
lineStyle: {
width: 3,
},
itemStyle: {
shadowBlur: 9,
shadowColor: color,
opacity: 1,
},
},
With any idea, please give me advice. Thanks so much
How do I have insert text within the stacked sections of a highcharts stacked bar graph ( https://www.highcharts.com/demo/bar-stacked ).
My graph will really only have two columns, and they'll have the y-axis reversed and displayed as so: https://jsfiddle.net/ogjz9ra0/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Bananas']
},
colors: ['#1b98ee', '#1366a6'],
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
},
legend: {
reversed: true,
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [4726.78]
}, {
name: 'Brian',
data: [4250.00],
}]
});
What I'd like is to be able to inject text into each of the columns.
https://drive.google.com/file/d/1CDttfeB9mqI5r9voYalsLtEeH0OSs3Ey/view?usp=sharing
I'm still relatively new to HighCharts, so any help would be appreciated.
Thank you all so much again!
I did some googling, and most of the results talk about having the text render inside the bar for non-stacked bar charts. Note that the placing for the problem I'm trying to solve is in the center.
You can use datalabels documentation like this :
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function() {
// console.log(this) // uncomment this line to see all params available
return 'custom text here'
}
}
}
},
Fiddle
I'm using leaflet-draw to draw and edit layers with the following configuration.
window.drawnItems = new L.FeatureGroup().addTo(map);
var options = {
position: 'topleft',
edit: {
featureGroup: window.drawnItems
},
draw: {
polyline: {
shapeOptions: {
color: '#f357a1',
weight: 10
},
guideLayers: guideLayers,
},
polygon: {
allowIntersection: false, // Restricts shapes to simple polygons
drawError: {
color: '#e1e100',
message: 'You can\'t draw that!'
},
shapeOptions: {
color: '#bada55'
},
guideLayers: guideLayers,
},
marker: {
guideLayers: guideLayers,
snapVertices: false
},
rectangle: false,
circle: false,
circlemarker: false,
}
};
map.addControl(new L.Control.Draw(options));
With this it's absolutely fine to add new features but when i'm trying to edit it, I mean change feature's geometry, when i'm dragging the handle (the white box) i'm moving the hole map instead of feature. So it seems like something prevents plugin's normal work.
i'm also using
leaflet Snap "0.0.3"
leaflet": "^0.7.7",
leaflet-geometryutil": "*"
leaflet-draw": "^0.3.2"
How to remove sliced line from pie high chart if there there is only one object in data. I want to see complete circle when there is one data coming. Right now it shows one slice line in circle. I don't want it to be there.
plotOptions: {
pie: {
allowPointSelect: true,
slicedOffset: 0
}
},
series: [{
data: [
{
name: 'Firefox',
y: 44.2,
selected: true,
sliced: false
},
]
}]
Screen shot Image
You can do this by setting the borderWidth to 0 and borderColor to null. The default is 1:
plotOptions: {
pie: {
borderWidth: 0,
borderColor: null
}
},