Hi all i have this chart
http://i.prntscr.com/U1ho1cqRTVq-ifoMquWKAw.png
and i need to get in result
http://i.prntscr.com/Lj_PqmNWSxiIBJmK3tS44Q.png
I think solution of this task in crosshair< but i start use highcharts one week ago. Can u help me or give some links that help solve problem.
Because i refactored a lots of code all day and had not find solution of task.
My settings
chart: {
type: 'areaspline',
backgroundColor: 'transparent',
height: '500px',
spacingRight: -1,
spacingLeft: -1
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [],
x: {
min: 0,
max: 0
},
allowDecimalse: false,
gridLineWidth: 1,
gridLineColor: '#393546',
labels: {
y: -20,
},
tickWidth: 0,
lineColor: "#fff",
zIndex: 0,
**crosshair:** {
color: 'rgba(73,168,222,0.5)',
zIndex: 0
}
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
visible: false,
title: {
text: ''
},
labels: {
enabled: false
}
},
plotOptions: {
areaspline: {
marker: {
enabled: false,
states: {
hover: {
symbol: 'circle',
fillColor: '#fff',
lineColor: '#2196f3',
lineWidth: 2,
radius: 7,
enabled: true,
}
},
},
}
},
series: [
{
data: [
],
name: 'V/IRTUS',
showInLegend: false,
color: '#2196f3',
}
],
credits: {
enabled: false
}
};
data [] i get from api and categories too and min max option
Related
I try to chanage a color of line lables:
exmaple of label pic
The line has settings:
const linedataset = {
type: 'line',
label: 'label',
data: xavarage,
order: 1,
borderColor: 'rgb(225, 54, 54)',
backgroundColor: lineBackground,
};
And common settings are:
const chartoptions = {
hoverBackgroundColor,
backgroundColor,
responsive: true,
scales: {
x: {},
y: {
min: 0,
},
},
plugins: {
title: {
display: true,
text: this.selectedCategory?.full,
font: {
size: 20,
},
},
datalabels: {
anchor: 'end',
align: 'end',
},
},
};
I have tried to usse the following code:
options: {
legend: {
color: "#ccc"
}
}
But it does not work too. How to set color of label text (line graphic)?
Your chart uses chartjs-plugin-datalabels. Therefore, you need to define color inside datalabels as follows:
datalabels: {
color: '#ccc',
anchor: 'end',
align: 'end'
},
I got a gauge defined like this:
{
type: 'gauge',
min: 0,
max: 10,
startAngle: 180,
endAngle: 0,
itemStyle: {
color: '#6b7280',
},
pointer: {
width: 2,
length: '65%',
offsetCenter: ['0', '8%']
},
progress: {
show: true,
overlap: true,
roundCap: true
},
axisLine: {
lineStyle: {
width: 5,
color: [
[0.75, '#71717a'],
[1, '#a1a1aa']
]
},
},
splitLine: {
show: false,
distance: 0,
length: 10
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
detail: {
show: false,
},
radius: '100%',
center: ['50%', '75%'],
},
I'd like to change the cursor of the chart's canvas element to be a pointer but I don't find anything in the docs about this.
If I hover the canvas, the cursor is the default OSX-cursor.
How to add gradient (mixed with two colors) for one bar chart column and on top of that stack another column with (single color)?
Currently, I am trying to figure it out how to implement gradient and single color pattern in ApexChart.js. As for now, I can only use one at the same time...
JavaScript:
var colors = ["#A865AA", "#222130",];
var dataColors = $("#monthlycost-ApexChart").data('colors');
if (dataColors) {
colors = dataColors.split(",");
}
var options = {
chart: {
height: 260,
type: 'bar',
stacked: true,
stackType: '10%',
toolbar: {
show: false
},
},
stroke: {
curve: 'smooth',
width: 1
},
grid: {
column: {
colors: ['transparent', '#e5e5e5'],
},
},
plotOptions: {
bar: {
columnWidth: '20%',
endingShape: 'rounded',
}
},
dataLabels: {
enabled: false
},
series: [{
name: 'Cost',
data: [5.7, 5.7, 5.4, 5.4, 5.2, 7.8, 5.6, 5.4, 5.7, 0, 0, 0]
}, {
data: [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12]
}],
xaxis: {
labels: {
show: true,
style: {
fontSize: '10px'
},
padding: {
top: 0,
bottom: 20
},
},
offsetY: -10,
position: 'bottom',
axisBorder: {
show: false
},
axisTicks: {
show: false
},
lines: {
show: false
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
padding: {
top: -5,
bottom: 0
},
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false
},
lines: {
show: false
},
title: {
text: '£0,000',
style: {
fontWeight: 400,
fontSize: '9px',
}
},
tickAmount: 5,
forceNiceScale: false,
decimalsInFloat: 0,
max: 10,
},
fill: {
type: "gradient",
/* gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
type: 'vertical',
opacityTo: 0.9,
colorStops: [
{
offset: 40,
color: "#EF9432",
opacity: 1
},
{
offset: 100,
color: "#A865AA",
opacity: 1
}
]
}*/
},
legend: {
show: false,
},
colors: colors,
grid: {
row: {
show: false,
},
borderColor: '',
padding: {
bottom: 5,
top: 1
}
}
}
Need to get this
Currently have
You should use distributed property
plotOptions: {
bar: {
distributed: true
}
}
I am using column highchart. Now I want % sign after my Data. Something like, if I have data value 7.18, I want to show it in 7.18% format. How can I do this? Please share with me if anyone has any idea.
My codes are below:
$('#cagr2').highcharts({
chart: {
type: 'column',
spacingBottom: -7,
spacingTop:20
},
title: {
text: ''
}, exporting: { enabled: false },
credits: {
enabled: false
},
xAxis: {
lineColor: 'transparent',
categories: ['']
},
yAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
enabled: true,
layout: 'horizontal',
align: 'center',
//x: -10,
verticalAlign: 'top',
y: -5,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#ffffff',
borderWidth: 1,
shadow: true
},
tooltip: {
headerFormat: '<b>{point.x}</b>',
pointFormat: '{series.name}: {point.y}',
valueSuffix: ' %'
},
plotOptions: {
series: {
animation: {
duration: 7000
}
},
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black',
fontSize: '18px'
}
}
}
},
series: [{
name: 'Rate of return',
data: [parseFloat(cagr)]
}]
});
All you need to do here is add the format or formatter attribute to your dataLabels.
Example using format:
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black',
fontSize: '18px'
},
format: '{y} %', // your label's value plus the percentage sign
valueDecimals: 2 // show your label's value up to two decimal places
}
}
Example using formatter:
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black',
fontSize: '18px'
},
formatter: function() {
// numberFormat takes your label's value and the decimal places to show
return Highcharts.numberFormat(this.y, 2) + '%';
},
}
}
Here's how this will look:
I hope this helps!
I am using EXTJS 4.0 and I want to display tips when user move to on my line Charts i already created Group Line Chart and as well as create Rich Tips also but now my problem is when I create tips for every series and run in browser I got blank tips for three line Chart out of four but fourth line chart display the correct Rich tips. My sample code is:
Code For Panel and Line charts:
var ChequesDetailsChartsMonthWiseWin = Ext.create('Ext.panel.Panel', {
width: 800,
height: 600,
hidden: false,
id:'ChequesDetailsChartsMonthWiseWinId',
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: ChequesDetailsLineChartsMonthwiseStore,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['Honorarium','Program Expenses','Assets Amount','Human Resource'],
title: 'Amounts (In Rs)',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['month'],
title: 'Month of the Year'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'month',
yField: 'Honorarium',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Honorarium');
this.setTitle("Information for " + 'Honorarium - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'month',
yField: 'Program Expenses',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Program Expenses');
this.setTitle("Information for " + 'Program Expenses - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'month',
yField: 'Assets Amount',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Assets Amount');
this.setTitle("Information for " + 'Assets Amount - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'month',
yField: 'Human Resource',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Human Resource');
this.setTitle("Information for " + 'Human Resource - Month :' +storeItem.get('month') );
}
} // tips ends here
}]
}
});
And Sample Preview is :
Line Chart :
Line Chart :
Please provide me solution of how to display tips in all charts or where I am doing wrong.