I have a requirement and I can't seem to figure out how to do it.
I need to have a background color to my chart but not labels in highcharts.
Is it possible, can anybody help me with this.
Sample link here for chart with a background color.
chart: {
backgroundColor: '#FCFFC5',
type: 'line'
},
jsFiddle
But what I need is:
In this image the area which is covered in red section need to have no background color.
You can set the chart background color and the plot area background color separately:
chart: {
backgroundColor: '#fff',
plotBackgroundColor: '#fcffc5'
}
Updated fiddle:
http://jsfiddle.net/jlbriggs/cfrfjuvz/1/
.highcharts-plot-background is what you are looking for. Add this to your CSS:
.highcharts-plot-background {
fill: #FCFFC5;
}
.highcharts-plot-border {
stroke-width: 2px;
stroke: #7cb5ec;
}
Live example: jsFiddle.
Related
Using Chart.js qnd Angular.chart, I have a stacked chart in which I'm using different colors, I want to put the number of each value inside the cart, so I'm making use of the Plugin Datalabels.
The problem is that my chart looks like this:
Where I have the dark blue I'd like the numbers to be white. But don't know how to achieve this.
This is my code:
$scope.Options = {
...
plugins: {
datalabels: {
color: '#171d28',
anchor: 'center',
align: 'center',
clamp: true
}
}
};
I tried putting the colors in an array, like this:
$scope.Options = {
...
plugins: {
datalabels: {
//The first 2 colors as dark and the third one as white
color: ['#171d28', '#171d28', '#fff'],
anchor: 'center',
align: 'center',
clamp: true
}
}
};
But this way it apply the changes by bar! not by the color section.
It says in the datalabels page that you can add functions, but not very sure how: Link to datalabels page about color
Any help is welcome, Thanks in advance!
I've found the answer!based in the code from the link I put in the question.
You need the names of the values given in the Series. This is my Series array right now:
$scope.Series = ['Low Blue', 'Blue', 'Strong Blue'];
We need to add a function to the datalabels.color, and in the function we'll indicate how to color the labels of the ones corresponding to "Strong Blue":
plugins: {
datalabels: {
color: function(context) {
var index = context.dataIndex;
var value = context.dataset.data[index];
//Inside the "dataset" we look for the "labels" we are using
//and store them in a variable
var valueWhite = context.dataset.label;
//We make the condition: if a value of the label is "Strong blue"
//then we color this label 'white'
if(valueWhite === 'Strong Blue') {
return value = 'white';
} else {
//If it's any other label, we color it 'black'
return value = '#000';
}
}
}
This way all the sections with a Strong blue as background will have color white, and the rest will be black.
I'm trying to merge two jvectormaps: italy-regions and italy-provinces, i
would like to achieve something similar to the drill-down example or even just have the map diveded both in regions and provinces.
I think i cannot use multimap like in the demo because italy-provinces map is just one script with all the provinces inside, so the main function for retrieve the map of each region is useless:
mapUrlByCode: function(code, multiMap){
return '/js/us-counties/jquery-jvectormap-data-'+
code.toLowerCase()+'-'+
multiMap.defaultProjection+'-en.js';
}
In this pen i've reproduced something similar to what i'm trying to achieve.
Obviously this solution is really bad, because i'm using two maps and once i click in a random region of the first map the second map will not zoom, so the two maps looks not synchronized.
Someone know or can suggest a way to achieve what i need?
Luckily, the great jVectorMap also supports focus on more than one region, so what you need is just to create the association among regions and provinces and invoke that functions twice.
I revorked a bit your code to be in some way more "explicit" about Provinces and Regions:
HTML:
<div id="map-provinces"></div>
<div id="map-regions"></div>
CSS:
#map-provinces{
height:500px;
width: 500px;
left:-500px;
opacity:0.5;
}
#map-regions{
top: 8px; /* Body margin wasn't set correctly in the CodePen */
position : absolute;
height:500px;
width: 500px;
opacity:0.5;
}
Here is how i do it with the Region of Sicily, up to you to complete this example with the whole list of Province codes:
var provinces ={"IT-82": ["TP","PA","AG","CL","EN","ME","CT","RG","SR"]};
$('#map-provinces').vectorMap({
map: 'it_mill'
});
$('#map-regions').vectorMap({
map: 'it_regions_mill',
backgroundColor : 'white',
zoomOnScroll : false,
zoomMin : 0,
zoomMax :220,
regionStyle :{
initial: {
fill: 'blue',
"fill-opacity": 1,
stroke: 'none',
"stroke-width": 0,
"stroke-opacity": 1
},
hover: {
"fill-opacity": 1,
cursor: 'pointer'
},
selected: {
fill: 'blue',
"fill-opacity": 1,
},
selectedHover: {
"fill-opacity": 1,
cursor: 'pointer'
}
},
onRegionClick: function(e, code, isSelected, selectedRegions){
var codes = [];
provinces[code].forEach(function(province) {
codes.push("IT-"+province);
});
$('#map-regions').vectorMap('get','mapObject').setFocus({region: code});
$('#map-provinces').vectorMap('get', 'mapObject').setFocus({regions: codes});
}
});
Whit that in mind, you can easily implement the drill-down sample provided on the jVectorMap website, and have both maps correctly aligned after the zoom on region click, like in this picture below, where both overlapped maps are displayed, like you did it in your CodePen:
To apply the tool-tip background in Google chart,I tried the following CSS code
path
{
fill: #000;
}
But this affected the whole google graph..
How to solve this without using html?
Have you tried to apply for the div.google-visualization-tooltip class ?
And I think you have to also enable the isHtml option on the tooltip
var chart_options = {
title: 'London Olympics Medals',
colors: ['#FFD700', '#C0C0C0', '#8C7853'],
tooltip: { isHtml: true }
};
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#customizing-html-content
I set bar hover color using below code:
plotOptions: {column: {states: {hover: {color: '#000000'}}}}
But how can I change the bar hover color dynamically?
Simply use point.update(options), where in options you will set new hover color:
chart.series[0].data[0].update({
states: {
hover: {
color: "red"
}
}
});
Demo: http://jsfiddle.net/xoje27rt/
Defined set of colors, when you load charts every time you will experience a different color of hover effect from the given set
var colors= ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'];
var x = Math.floor((Math.random() * 10) );
plotOptions: {
column: {
states: {
hover: {
color: colors[x]
}
}
}
},
And a fiddle link for details
For future continual work, make a button to trigger chart reload
create a chart after some event of a drop down from where you want to get color. something like<select id="idd" onChange="getColor()">
<option value="red">R</option>
<option value="green">G</option>
</select>
I have done a little bit here. will improve it soon.
To plot my data I'm using jqplot. I wish I could set a specific color on my pie chart according to the label values.
For example, I have this set of labels: "wood", "plastic" and I would like to set the color for "Wood" to brown and every time that category shows up in a graph.
Here is my current code:
switch(attrs.type) {
case 'pie': return $.extend(config, {
seriesColors:['#4bb2c5', '#EAA228', '#c5b47f', '#579575', '#839557', '#958c12', '#953579', '#4b5de4', '#d8b83f', '#ff5800', '#0085cc', '#c747a3', '#cddf54', '#FBD178', '#26B4E3', '#bd70c7'],
seriesDefaults: {
shadow: false,
renderer: $.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
varyBarColor: true
},
}
}
);
Thanks in advance!
You can use the dataLabels, seriesColors and labels property(of legends) to achieve this.
Refer below for jqPLot docs
dataLabels
seriesColors
legend labels
I have created a fiddle. Is this something that you are looking out for?
Follow this link: jqPLot Pie Chart - Series labels and colors
Regards,
Anish