How can you hide only one serie by pie chart in chart legend? I have tried it with showInLegend Attributte in Serie but it doesnt work.
[{ y: 0, name: 'Serie A', color: '#D93600', showInLegend: true}, { y: 0, name: 'Serie B', color: '#F8ADA7', showInLegend: false}]
Related
I want to create PIE chart using Highchart as below image, please suggest a solution-
Thanks
You can use two pie series with different innerSize and size properties, for example:
series: [{
data: [{
y: 1,
color: 'blue'
}]
}, {
size: '70%',
innerSize: '30%',
data: [{
y: 3,
color: 'green'
}, {
y: 12,
color: 'blue',
showInLegend: false
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/4b1phj67/
API Reference: https://api.highcharts.com/highcharts/series.pie
I'm trying to create a Spider graph that has the y-axes labels offset with extended gridlines.
Is this possible to achieve with just one graph, or do I have to create two separate graphs and overlay them? I've tried ticklines, gridlines, and they all get stuck in the polar coordinates.
Here's my attempt at trying to accomplish this:
http://jsfiddle.net/6d6jrfhs/3/
{
chart: {
polar: true,
type: 'line'
},
title: {
text: "# of Impacts",
x: -80
},
pane: {
size: '80%',
startAngle: 0,
},
xAxis: {
categories: ['Back', 'Left', 'Front', 'Top',
'Right'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
offset: 0,
labels: {
align: 'left',
x: -100,
y: 0
},
tickLength: 500,
plotLines: [{
color: 'red', // Color value
dashStyle: 'longdashdot', // Style of the plot line. Default to solid
value: 40000, // Value of where the line will appear
width: 1 // Width of the line
}]
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
type:'area',
name: 'Low Impact',
data: [43000, 19000, 60000, 35000, 17000],
pointPlacement: 'off'
}, {
type:'area',
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000],
pointPlacement: 'off'
}]
}
This demo shows how to find labels (SVG elements) in the chart object and create additional gridline using SVG Renderer: http://jsfiddle.net/kkulig/eg7p3r48/
events: {
render: function() {
var yAxis = this.yAxis[0],
renderer = this.renderer,
label = yAxis.ticks[0].label;
renderer.path(['M', label.xy.x, label.xy.y, 'l', label.xy.x - xOffset - 30, 0]).attr({
stroke: 'black',
'stroke-width': 1
}).add();
}
}
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
How do I create the bar chart below? There are two versions. Thank you.
You can achieve the result with a stacked bar chart. Two series - one with the actual data, and the other for filling a bar and keeping labels. You should normalize the data your own (setting complementary values for the second series and min/max for axis).
series: [{
color: 'green',
data: [5, 3, 1],
dataLabels: {
align: 'right',
format: '{point.y} %'
}
}, {
color: 'grey',
data: [{
y: 3,
label: 'Footbal'
}, {
y: 5,
label: 'Soccer'
}, {
y: 7,
label: 'Baseball'
}],
dataLabels: {
align: 'left',
format: '{point.label}'
}
}]
example: http://jsfiddle.net/tPw24/553/
For the second chart, just swap the colors and data: http://jsfiddle.net/tPw24/555/
I have this Highcharts column chart:
http://jsfiddle.net/ltherond/bmk71a8r/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
type: 'linear'
},
credits: {
enabled: false
},
plotOptions: {
column: {
borderWidth: 0,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between',
shadow: false
}
},
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
});
});
I want the first bar to extend horizontally from 0 to 500 on the xaxis.
In other words, I want each bar to start at the current x value and end at the next x value.
How do I do that?
The option you are looking for is connectNulls for your series attribute
From my knowledge this options is only available for Area and Line Charts and no longer available for column or bar chart
I recommend you to change your Chart Type to area chart and use connectNulls option as mentioned in Documentation here
To meet your requirement in Column chart itself you need to tune your data you fed into High chart as follows in your series code segment
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
},{
x: 100,
y: 5,
color: "#00FF00"
},{
x: 200,
y: 5,
color: "#00FF00"
},{
x: 300,
y: 5,
color: "#00FF00"
},{
x: 400,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
This will solve your problem. see the working fiddle http://jsfiddle.net/bmk71a8r/3/
For this approach you need to write extra codes to format your Data
Good Day
Does anyone if it's possible to create the following type of chart using Highcharts:
I was trying to use the Solid Guage type but couldn't find a way to incorporate a 2nd data series into the chart ?
You need to define a points in series and regular size and distance by innerRadius / outerRadius.
series: [{
name: 'Speed',
data: [{
name: 'First car',
radius: 100,
innerRadius: 80,
y: 80
}, {
name: 'Second car',
radius: 80,
innerRadius: 60,
y: 120
}],
dataLabels: {
enabled: true,
y:-10
},
tooltip: {
pointFormat: '{point.name}: <b>{point.y}</b> km/h'
}
}]
Example: http://jsfiddle.net/94akab33/2/
Missing elements can by added by renderer.