Elaborating a graph where I point with y different, and 'x' equals; I put in the series:
series: [{
name: 'Grafico 1',
data: data,
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y, 2)
},
color: "#000000"
},
stacking: 'normal',
}]
and as a result in the chart have the highest value added with the smaller one, that is:
http://i.imgur.com/Ups7AzT.png
If I remove the statement "stacking: 'normal'", I instead the chart without the line joining the points:
http://i.imgur.com/gMAO5VW.png
I ask: you can have the chart without the value added is greater than the lower (ie the value 18 is represented as 18 in the chart, and 26.45 because the child is 8.45)?
Related
I am using the config below to show the tooltips:
tooltip: {
pointFormat: '{point.y}'
},
the data is like:
data: Array(4)
0: {name: "RF_test_93219167", y: 1274958}
1: {name: "RF_test_26400097", y: 1274958}
2: {name: "RF_test_50328208", y: 1274958}
3: {name: "RF_test_73758432", y: 1274958}
and the tooltips still shows the Brand key in front of the value. and I don't want it to be bold or formatted, just show 1274958. just want it simple, and I don't want a dot in front of the value either. how can I achieve it?
tooltip: {
formatter: function () {
return this.point.name + ':' +this.y;
}
},
use this instead of pointFormat to achieve the same, you also add additional things needed on the tooltip using this method.
I am learning to use Highstock charts. I pass OHLC data, but when I use
type: 'line'
the chart displays Open Price. I understand Open is the first element after date, but is this configurable to change to Close?
Thanks
Sure, it is configurable. You can parse your data to display only the close values.
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json', function (data) {
const lineData = data.map(d => d[4]);
Highcharts.stockChart('container', {
series: [{
type: 'line',
data: lineData
}],
});
});
Demo: https://jsfiddle.net/BlackLabel/a6dtL8hw/
I'm doing a combo scatter and line charts (it's a electoral poll tracker) following this example from HC docs:
series: [{
type: 'scatter',
name: 'Party1',
data: [10.1,9.2,9.8]
}, {
type: 'scatter',
name: 'Party2',
data: [6.5,6.5,6.8]
}, {
type: 'spline',
name: 'Party1-tracker',
data: [10.1,9.8,10.0]
}, {
type: 'spline',
name: 'Party2-tracker',
data: [6.5,6.5,6.6]
}]
On another document, I can make a chart from a Google Spreadsheet. I've followed this Jack Dougherty example: https://jackdougherty.github.io/highcharts-with-google-sheets/bubble.html
data: {
// insert the key from your public Google Sheet
googleSpreadsheetKey: '1fYJOd-2agLPg38qhblS8qoZGWGkKcK-3uTsMpf37Hys',
// insert Google Sheet column headers (x, y, z...) to match column numbers (0, 1, 2...)
seriesMapping: [{x: 0, y: 1, z: 2, name: 3, country: 4, category: 5}],
complete: function(data) {
categoriesIntoSeries(data);
changeSeriesColors(data);
}
},
plus
/**
* Here, all data is split into categories depending on the 'category' property
* Needed for correct legend display
*/
function categoriesIntoSeries(data) {
rows = data.series[0].data;
data.series = [];
for (i = 0; i < rows.length; i++) {
cat = rows[i].category;
catExists = false;
for (j = 0; j < data.series.length; j++) {
if (data.series[j].name == cat) {
// Add a data point to existing series
data.series[j].data.push(rows[i]);
catExists = true;
}
}
if (!catExists) {
// When category is encountered for the first time, create a series
data.series.push({name: cat, data: [rows[i]]})
}
}
}
What I've tried unsuccessfully is (maybe it's impossible) to connect each column from my spreadsheet to each 'series' element. Something like this:
{
type: 'scatter',
name: 'Party1',
data: /*get data from spreadsheet column 1 or a json field*/
}
I'll be thankful if you can tell us if it's possible and, if yes, point me to some documentation or example on how to do this
You can use seriesMapping array for this. It should contain a mapping for every column from the sheet.
Refer to this live demo: http://jsfiddle.net/kkulig/b45s1Luh/
seriesMapping: [{
x: 0,
y: 1 // first column series
}, {
x: 0,
y: 2 // second column series
}, {
x: 0,
y: 3 // third column series
}]
}
API reference: https://api.highcharts.com/highcharts/data.seriesMapping
I've put a label in my data showing the index of each serie:
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{series.index}'
}
}
},
Altough it starts at 0 and I would like it to start at 1.
Here a fiddle.
You can switch from format to formatter to easily solve this. It provides more flexibility and advanced functionality. The format attribute can only do simple tasks involving the variables in their original form.
You have:
format: '{series.index}'
Replace it with:
formatter: function() {
return this.series.index+1;
}
As in this JSFiddle demonstration.
series: [{
type: 'flags',
name: 'Flags on axis',
data: [{
x: Date.UTC(2011, 2, 1),
title: 'A'
}, {
x: Date.UTC(2011, 5, 1),
title: 'C'
}],
shape: 'squarepin'
}]
$("#btnAddFlag").click(function () {
chart.series[0].setData(
{
x: Date.UTC(2011, 2, 1),
title: 'B'
});
});
Above code is part of highstock chart option and I want to add flag based on user event click. However I able to add the new point flag into the chart but the existing flags which title A and C will be missed out.
how can I add the new flag into the chart with the existing flags ?
On the other hand, I am able get the flag data but I'm unsure to
generate the correct data structure and reinitialize the old and new
flag data back into the chart.
Thank you.
Use addPoint instead of setData.
http://api.highcharts.com/highstock#Series.addPoint()
$("#btnAddFlag").click(function () {
chart.series[0].addPoint({
x: Date.UTC(2011, 2, 1),
title: 'B'
});
});