Is there a way to show the pie chart name on top, bottom, right or left of a pie chart without having to use the labels, like they use in this highcharts demo:
labels: {
items: [{
html: '<b>Total fruit consumption<b>',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
}
The labels have an absolute position in pixels, and for the pies I am using percentages.
When there is a resizing, the labels stay on the same place and the pies move, and I can't get the same relative position in percentage for both.
Example pie:
{ data: [{ color: '#31B7C9', name: 'Slice 1', y: 1266364.92333333 }, { color: '#9ED93E', name: 'Slice 2', y: 7284620.73 }, { color: '#DABF12', name: 'Slice 4', y: 2330663.39333333 }], name: 'Pie Chart Name', type: 'pie', center: ["25%", "25%"], showInLegend: true, size: "20%", dataLabels: { enabled: false }}
Any idea how to get the pie chart name to display as its title?
Example in jsFiddle here.
Thank you in advance
EDIT:
So it looks like you want to have the same chart as in the demo and not just a pie chart. If that is the case my answer below fails. You will need to use labels and position them.
----Keeping below code for future reference---
Yes,
Use the title property.
Example here: http://jsfiddle.net/wergeld/svkmM/
title: {
text: 'A Title!'
}
I found a plugin that allows to show the pie chart titles here.
Related
I want to set the legend area in a two-column fashion in Apache Echarts, how I can achieve this with legend options? I'm not able to find any example related to this.
Sample image (I want a legend area like the image mentioned below).
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
top: '3%',
},
grid: {
top: '28%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
data: ['Actual Avg', 'Min Standard']
},
series: JSON.parse(data),
};
In "legend" you can define the data by writing something like this
legend:{
...,
data: [
{name: 'series 1', ...},
{name: 'series 2', ...}
]
}
If you want the legend to generate automatically, it will depend on what you have on "series".
"If data is not specified, it will be auto collected from series. For most of series, it will be collected from series.name or the dimension name specified by seriesName of series.encode. For some types of series like pie and funnel, it will be collected from the name field of series.data." - Echarts Documentation
Since i don't know how your "series" is defined, i can't give you a code example, but i think the documentation part will help you.
I found a way to have 2 columns, simply use a vertical legend alignment and fix the height, based on the number of elements you want ot display in a column, for example: (number of element in a column) * (legend element height).
option = {
legend: {
top: '3%',
orient: 'vertical',
align: 'left',
height: '180px' //example
},
};
I'm new to Highcharts and I'm using a very simple Highcharts bar chart that shows two columns stacked horizontally. I would like to change the background color and the font colors. The documentation shows examples like this:
Highcharts.setOptions({
chart: {
style: {
fontFamily: 'monospace',
color: "#f00"
}
etc . . .
But Highcharts.setOptions doesn't help with the javascript code I am using:
<div id="container" style="width:100%; height:400px;"></div>
<script>
$(function () {
var myChart = Highcharts.chart('container', {
chart: {type: 'bar'},
title: {text: 'Chart Title'},
xAxis: {categories: ['Category1<br>Category2']},
yAxis: {title: {text: 'Value'}
},
series: [{name: 'Cat1',data: [4.2]},
{name: 'Cat2',data: [5691.7]}]
});
});
</script>
If I simply insert a background-color directive (background-color: #000000) below yAxis the graph disappears from the screen.
So my question is how I can change the text and background colors in the Highcharts js code shown above. Thanks.
You can't write background-color: #000000 but 'background-color': '#000000' or backgroundColor: '#000000' will works
chart: {
type: 'bar',
backgroundColor: '#000000',
style: {
fontFamily: 'monospace',
color: "#f00" // This line won't work. You must set color for each element like title, axis labels ...
}
}
Fiddle
I have a polar chart diagram where I am trying to move two out of four labels on the x axis. It is a diamond shape in a narrow space, so the labels at the right and left are cut off. I'm trying to move them, but I can't get them to move. I'm trying to move labels Category 1 and Category 3 down 30px and towards the centre by ~100px.
Code for labels
xAxis: {
categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4'],
tickmarkPlacement: 'on',
lineWidth: 0,
labels: {
style: { fontSize: '150%',
},
},
},
Fiddle
https://jsfiddle.net/Adam300/kuvs0eah/8/
I looked at this fiddle from here but I'm having trouble understanding it.
Since there is only one serie the only solution I can think is to use this CSS code :
.highcharts-xaxis-labels text:nth-child(1), .highcharts-xaxis-labels text:nth-child(3){
transform: translate(0,47px); !important;
}
It's not perfect but it's works
Fiddle
You can se your chart.marginLeft and chart.marginRight properties to define the side margins of your chart container. Please take a look at code and example below:
chart: {
polar: true,
type: 'line',
marginLeft: 100,
marginRight: 100,
style: {
fontFamily: 'Georgia',
}
}
Live example: https://jsfiddle.net/fjhz4wx7/
API Reference:
https://api.highcharts.com/highcharts/chart.marginLeft
https://api.highcharts.com/highcharts/chart.marginRight
Kind regards!
Can anyone recommend a method of setting the X axis to be a constant width across multiple instances of a bar chart?
See this jsFiddle: http://jsfiddle.net/LCYwW/1/
The first chart is an example of placing the data for 2 locations in a single chart. In this case, Highcharts automatically adjusts the X axis width to accommodate both location labels.
However, I need to separate these 2 locations into separate charts, but maintain the same proportions of X Axis to bar area width for both charts. See charts 2 and 3 in the example. In this case, Highcharts picks an X axis width that suits just the single location and the 2 charts do not line up when stacked.
Is there a method to get the individual charts to maintain the same proportions as each other? I tried setting the xAxis.labels.style.width attribute, and it does something, but doesn't seem to be a concrete width. See http://jsfiddle.net/LCYwW/3/
This example is easiest to see in the jsFiddle, but SO is requiring me to post the code:
$('#containerAll').highcharts({
chart:{
type: 'bar'
},
series: [
{
name: 'Male',
data: [{"name":"58.1%","y":0.581}, {"name":"18.1%","y":0.181}]
},
{
name: 'Female',
data: [{"name":"58.5%","y":0.585}, {"name":"28.5%","y":0.285}]
}
],
xAxis: {
categories: ['Short Name', 'Much Longer Location Name']
}
});
$('#container1').highcharts({
chart:{
type: 'bar'
},
series: [
{
name: 'Male',
data: [{"name":"58.1%","y":0.581}]
},
{
name: 'Female',
data: [{"name":"58.5%","y":0.585}]
}
],
xAxis: {
categories: ['Short Name'],
labels: {
style: {
width: 200
}
}
}
});
$('#container2').highcharts({
chart:{
type: 'bar'
},
series: [
{
name: 'Male',
data: [{"name":"18.1%","y":0.181}]
},
{
name: 'Female',
data: [{"name":"28.5%","y":0.285}]
}
],
xAxis: {
categories: ['Much Longer Location Name'],
labels: {
style: {
width: 200
}
}
}
});
You have a lot more control over the labels if you turn on useHTML.
xAxis: {
categories: ['Short Name'],
labels: {
style: {
width: '100px',
'min-width': '100px'
},
useHTML : true
}
}
http://jsfiddle.net/LCYwW/5/
You'll also probably have to set a min and max for the yAxis to keep the data in proportion.
Fiddle with the yAxis max set: http://jsfiddle.net/LCYwW/6/
Also consider, using the chart: marginLeft property to set a fixed width for the labels:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft: 160
},
// ...
})
});
This preserves the other behavior of the chart, e.g., alignment of the labels. Also see this question.
Adding the marginLeft property inside of chart worked like a charm for me.
chart: {
type: 'bar',
marginLeft: 200
}, ...
Is it possible to have 2 yAxis in a highstock chart from highcharts one on the left and another on the right ?
Thanks
A very simple example:
First you have to create your new yAxis and set it's position.
{
title: {
text: 'Other data panel'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
opposite: true
}
Then, when you create your serie you in what yAxis it will be placed.
{
type: 'column',
name: 'Other',
data: otherData,
yAxis: 2,
dataGrouping: {
units: groupingUnits
}
}
You can see it working here.