There is not a single element in that DOM I haven't tried setting color and background-color to non-black for. And #piechart_3d-1 has no styling at all.
So why does the center turn black? And how can I stop that from happening?
new Chartist.Pie('#piechart_3d-1', {
series: [{ meta: 'Active|' + numAllMachines, value: numActive },
{ meta: 'Standby|' + numAllMachines, value: numStandby }]
}, {
donut: true,
donutWidth: '40%',
showLabel: false,
width: '95%',
height: '95%'
});
I know this is old, but I had the same problem and no one seems to have posted the solution anywhere. This is an issue with the svg fill. The black won't show up on the css inspector so it's hard to figure out. The fix is to add a fill to the path. Something like this:
.ct-series path {fill: white !important;}
Related
I would like to customize the labels in chart.js, but don't seem to find the right way. Where do I need to put the styling options? What goes around it?
Is there a way to remove the Grid lines all together?
options: {
scale: {
gridLines: {
display: false
},
scaleLabel: {
fontColor: 'green',
fontSize: '24px',
fontFamily: "Montserrat"
},
ticks: {
maxTicksLimit: 1,
display: false,
},
}
},
I would expect the font color to change to green and get bigger, but it does not effect the font at all.
The same goes for the GridLines. I would expect that both vertical and horizontal lines would be removed, but the vertical Lines stay unaffected.
enter image description here
The radar chart uses a Linear Radial Axis. That documentation details all of the customization you have available for your chart axis.
Font
To configure your font as you have it above, you would want to have those settings on your options under the pointLabels property:
options: {
scale: {
pointLabels: {
fontColor: 'green',
fontSize: 24,
fontFamily: "Montserrat"
}
}
}
As a note, the fontSize property is supposed to be a number, not a string.
Angle Lines
There are two different settings for the axis lines (gridLines and angleLines). The angleLines are the lines that radiate out from the center of the chart and what you are wanting to additionally hide. To hide the angleLines, you would want to do the following:
options: {
scale: {
angleLines: {
display: false
}
}
}
I am trying to change the default shadow color (when hovering over a bunch of bars for example: https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-label-rotation)
Focusing on this example on this code part:
option = {
color: ['#003366', '#006699', '#4cabce', '#e5323e'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
}, .......
..............................
............................................
the type variable has 3 options as stated in the documentation:
https://ecomfe.github.io/echarts-doc/public/en/option.html#grid.tooltip.axisPointer.type
but I couldn't find anything that can control the color of the shadow.
I want it in a much lighter gray color than it is by default.
Is there any other way to set the shadows color?
I have been exploring echarts.js for a while.. and sadly, except of the fact that all charts graphics are amazing, unfortunately - I find more cons than pros :(
Try this:
axisPointer.shadowStyle.color
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // color at 0% position
}, {
offset: 1, color: 'blue' // color at 100% position
}],
globalCoord: false // false by default
}
It is given in their documentation. Check this out: https://ecomfe.github.io/echarts-doc/public/en/option.html#axisPointer
I am struggling with a HighChart/HighStock problem. I have created a JSFiddle to explain my problem! When the user uses a drill down on one of the bar colums, the y-axis may shrink which causes the x-axis to get higher. This is no problem, but when the user goes back to the overview through a drill up, the previous x-axis length is implemented for the bar columns, while the x-axis gets lower. I can't find anything in the documentation to help my problem and I haven't found a similar problem.
The drilldown which I am using:
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#D2D2D2'
},
select: {
stroke: '#039',
fill: '#D2D2D2'
}
}
}
},
series: [{"data":......}]
}
Could someone please help me adjust the code so that on the drill-up event the bar columns are re-configured to reach the x-axis
It looks like it is a bug with drilldown animation which appears only when a navigator is enabled. Reported here.
Should work without the animation:
drilldown: {
animation: false,
example: http://jsfiddle.net/3e3xqv7e/47/
In general, I think a navigator was not meant to work with drilldowns, so making it work correctly might be tricky. An option series.showInLegend works, though, except the min/max of the navigator are changed after drillup - so you need to set it properly.
drillup: function (e) {
this.navigator.xAxis.setExtremes(0, 4, true, false);
/* this.navigator.xAxis.update({
min: 0,
max: 4
}, true);*/
}
example: http://jsfiddle.net/c1nqpz7d/2/
Is there any way to keep interaction on markers covered by other areas (when the do have a fill color)?
Check the example:
http://jsfiddle.net/ozke/n4k57v5j/1/
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
fill: '#F00',
gridLineWidth: 1,
},
yAxis: {
enabled: false,
gridLineWidth: 0
},
series: [
// Required JSON code?
{
data: [15,20,10,20,30]
},{
data: [10,15,20,15,20]
},
]
});
The marker/dot in the blue area is impossible to reach/hover/interact when x=2.
In CSS, the equivalent would be using pointer-events:none; on the area (not the border or markers).
It's probably something to do with SVG and/or event propagation.
After some research I found out there's something similar to pointer-events: none; for SVG (used by Highcharts). There's a few options excluse for SVG but in my case what I needed was pointer-events: visibleStroke;
The solution would then be:
path { pointer-events: visibleStroke; }
I am using a .kendoChart() call to create my self a pie chart.
seriesColors: config.colors,
tooltip: {
visible: true,
template: function (e) {
return shared.AssetClassName(e.category) + ' ' + shared.toString(e.percentage, "p0");
}
}
Using seriesColors: config.colors I am overriding the normal color set that comes with Kendo UI. The problem with this is when the chart uses darker colors the label color in the tooltip on hover is always black and is very difficult to read. I am looking for a way to reference another color array, set the colors on bind or something similar to that.
Kendo UI handles the dark colors in the standard color set by changing the label colors to white automatically so there should be a way to do it.
I have done some research but I cannot find a good set of documentation for Kendo UI similar to what Microsoft usually releases.
Update:
Joe's response was very helpful but it did not quite get me there.
Using the Color: attribute I can indeed set the ToolTip text color on a global scale, but... what if I have a light yellow? Is there a way to specify directly what color the text should be on what background color?
Will Color: accept a function{} or array of colors somehow?
Thanks,
Thanks to Roc for showing me exactly what I was missing!
Note: I used 120 luma for my determining value of if I would use black or white.
You can set this via the tooltip options (code below is from their dojo) right at the bottom I set the tooltips to #ff0000.
The documentation is pretty solid (if a little awkward to navigate)
http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-tooltip.background
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth, 2007 - 2012"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: \n #= value#%"
}
},
series: [{
type: "pie",
startAngle: 150,
data: [{
category: "Asia",
value: 53.8,
color: "#9de219"
},{
category: "Europe",
value: 16.1,
color: "#90cc38"
},{
category: "Latin America",
value: 11.3,
color: "#068c35"
},{
category: "Africa",
value: 9.6,
color: "#006634"
},{
category: "Middle East",
value: 5.2,
color: "#004d38"
},{
category: "North America",
value: 3.6,
color: "#033939"
}]
}],
tooltip: {
visible: true,
format: "{0}%",
background: "#ff0000"
}
});
You were very close to the solution in your question since you can use a function delegate as a template. Kendo tooltip is a div element, so just return an html block with the color you need and the tooltips will be white text on the dark background or a black text on the light background.
To detect if the background is too dark you can use the following thread How to check if hex color is "too black"? agains the series color from the "e" object - e.series.color. I used an abstract function getColorLuma() below to avoid duplication.
seriesColors: config.colors,
tooltip: {
visible: true,
template: function (e) {
var textColor = getColorLuma(e.series.color) < 128 ? 'white' : 'black';
return '<span style="color:' + textColor + '">' +
shared.AssetClassName(e.category) + ' ' + shared.toString(e.percentage, "p0") +
'</span>';
}
}
But be careful with the using ' and # in the text returned from the template function. Javascript will crash. I just used 'white' and 'black' in my code instead of hex colors.