I have a code to generate multiple charts for a single series.
code :
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
data: [[6, 540], [7, 540], [7, 1620], [8, 1620]]
},{
data: [[6, 340], [7, 340], [7, 620], [8, 620]]
}]
});
i need to provide different caption for the series'.. How is it possible?
Simply add a name to your definition of series ... as shown in the documentation
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
name: 'Series 1',
data: [[6, 540], [7, 540], [7, 1620], [8, 1620]]
},{
name: 'Series 2',
data: [[6, 340], [7, 340], [7, 620], [8, 620]]
}]
});
Related
I want to create like below graph. How can I create like this graph?
The biggest value has to be in the middle of xAxis.
You can use xAxis.categories to set the xAxis labels and next you need to define the x value for each point in the data.
Demo: https://jsfiddle.net/BlackLabel/e7d6c2pm/
Highcharts.chart('container', {
chart: {
type: 'scatter'
},
xAxis: {
categories: ['0m', '150m', '250m', '350m', '550m', '700m', '550m', '350m', '150m', '0m'],
plotLines: [{
value: 5,
color: 'red'
}]
},
series: [{
data: [[0.1, 52], [2, 20], [3, 10], [2.5, 8], [2.8, 13]]
}, {
data: [[6, 52], [8, 20], [9, 10], [8.5, 8], [7, 13]]
}]
});
API: https://api.highcharts.com/highcharts/xAxis.categories
I'm exploring Highcharts Api and used a stacked grouped bar charts. I came on an idea on changing the bar's look. I wanted it to be a pointed bar. Would it be possible? Thanks in advance!
Image below:
Changing column series shape might be difficult because the logic behind the column series is meant to work with rectangles, so it would require extend/change Highcharts internal code.
Instead, you can use a polygon series. With a little of configuration, you should be able to get the desired effect.
$(function() {
var labels = {
1: 'Apples',
4: 'Bananas'
};
Highcharts.chart('container', {
chart: {
type: 'polygon'
},
xAxis: [{
min: -0.5,
max: 6,
tickPositions: [0, 2, 3, 5],
labels: {
enabled: false
}
}, {
offset: 0,
linkedTo: 0,
tickPositions: [1, 4],
tickLength: 0,
labels: {
formatter: function () {
return labels[this.value];
}
}
}],
yAxis: {
min: 0,
max: 100
},
series: [{
name: 'series 1',
id: 's1',
colorIndex: 0,
data: [
[0, 0],
[0, 25],
[2, 20],
[2, 0]
]
}, {
name: 'series 1',
linkedTo: 's1',
colorIndex: 0,
data: [
[3, 0],
[3, 68],
[5, 63],
[5, 0]
]
}, {
colorIndex: 1,
id: 's2',
name: 'series 2',
data: [
[0, 25],
[0, 50],
[2, 45],
[2, 20]
]
}, {
name: 'series 2',
colorIndex: 1,
linkedTo: 's2',
data: [
[3, 68],
[3, 78],
[5, 73],
[5, 63]
]
}]
});
});
example: http://jsfiddle.net/stfhhn7y/
I would like to have a chart that represent data like this.
the series code would be something like this.
series: [{
name: 'Car 1',
data: [[1, 3], [4, 6], [7, 9]]
}, {
name: 'Car 2',
data: [[2, 3], [8, 10], [12, 18]]
}]
The first number on each array would be the starting point and the second the finishing point, and all arrays inside the main array would be on the same line.
An inverted columnrange chart should work. Your data isn't formatted in a way that would work with what you want, but transforming it isn't difficult. If you aren't stuck with the data format you showed, you just need a point object with x, low, and high.
For example:
{
x: 1,
low: 0,
high: 4
}
The following massages your current structure into the correct format:
$(function () {
var series = [{
name: 'Car 1',
data: [
[1, 3],
[4, 6],
[7, 9]
]
}, {
name: 'Car 2',
data: [
[2, 3],
[8, 10],
[12, 18]
]
}, {
name: 'Car 3',
data: [
[5, 9],
[1, 2]
]
}];
// massage the data
var data = [];
for(var i=0;i<series.length;i++) {
for(var j=0;j<series[i].data.length;j++) {
data.push({
x: j,
low: series[i].data[j][0],
high: series[i].data[j][1],
name: series[i].name
});
}
}
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: false
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Cars',
data: data
}]
});
});
http://jsfiddle.net/hqwrx4uy/
I use different colors for the bars in a Highcharts bar chart to denote two different groups of data like so (abbreviated):
$(function () {
$('#moduleDistribution').highcharts({
colors: ['red', 'red', '#1aadce', '#1aadce'],
chart: {
type: 'column'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
colorByPoint: true
}
},
series: [{
showInLegend: false,
data: [
['node', 291],
['wifi', 289],
['timer', 289],
['net', 285]
]
}]
});
});
Demo: http://jsfiddle.net/7Luob5k8/4/
How can I create a legend (or similar) to explain the meaning of the colors? I'd like to explain to the viewer why some bars are red and some are not.
You can achieve this by using 2 series. Make them visible in the legend. Assign the color you want to it. mention Category names in xAxis and use a [x,y] co-ordinates system to send the data to the chart.
your categories
xAxis: {
categories: ['node', 'wifi', 'timer', 'net', 'gpio', 'file', 'uart', 'i2c', 'mqtt', 'adc', '1wire', 'bit', 'pwm', 'spi', 'u8g', 'cjson', 'ws2812', 'coap']
},
your series will look like this.
series: [{
data: [
[0, 291],
[1, 289],
[2, 289],
[3, 285],
[4, 284],
[5, 283],
[6, 263]
],
color: '#FF0000'
}, {
data: [
[7, 135],
[8, 119],
[9, 100],
[10, 96],
[11, 89],
[12, 80],
[13, 65],
[14, 60],
[15, 57],
[16, 46],
[17, 20]
],
color: '#1aadce'
}]
Here I've updated your fiddle
I have a problem with HighCharts when I set it to zoom on xy. It zooms fine but on the rest, the axes reset but the plot area stays the same. Sometimes takes 2 or 3 goes to break but once it does, it stays broke. My code is below:
$(function () {
$('#container').highcharts({
chart: {
plotBorderWidth: 1,
spacingTop: 0,
spacingBottom: 0,
marginRight: 15,
zoomType: 'xy'
},
credits: {
enabled: false
},
title: "Test",
xAxis: {
title: {
text: "Year"
},
allowDecimals: false
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
labels: {
format: '${value:,.0f}',
minPadding: 1000
}
},
tooltip: {
useHTML: true,
headerFormat: '<bold>{series.name}</bold><table>',
pointFormat: '<tr><td style="color:#000000">Year {point.x} : ${point.y:,.0f}</td></tr>',
footerFormat: '</table>'
},
series: [
{ data: [[1, 805.593193551804], [2, 805.593193551804], [3, 805.593193551804], [4, 805.593193551804], [5, 805.593193551804], [6, 805.593193551804], [7, 805.593193551804], [8, 805.593193551804], [9, 805.593193551804], [10, 805.593193551804], [11, 805.593193551804], [12, 805.593193551804]], name: 'Before', color: '#EDF2DB', type: 'area' },
{ data: [[1, 805.593193551804], [2, 805.593193551804], [3, 805.593193551804], [4, 805.593193551804], [5, 805.593193551804], [6, 805.593193551804], [7, 805.593193551804], [8, 805.593193551804], [9, 805.593193551804], [10, 805.593193551804], [11, 836.4400689934657], [12, 867.8232333655329]], name: 'After', color: '#FF6600', type: 'column' }
]
});
});
It was temporary problem, but in the newest master branch it is fixed.
See the example: http://jsfiddle.net/fZBjS/
<script src="http://github.highcharts.com/master/highcharts.js"></script>