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
Related
I have a requirement to show 2 line graphs in a single chart. One line graph should be dragable and other one shouldn't be dragable. I was able to enable dragging for both lines, but not sure how to enable it just for one line.
var scatterChart = new Chart(ctx, {
type : 'line',
data : {
labels: labels,
datasets : [ {
label : 'Scatter Dataset 1',
showLine : true,
fill: false,
data : dp1
},
{
label : 'Scatter Dataset 2',
showLine : true,
fill: false,
data : dp2
}]
},
options : {
maintainAspectRatio: false,
dragData : true,
dragX : false,
}
});
scatterChart.render();
I am new to Javascript. I found this graph on amcharts. I want to change the text color and add a stroke (that can be different colors on each) to each circle. Any help would be greatly appreciated!
I have tried to google search but don't really know where to even start or what to search.
{name: "Core",
children: [
{
name: "First",
children: [
{ name: "A1", value: 100 },
{ name: "A2", value: 60 }
]
},
networkSeries.dataFields.value = "value";
networkSeries.dataFields.name = "name";`
I just want the stroke color to be added and editable (can start with #25BEC1) and the text color to change to #0B3D49
Colors of the nodes
There is a whole section that talks about the colors of the Forced Directed Tree: https://www.amcharts.com/docs/v4/chart-types/force-directed/#Colors
You can either set the colors' source from data or the colors list. I'm not sure if you meant to just use one color for everything. If that's the case,
let chart = am4core.createFromConfig({
series: [{
type: 'ForceDirectedSeries',
...,
colors: {
list: [
'#25BEC1'
],
reuse: true
},
...
}],
data: ...
}, 'chart', am4plugins_forceDirected.ForceDirectedTree);
demo: https://jsfiddle.net/davidliang2008/q42c8u5w/23/
Text colors of the nodes
To change the text color of the labels, you can set the color to the fill property of the label object:
let chart = am4core.createFromConfig({
series: [{
type: 'ForceDirectedSeries',
...,
nodes: {
label: {
fill: '#0B3D49',
text: '{name}'
}
},
...
}],
data: ...
}, 'chart', am4plugins_forceDirected.ForceDirectedTree);
demo: https://jsfiddle.net/davidliang2008/q42c8u5w/25/
Working with tooltips in Highcharts I can see that not all type of series are included in the same tooltip. In the definition of my Highcharts object the property of tooltip look like:
tooltip: {
positioner : function (boxWidth, boxHeight, point) {
return {
x : point.plotX - 100,
y : point.plotY
};
},
shared : true
}
And how I am setting the tooltip property for each series is:
public getDefaultTooltip() {
return {
pointFormat : '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y} </b><br/>'
};
}
After read the documentation of tooltip I can see that shared property is not valid for series of type 'scatter', what is exactly the type of series that is not working for me. So, is there some workaround in order to make available all the data in the same shared tooltip?
in the example bellow I want to show all the series data in the same tooltip but the scatter serie is using a different popover. http://jsfiddle.net/rolandomartinezg/a6c4c4tv/1/
The ScatterSeries is defined in highcharts with noSharedTooltip = true. I think this is because the scatter series show both the x and y in their tooltips.
var ScatterSeries = extendClass(Series, {
type: 'scatter',
sorted: false,
requireSorting: false,
noSharedTooltip: true,
trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
takeOrdinalPosition: false, // #2342
kdDimensions: 2,
kdComparer: 'distR',
drawGraph: function () {
if (this.options.lineWidth) {
Series.prototype.drawGraph.call(this);
}
}
});
To get around this, you can use a line series instead of the scatter series with the lineWidth = 0. You also need to turn off the hover state for the series to avoid the line showing up on hover.
, {
type: 'line',
name: 'Average',
lineWidth: 0,
states: {
hover: {
enabled: false
}
},
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}
http://jsfiddle.net/a6c4c4tv/2/
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