I am currently working on an angular 5 application adn using highcharts for charts. I have a stacked bar chart with me. It plots the volume of positive, neutral, negative data across various categories.
The xAxis categories are
['Cat1', 'Cat2', 'Cat3', 'Cat4', 'Cat5']
and stacking normal
plotOptions: {
series: {
stacking: 'normal'
}
}
and the series data is in the format
series : [
{name : 'positive', data : [1,5,6,8,9]},
{name : 'neutral', data : [2,6,7,8,3]},
{name : 'negative', data : [3,6,4,2,8]}
]
It works great. Now, I have an array called categorySentimentData, where each object contains a company value as well as seriesData value (which is in the required format to be fed to our chart).
{company : company.companyname,
seriesData : [
{name : 'positive', data : positiveArray},
{name : 'neutral', data : neutralArray},
{name : 'negative', data : negativeArray}
]
Now I have a select tag whose options are various company names. When i select a different company, the chart should be fed with the appropriate series data and redrawn.
My chart creation code :
this.categorySentimentChart = new Highcharts.Chart('compChart',{
chart : {
type : 'bar'
},
title : {
text : this.selectedCompany
},
xAxis : {
categories : categoryList,
},
yAxis : {
title : {
text : ''
}
},
legend : {
reversed : true,
layout : 'horizontal',
align : 'center',
verticalAlign : 'bottom'
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series : this.categorySentimentData.filter((com) => com.company == this.selectedCompany)[0].seriesData
});
I have searched for ways to change series data and redraw the chart. They all have the same code
chart.series[0].setData([1,2,3,4,5]);
Is there a way i can reset the entire series data and redraw it? This is function i currently use when a company is selected
onCompanyChange() {
let targetSeriesData = this.categorySentimentData.filter((com) => com.company == this.selectedCompany)[0].seriesData;
this.categorySentimentChart.series.forEach((item, index) => {
this.categorySentimentCompetitorChart.series[index].setData(targetSeriesData[index], false);
});
console.log(this.categorySentimentCompetitorChart.series);
this.categorySentimentCompetitorChart.redraw(); }
But this isn't working. The chart disappears as soon as I click a company. Please guide me on how to achieve the desired functionality. Here is a jsfiddle link recreating the scenario as close as possible https://jsfiddle.net/j8zyx6ba/19/ . TIA
Related
This is my EChart init code:
var option = {
tooltip : {
trigger: 'axis'
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : cat
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'Series 1',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:val
}
]
};
The line appears with area (correct) and colored in red (I think by default, I haven't added anything to my code). How can I change the color of the chart's line?
I've tried with
itemStyle: {normal: {areaStyle: {type: 'default'}}, color: '#d5ceeb'},
but it doesn't work.
You are writing color inside itemStyle which changes color of your data points, not the line.
It should be written in lineStyle for the line color to change.
series : [
{
name:'Series 1',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:val
lineStyle: {color: '#d5ceeb'}
}
]
For more options on lineStyle refere here
As you can see on image below, if you don't neet to define details of line or item (in case scatter chart type) color can be specified on the same level as data, type ... etc
I have this HighCharts Pie Chart with 4 slices:
Highcharts.setOptions({
colors : ['#FD625E', '#69D7C6', '#573755', '#A3ABB7']
});
$('#pred_area_js').highcharts({
chart : {
type : 'pie',
options3d : {
enabled : true,
alpha : 45
}
},
title : {
text : 'title'
},
subtitle : {
text : 'subtitle'
},
plotOptions : {
pie : {
innerSize : 100,
depth : 45,
colors : ['#FD625E', '#69D7C6', '#573755', '#A3ABB7']
}
},
series : [{
name : 'chart name',
animation : {
duration : 2000
},
data : [
['Data1', 1634],
['Data2', 1403],
['Data3', 1085],
['Data4', 48]
]
}
]
});
I tried many ways but It's using the default colors. And the 3D isn't working either. Can you tell me how should I use it?
Thank you!
If you use Highcharts.setOptions it will set the options for ALL charts on the page so maybe you have multiple charts on the same page.
For the 3d effect be sure to add the 3d script :
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
Fiddle with colors and 3D effect working
I struggle to add a label on top of a line in highcharts .. for example suppose I have 4 series (all visible) with name 'data', 'mean', '+1 std', '-1 std':
And I would like as a result:
I am lost to know how to add it ... even with the documentation it seems I need the abscissa and ordinate to add for each label. How can I retrieve this information? Is it possible to add the label directly when I add the series?
chart.addSeries({
id : 'mean',
name : 'mean',
type : 'line',
lineWidth : 1,
lineColor : 'rgba(0,128,0,0.9)',
color : 'rgba(0,128,0,0.9)',
dashStyle : 'LongDash',
zIndex : 5,
data : [[ext.dataMin, mean], [ext.dataMax, mean]],
enableMouseTracking: false
});
Notice that I do not want to display this information in a legend, but on the chart itself-
You can do this with a dataLabel.
If you disable dataLabels in the plotOptions, but enable them on the first point of each series, you will get exactly what you're asking for.
Code example:
data: [
{
x:0,
y:5,
dataLabels:{
enabled: true,
format: 'label 1: {y}'
}
},
[10,5]
]
Fiddle example:
http://jsfiddle.net/jlbriggs/vtmqLzer/
I've created a Pie Chart, using Highcharts. I have a title and I need to inject the name of data series inside the title. So it's like this:
title: {
text: 'Data name: {name}',
align: 'center',
useHTML: true,
verticalAlign: 'middle',
y: -70
},
series: [{
type: 'pie',
name: 'Some name to be injected inside the title',
innerSize: '70%',
data: []
}]
Is it possible to do that?
I would do this by identifying or retrieving the series name first, and assigning it to a variable to be used within the chart configuration options.
Whatever method you're using to retrieve or process the data for the series object of the chart should be able to provide you the name to use independently.
Like:
//process data...
var seriesData = [['Group A', 1598],['Group B', 872],['Group C', 321]];
var seriesName = 'Chart Series Name';
$(function() {
$('#container').highcharts({
chart : { type : 'pie' },
title : { text : seriesName },
subtitle : { text : null },
tooltip : { },
plotOptions : { },
series : [{
name : seriesName,
data : seriesData
}]
});
})
Example:
http://jsfiddle.net/jlbriggs/3d3fuhbb/64/
There is no direct way to do this. I suggest to use the load event of highcharts:
chart: {
/* some other code */
events: {
load: function () {
//collect information
var title_old = this.title.textStr,
title_new,
substitute= this.series[0].name,
needle = '{name}';
//replaceing 'needle' with 'substitute'
title_new = title_old.replace(needle,substitute);
//set title
this.setTitle({ text: title_new});
}
}
}
Hints:
works only if you have one series (see in code: series[0])
tested with Highcharts JS v4.1.8 (2015-08-20)
for information about String.prototype.replace() have a look here [1]
[1] : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
I am trying to store the entire Highcharts/Highstocks script into a function for js to make things a bit more compact and easier to replicate.
$(function() {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : [[1,2],[4,5]],
tooltip: {
valueDecimals: 2
}
}]
});
});
This is basically whats in the file highchartsfunc.js that I call for the function. Any idea?
You already have it in a function, just one that executes immediately. Here it is in a callable form with the data and renderto defined by the caller:
function createNewChart(data, render) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : render
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
}
then you can call it like this from wherever you like:
createNewChart([[1,2],[4,5]], 'container');