I am using highcharts to draw some charts. I use the basic line plot like this:
http://www.highcharts.com/demo/spline-irregular-time
How can I display the legend under the chart area instead of at the right?
http://www.highcharts.com/demo/column-stacked-percent
Thx
marginBottom can be used to put legend on bottom of chart. You can still use legend property to move legend for example in the middle or right(i used center).
chart: {
marginBottom: 100
},
legend: {
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 0
},
Possible solution: fiddle
Having the legend under the chart is the default, so you can omit the legend propery entirely. Bear in mind that to make this look nice, you'll have to add a little to the bottom margin, otherwise the chart and the legend will overlap.
chart: {
type: 'line',
marginRight: 130,
marginBottom: 70 // Increase this to 70 or so
},
// Remove the legend property completely
Here's a demonstration.
Related
I'm trying to draw a straight dashed line across my linear chart at zero.
I got it to work by drawing another series with all the points on the y axis at 0 and it works ok but I would like to change the style to 'Dash' and also remove the annoying series name it adds to the legend by default. I don't want it to appear in the legend. I tried setting name to '' for this part.
var zeroSerie = {
data: firstSeries,
dashstyle: 'Dash'
};
zeroSeries.name = '';
soarChart.addSeries(zeroSerie, false)
I would also very much like to set the colour to red and 'stroke-width': 2,
Thanks for any help
I think that is better to use the plotLines option:
yAxis: {
plotLines: [{
value: 0,
color: 'red',
zIndex: 2,
dashStyle: 'dash'
}]
}
Live demo: http://jsfiddle.net/BlackLabel/zan69hm7/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotLines
Unless I'm mistake, this appears to be undocumented. Does anyone know if the far left bar colour on line charts can be changed?
It seems the first left bar is always darker than the grid lines.
you need zeroLineColor
https://www.chartjs.org/docs/2.8.0/axes/styling.html?h=zerolinecolor
options = {
scales: {
xAxes: [{
gridLines: {
zeroLineColor: '#fff'
},
}
]}}
ChartJS. Change axis line color
I'm working with highcharts and aiming to make a chart similar to this:
Now I've been playing around with the whole ordeal for a while now and I've come been able to reach the following point: http://jsfiddle.net/ccjSy/24/
$(function () {
$(document).ready(function () {
var chart = null;
var categories = ['Body Fat', 'Lean Mass'],
name = 'Body Fat vs. Lean Mass',
data = [{
y: 69,
color: '#F0CE0C',
drilldown: {
name: 'Body Fat',
color: '#F0CE0C'
}
}, {
y: 207,
color: '#23A303',
drilldown: {
name: 'Lean Mass' ,
color: '#23A303'
}
}];
// Build the data array
var browserData = [];
for (var i = 0; i < data.length; i++) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
}
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'donutchart',
type: 'pie',
spacingTop: 0
},
title: {
text: 'Your Body Fat vs Lean Mass',
style: {"color": '#7d7d7d'}
},
series: [{
name: 'Weight',
data: browserData,
dataLabels: {
style: {
fontFamily: 'ArialMT',
fontSize: '15px',
fontWeight: 'bold',
color: '#7d7d7d'
}
},
innerSize: '70%'
}],
tooltip: {
valueSuffix: ' lbs'
},
plotOptions: {
series: {
cursor: 'pointer'
}
}
});
});
});
I am thinking of leaving the space empty in the donut chart and inserting a custom circle with the Weight labeling.
However, I'm not certain how to tackle the following problems:
1) Leave more defined white spaces in between my two columns
2) How to properly align my two data labels? (As you can see in the model, they are in a straight line with neutral lines attached)
3) How to display the data underneath the two labels with both, the pounds and the percentage, as shown in the image.
Answering each of your three questions:
"More white space between columns?" -- add a plotOptions.pie.borderWidth element. The default value is 1. I used 5 to give it more white space.
"Properly align the two data labels?" -- You can compute a custom startAngle based on the two data values which will give you the correct angle to start with. Since you only have two data values in the series, that's easy.
Calculate startAngle for pie chart
var startAngle = 0 - (90 + (180 * (data[0].y / (data[0].y + data[1].y))));
Notice that if you change the y value for the first data object, the "Body Fat" portion of the pie chart will still maintain it's correct position, even as the portion of the chart grows larger or smaller.
"Display data underneath the two labels with custom formatting?" -- use plotOptions.pie.format to apply custom formatting to the pie value labels.
format: '<div style="position: relative; top: -20px; text-align: center">{point.name}<br><b><span style="font-size: 29px">{point.percentage:.0f}%</span></b> ({point.y} lbs)</div>'
Here's a working JSFiddle to see the results. You'll still need to add a dark gray circle behind the pie chart and add the "Total Weight" text but that shouldn't be too difficult.
Since I'm sure you'll be wondering about this, I should mention that there's a lot of white space under the pie chart title because it's leaving enough room for other labels that may appear above or below the pie. Since you're only using two values that will always be on the left/right sides of the pie chart, that doesn't change the fact that HighCharts is preparing to have other labels that may need to be displayed in the surrounding area.
Here is my problem: http://jsfiddle.net/Y5FY9/
I have a chart configured thus:
chart: {
marginBottom: 80,
reflow: false,
spacingLeft: 30,
marginRight: 20,
style: {
position: 'absolute'
},
borderColor: '#000000',
borderRadius: 20,
borderWidth: 1
},
Using the Master-Detail setup if the starting configuration is so that the last point of a line graph falls off the current X Axis viewing range then no line is displayed, as shown in the above JSFiddle example link.
Similarly if you zoom the Master graph (bottom one) so that the last point is off to the left and the next point is off to the right then no line is displayed.
How do I configure Highcharts to display the line even if no points fall within the current X Axis range so that at least you can see something?
Users aren't always aware that they haven't selected any points butthe plot suddenly disappears as far as users are concerned.
I'm hoping this is just a configuration settings somewhere but I can't find it.
In that lines you are filtering data:
jQuery.each(this.series[0].data, function(i, point) {
if (point.x > min && point.x < max) {
detailData.push({
x: point.x,
y: point.y
});
}
});
As you can see, when points are outside the range, nothing is added. You can add at least two points to display line on a chart.
I am using google charts and want to place the x and y axes directly inside the graph, like this:
BCG-Matrix
putting the axis into the center is possible with
hAxis: { baseline: 50 }
the axis title is however still at the bottom/side of the graph, even with
textposition: 'in'
I'd also appreciate nicer axes (with arrowheads etc.), and nicer bubble shapes! There is only
bubble: { textStyle: { fontSize: 11 }, opacity: 0.8, stroke: '#ccc' }
I want to format the edge of the bubble, and move the bubble title outside of the bubble