In Excel i was able to draw this chart from data
Chart Image
I want to convert this chart to highcharts. Data is in Google spreadsheet and I am using data module to get data directly from Google spreadsheet and show over chart. Here is code doing it.
$('#solar_chart_one').highcharts({
chart: { type: 'column' },
data: {
googleSpreadsheetKey: '0Alz3h5kIx8cWdFNHbmxqbXRILV9kbkd4V0oyX0ZyMWc'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
title: {
text: 'Power Bill Saving Options'
}
});
Here is JsFiddle for this code
Any help on how to make it look alike?
I would use the callback function and set the series you want to be a line to be a line like so:
function (chart) {
chart.series[2].update({
type: 'line',
color: 'blue'
});
}
I changed it to also be a blue line.
Related
I'm able to create and configure the series of a Pie chart using the following code:
createPieChart() {
this.options.series = [{
type: 'pie',
labelKey: 'os',
angleKey: 'share',
label: { enabled: true },
}]
this.options.legend = { enabled: false }
},
The labels appear like so, which means that if the label is too long it overflows both onto the chart itself and over the sides of the div it's being contained within:
I am aiming to make it so that if the label has more than 5 characters then it would only show 3 characters and the following symbols: ...
So for example, the label 'Symbian qwerfrwf wfegewdfv fewdf feewdf' for the blue section of the pie chart above would only show 'Sym...'
I know how to do this for column and bar charts where we use a formatter
label: {
formatter: (params) => {
if (params.value.length > 5) {
return params.value.substr(0, 3) + '...';
}
return params.value;
},
}
However, for a pie chart there doesn't seem to be a formatter available in the documentation (API Reference) (https://www.ag-grid.com/javascript-charts-pie-series/)
How can I achieve the style I want for pie chart labels?
legend: {
enabled: true,
item:{
label:{
formatter:(params)=>{
console.log('id',params.id)
console.log('itemId',params.itemId)
console.log('value',params.value)
return 'my legend goes here'
}
}
}
},
`https://jsfiddle.net/BlackLabel/agq6ebjd/1/`
In the above link, how can I get the data labels A, B, C with are inside the bars, out of the bars and below the x-Axis?Expected Result to have the label below the bars shown like screenshot
Thanks in advance.
You can disable data labels and use x-axis labels instead. Just add name property to the data points and set xAxis.type as 'category'.
plotOptions: {
series: {
dataLabels: {
enabled: false
},
...
}
},
xAxis: {
type: 'category',
...
}
Live demo: https://jsfiddle.net/BlackLabel/drgkt598/
API Reference: https://api.highcharts.com/highcharts/xAxis.type
I am tried to get the series from the already displayed highchart and use that series to plot a new chart in another one html div, i have written below code to achieve this,finally i get the series from existing graph but can't render to the new html div
var data = chart.series; // series from already displyed
jQuery('#commonModal_res').highcharts({
chart: { zoomType: 'x'},
title: { text: "" },
subtitle: { text: 'Click and drag in the plotted area to zoom in' },
xAxis: { type: 'datetime' },
legend: { enabled: false },
series: data,
});
note : throwing too many recursion error
The problem occurs because you're trying to assign the complete and already built series object, instead of configuration object which is required. In order to make it work, you need to assign the configuration object by this way:
$('#new_con').highcharts({
chart: { zoomType: 'x'},
title: { text: "" },
subtitle: { text: 'Click and drag in the plotted area to zoom in' },
xAxis: { type: 'datetime' },
legend: { enabled: false },
series:charts[0].userOptions.series,
});
Then your chart should be rendered properly.
Additionaly, you can access appropriate chart by the Highcharts.charts array on global Highcharts object, where all charts are stored, just like that:
series: Highcharts.charts[0].userOptions.series,
In this case creating new charts array is unnecessary.
Live example: http://jsfiddle.net/cqfj5t34/
I have basic Waterfall chart (HighChart.js) basic Waterfall chart image example
How display two labels on each column? Besides, first label must be at top of column and another label must be on bottom of column. So it should be exactly like on image.
Now I have two ideas:
First label is rendered on first chart, second value will be rendered on additional hidden chart (link to example: [http://jsfiddle.net/gk14kh3q/1/][3])
$(function () {
$('#container').highcharts({
chart: {
type: 'waterfall'
},
title: {
text: 'Highcharts Waterfall'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'USD'
}
},
legend: {
enabled: false
},
series: [{
dataLabels: {
enabled: true,
// here need align label
}
}, {
dataLabels: {
enabled: true,
// here need align label
}
}]
});
});
Combine two label in one by using formatting function and useHTML property. And after that set position to labels by using css or external js
May be some others practices exist? I'll be very pleased for help. Even discussion can be usefull. Thank you!
P.S. How I could insert icons to chart like on provided image?
You can use chart.renderer.label for adding new dataLabels for your column points. You can also use chart.renderer.image for adding arrows to your chart:
var addLabels = function(chart) {
$('.custom').remove();
var series = chart.series[0],
url;
Highcharts.each(series.data, function(p, i) {
if (i) {
chart.renderer.label(p.secondLabel, p.plotX + chart.plotLeft, p.yBottom + chart.plotTop).attr({
'text-anchor': 'middle'
}).addClass('custom').add();
if (p.y > 0) {
url = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Arrow_up.svg/1000px-Arrow_up.svg.png';
} else {
url = 'https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png'
}
chart.renderer.image(url, p.plotX + chart.plotLeft, chart.plotTop + chart.plotHeight - 15, 8, 13).addClass('custom').add()
}
});
};
Here you can find an example how it can work:
http://jsfiddle.net/zc2fb8vt/
I'm plotting a chart where the x axis is a datetime. My data contains lots of sample from each day, and the resulting chart is jittery.
Is there an easy way to get highcharts to only display 1 or 2 datapoints from each day, to make the chart smoother?
http://jsfiddle.net/RjPRd/72/
var data = [[1354282654000,13],[1354285785000,13],[1354289387000,14],[1354292990000,15],[1354296592000,13],[1354419090000,20],[1354422692000,21],[1354426295000,20],[1354435425000,19],[1354438087000,19],[1354538087000,24]];
var options = {
chart: { renderTo: 'graph' },
xAxis: { type: 'datetime' },
series: [{data: data}]
};
var chart = new Highcharts.Chart(options);
If you are asking if HighCharts can do interpolation/projections then the answer is no.
What you can do is pre-process your data or use HighStock with dataGrouping. Here is a very basic example.
This is the code that does it:
plotOptions: {
series: {
dataGrouping: {
approximation: 'average', //default
units: [[
'day',
[1]
]]
}
}