Is there any way to get highchart drilldown with breadcrum navigation.
for example in the fiddle where browsers data is present. I want to display breadcrum as browsers / chrome
Highcharts doesn't offer this feature in the regular API. You can report this idea on Highcharts UserVoice channel: https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api
Or create it by yourself by using SVGRenderer feature.
Basic demo from which you can start: https://jsfiddle.net/BlackLabel/7eomv6kw/
chart.browsersLabel = chart.renderer.label('browsers', 0, 0)
.css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add();
API: https://api.highcharts.com/highcharts/chart.events.render
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
I'm trying to use highcharts with angular using the highcharts-ng wrapper. The problem is that with the gauge type i can't get the value to fit in my container.
I did a fiddle to make it more clear : http://jsfiddle.net/x1zhmgg5/
What i want to achieve is to get my color bar to fit in the grey one, not the other way around (which would just mean getting a wider outerRadius on the pane.background) :
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
I've been going through the highchart documentation but I couldn't find anything on the yAxis to fix it.
Alter the plotOptions to this:
plotOptions: {
solidgauge: {
dataLabels: {
y: 1,
borderWidth: 5,
useHTML: true
},
innerRadius: '60%', // <--
radius: '70%', // <-- I don't know why it isn't outerRadius too...
}
}
How can i bring gauge needles above the datalabels. I tried zIndex but its not working. These are the gauge options
gauge: {
pivot: {
radius: 5,
backgroundColor: '#ea7001'
},
dial: {
backgroundColor: '#ea7001',
baseWidth: 5,
topWidth: 5,
baseLength: '0%', // of radius
}
},
},
Here is a Fiddle
You're applying the zIndex to the wrong elements.
It's not the data labels that are showing above the needle, it's the yAxis labels.
The axis label zIndex defaults to 7 - usually the labels are outside of the plot area, and in most cases you would probably want them to show above other elements. Your case changes the expectation.
You can adjust the axis label zIndex here:
labels: {
zIndex: 1, //<--
step: 1,
distance: -20,
style: {
"font-size": "8px"
}
},
Updated fiddle:
http://jsfiddle.net/c14dns2h/1/
I have the following code in a D3 project:
function addSquare() {
//Create SVG element
var SQsvg = d3.select("#square")
.append("svg")
.attr({
"width": 70,
"height": 20,
id: "squaresArea"
})
.on("click", resetRefresh);
SQsvg.append("text")
.text("Refresh")
.attr({
x: 15, //margin.left,
y: 15,
"font-family": "sans-serif",
"font-size": "14px",
"text-decoration": "underline",
fill: "blue"
})
.on("click", resetRefresh);
function resetRefresh() {
console.log("hello")
//update bar chart when user selects a square
dsPieChart(initialMeasure, pieDataCSV);
TOPbarChartUpdate("N", initialMeasure, "lightgrey",false);
}
}
When I move my cursor to the text Refresh the interactivity does not seem to span the whole word - why is this? and how do I amend the above so that all the text will trigger the event?
A live example of the whole project is here: http://plnkr.co/edit/w9lBwZhoHqQbmNUjihQv?p=preview
I think its due to the container the pie chart is in is ontop of the Refresh button. I have appended the Refresh button to the body, and seemed to solve the problem :
d3.select('body').append('svg').append("text")
.text("Refresh")
.attr({
x: 15, //margin.left,
y: 15,
"font-family": "sans-serif",
"font-size": "14px",
"text-decoration": "underline",
fill: "blue"
})
.on("click", resetRefresh);
http://plnkr.co/edit/rc78OaAZbOVPjPznGKok?p=preview
I'm styling a google chart using the javascript api. I want to change the background of the area where the data is plotted. For some reason when I set background options like so:
chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })
It changes the the background of the whole chart and not the area where the data is plotted. Any ideas on how to only change the background of the plotted area?
Thanks
pass the options like this
var options = {
title: 'title',
width: 310,
height: 260,
backgroundColor: '#E4E4E4',
is3D: true
};
add this to your options:
'chartArea': {
'backgroundColor': {
'fill': '#F4F4F4',
'opacity': 100
},
}
The proper answer is that it depends if it is classic Google Charts or Material Google Charts. If you use classic version of the Google Charts, multiple of the above suggestion work. However if you use newer Material type Google charts then you have to specify the options differently, or convert them (see google.charts.Bar.convertOptions(options) below). On top of that in case of material charts if you specify an opacity for the whole chart, the opacity (only) won't apply for the chart area. So you need to explicitly specify color with the opacity for the chart area as well even for the same color combination.
In general: material version of Google Charts lack some of the features what the Classic has (slanted axis labels, trend lines, custom column coloring, Combo charts to name a few), and vica versa: the number formating and the dual (triple, quadruple, ...) axes are only supported with the Material version.
In case a feature is supported by both the Material chart sometimes requires different format for the options.
<body>
<div id="classic_div"></div>
<div id="material_div"></div>
</body>
JS:
google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2009', 1120, 580],
['2010', 1200, 500],
['2011', 1250, 490],
]);
var options = {
width: 1000,
height: 600,
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017'
},
// Accepts also 'rgb(255, 0, 0)' format but not rgba(255, 0, 0, 0.2),
// for that use fillOpacity versions
// Colors only the chart area, simple version
// chartArea: {
// backgroundColor: '#FF0000'
// },
// Colors only the chart area, with opacity
chartArea: {
backgroundColor: {
fill: '#FF0000',
fillOpacity: 0.1
},
},
// Colors the entire chart area, simple version
// backgroundColor: '#FF0000',
// Colors the entire chart area, with opacity
backgroundColor: {
fill: '#FF0000',
fillOpacity: 0.8
},
}
var classicChart = new google.visualization.BarChart(document.getElementById('classic_div'));
classicChart.draw(data, options);
var materialChart = new google.charts.Bar(document.getElementById('material_div'));
materialChart.draw(data, google.charts.Bar.convertOptions(options));
}
Fiddle demo: https://jsfiddle.net/csabatoth/v3h9ycd4/2/
It is easier using the options.
drawChart() {
// Standard google charts functionality is available as GoogleCharts.api after load
const data = GoogleCharts.api.visualization.arrayToDataTable([
['Chart thing', 'Chart amount'],
['Na Meta', 50],
['Abaixo da Meta', 22],
['Acima da Meta', 10],
['Refugos', 15]
]);
let options = {
backgroundColor: {
gradient: {
// Start color for gradient.
color1: '#fbf6a7',
// Finish color for gradient.
color2: '#33b679',
// Where on the boundary to start and
// end the color1/color2 gradient,
// relative to the upper left corner
// of the boundary.
x1: '0%', y1: '0%',
x2: '100%', y2: '100%',
// If true, the boundary for x1,
// y1, x2, and y2 is the box. If
// false, it's the entire chart.
useObjectBoundingBoxUnits: true
},
},
};
const chart = new GoogleCharts.api.visualization.ColumnChart(this.$.chart1);
chart.draw(data, options);
}
I'm using polymer that's why i'm using this.$.cart1, but you can use selectedbyid, no problem.
Have you tried using backgroundcolor.stroke and backgroundcolor.strokewidth?
See Google Charts documentation.
If you want to do like this then it will help. I use stepped area chart in the combo chart from the Google library...
where the values for each stepped area is the value for ticks.
Here is the link for jsfiddle code
Simply add background option
backgroundColor: {
fill:'red'
},
here is the fiddle link https://jsfiddle.net/amitjain/q3tazo7t/
You can do it just with CSS:
#salesChart svg > rect { /*#salesChart is ID of your google chart*/
fill: #F4F4F4;
}