Here's my jsFiddle
How can I remove the border or to be the same as the bar (not darker) ?
EDIT: Actually, I need to remove the border completely. Is this possible?
var chartOptions = {
xaxis: { ticks: chartTicks },
grid: { clickable: true, hoverable: true },
series: { stack: true, bars: { fill: '#000', show: true, align:'center', barWidth: 0.5 } }
};
You can use the lineWidth option to remove the outline / border of the bars and / or the fillColor option to change the filling (this can also be used for gradients):
series: {
stack: true,
bars: {
show: true,
align: 'center',
barWidth: 0.5,
lineWidth: 0,
fillColor: {
colors: [{
opacity: 1.0
}, {
opacity: 1.0
}]
}
}
}
See this fiddle for an example.
To remove the border from the bars in the graph, you can add lineWidth: 0 to the bars object in your options.
series: {
stack: true,
bars: {
lineWidth: 0,
show: true,
align: 'center',
barWidth: 0.5
}
}
Here it is in action.
This could be found in the API docs here, by the way.
I am not 100% sure if you want to remove borders around the graph or the bars. The jsFiddle here has done both and the code is explained below.
To remove the border around the bars. Supply lineWidth to the bars as in the example below.
var chartOptions = {
xaxis: {
ticks: chartTicks
},
grid: {
clickable: true,
hoverable: true
},
series: {
stack: true,
bars: {
show: true,
align: 'center',
barWidth: 0.5,
lineWidth: 0
}
}
};
To remove the border from around the graph. Supply borderWidth to the grid you can set borderWidth: 0 or you can specify each width like in the example below.
var chartOptions = {
xaxis: {
ticks: chartTicks
},
grid: {
clickable: true,
hoverable: true,
borderWidth: {
top: 0,
right: 0,
bottom: 0,
left: 0
}
},
series: {
stack: true,
bars: {
show: true,
align: 'center',
barWidth: 0.5
}
}
};
Related
I want to change the axis position of data label 6.02%. How do I change it because this data is dynamic. Here's my code :
Highcharts.chart('container' + this.random, {
credits: {
enabled: false
},
title: {
text: this.graphtitle,
align: 'left',
style: {
fontSize: '12px',
},
},
chart: {
height: this.graphheight,
width: 500,
animation: false,
backgroundColor: 'transparent',
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
color: '#000',
align: 'left',
format: '{point.y} %', // added percentage sign here
overflow: 'justify', // prevent labels from being cut off
distance: 10, // increase distance between labels
x: -40,
y: -20,
//css
style: {
fontSize: '10px',
textOutline: 0,
},
connectorWidth: 0,
},
animation: true,
showInLegend: true,
},
},
yAxis: {
labels: {
staggerLines: 2,
enabled: true,
align: 'left',
padding: 0,
reserveSpace: true
},
},
legend: {
layout: 'vertical',
verticalAlign: 'bottom',
align: 'right',
symbolHeight: 10,
symbolRadius: 0,
symbolPadding: 1,
itemMarginTop: 10,
itemMarginBottom: 5,
textOutline: 0,
itemStyle: {
fontSize: '10px',
textOutline: 0,
}
},
series: [{
enableMouseTracking: false,
type: 'pie',
innerSize: '65%',
colors: this.graphcolors,
data: this.graphdata,
},],
});
},
below is the visual of pie chart:
I was trying this method but it's not working with my code any other method anyone would like to suggest ?
chart.series[0].data[1].update({
dataLabels: {
align: 'center',
verticalAlign: 'middle',
inside: true
}
});
I suppose graphdata here is dynamic data passed as a props. I came across a similar kind of bottleneck recently.
What I did to resolve this error is following:
You can sort your data ascending or descending using life cycle hooks e.g. getting the highest value element at 0 index or getting the lowest value element at 0 index.
data property of series in high charts expects a object with name and other custom properties to app where graph data has values like
['value 1', 1],
['value 2', 2]
{
name: this.graphdata[0][0],
y: this.graphdata[0][1],
sliced: false,
selected: true,
dataLabels: {
x: -25,
y: -15
}
},
{
name: this.graphdata[1][0],
y: this.graphdata[1][1],
sliced: false,
selected: true,
dataLabels: {
x: -60,
y: -25
}
},
this.graphdata[2],
],`enter code here`
In your code, you put negative values for plotOptions.pie.dataLabels.x and plotOptions.pie.dataLabels.y. This is probably not the best strategy if you push data dynamically...
When you use setData() to update your series, Highcharts optimizes labels position automatically.
Here is a simple example:
let chart = Highcharts.chart('container', {
chart: {
type: 'pie'
},
plotOptions: {
pie: {
innerSize: '65%',
dataLabels: {
format: '{point.y}',
distance: 10
}
}
},
series: [{
colors: ['red', 'green', 'blue'],
data: [10, 20, 15]
}]
});
function getInt() {
return chance.integer({ min: 1, max: 100 });
}
document.querySelector('button').addEventListener('click', () => {
chart.series[0].setData([getInt(), getInt(), getInt()]);
});
#container {
width: 350px;
height: 350px;
}
<script src="https://code.highcharts.com/10.3.3/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chance#1.1.9/chance.min.js"></script>
<div id="container"></div>
<button type="button">Update</button>
I need to get a chart like this and I have no idea how to get it.
I've tried with custom tooltips but I need show them all of them at the same time. I've tryed as well with chartjs-plugin-datalabels but the labels are inside the canvas and they appear cut.
Do I need to create a html tooltip for every data?
Any ideas?
Updated:
Here is my code:
options: {
responsive: true,
maintainAspectRatio: true,
legend: {
display: false
},
animation: {
animateScale: true,
animateRotate: true
},
cutoutPercentage: 60,
circumference: 2 * Math.PI,
showAllTooltips: true,
tooltips: {
enabled: false
},
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderColor: 'white',
borderRadius: 50,
borderWidth: 1,
anchor: 'end',
align: 'end',
color: 'white',
padding: 10,
font: {
weight: 'normal',
size: '10'
},
formatter: function(value, context) {
var percentageNum = context.chart.data.datasets[0].data[context.dataIndex]
return percentageNum + '\n %';
}
}
}
}
and this is what I get:
I'm trying to change graph indicators on a button click. I've integrated 4 indicators sma, boilinger band, ema and macd. First 3 are working but macd is not working.
Here is the fiddle
Highcharts.stockChart('container', {
plotOptions: {
candlestick: {
color: '#66a6ff',
upColor: '#3c68a7'
},
column: {
color: '#D3D3D3'
}
},
rangeSelector: {
selected: 1
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
height: '70%',
lineWidth: 2,
resize: {
enabled: true
}
}, {
labels: {
align: 'right',
x: -3
},
top: '70%',
height: '30%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
series: getSeries(coinFullName, coin, currency),
credits: false
});
}
Here's the snippet you can search in fiddle:
if($("#indicatorType").val() == 'macd'){
series.push({
name:'MACD',
type: 'macd',
linkedTo: 'primary'
});
}
Thank you for reporting.
I isolated demo with MACD here:
http://jsfiddle.net/BlackLabel/swc4sj36/
and it seems that the issue is related with this specific data. I created a new case in our bugtracker here:
https://github.com/highcharts/highcharts/issues/7788
Basically, I am pulling data using AJAX from MySQL to plot line chart.
Now I want different colors for points on my line chart based on data. As in if data falls within the range it will be a different color and outside range it will be a different color. Someone please suggest or guide. Code used below:
I have tried using Flot threshold plugin which is available below but it's not working.
var offset = 0;
//plot(html);
var options = {
colors: ["#3fcf7f"],
threshold: {
below: 200,
colors: ["#ff7070"]
},
series: {
lines: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.0
}, {
opacity: 0.2
}]
},
},
points: {
radius: 5,
show: true
},
shadowSize: 2
},
grid: {
color: "#fff",
hoverable: true,
clickable: true,
tickColor: "#f0f0f0",
borderWidth: 0
},
//colors: ["#ff7070"],
xaxis: {
mode: 'time',
timeformat: '%d/%m/%y',
//rotateTicks: 90
},
yaxis: {
ticks: 5,
tickDecimals: 0,
},
tooltip: true,
tooltipOpts: {
content: "%y.1 on %x.4",
defaultTheme: false,
shifts: {
x: 0,
y: 20
}
}
};
console.log(html.data);
console.log(html.data[0][0]);
data.push(html);
// A null signifies separate line segments
$.plot("#flot-color", data, options);
There is no colors property, and the color and threshold properties belong inside the series property. Change your options to this:
var options = {
series: {
color: "#3fcf7f",
threshold: {
below: 200,
color: "#ff7070"
},
lines: {
...
Fiddle that shows a working chart.
Good day dear colleagues.
The problem is that the names of each bar are not where you need. The bar is located on the right and left of its name. But I need that title was above each bar, rather than his left. How this can be done, I am sure that this is not as difficult as it seem^
Here is my code:
$('header').jqChart({
title: { text: title],
fillStyle: '#85b1de'
},
legend: { visible: false },
border: { visible: false },
axes: [
{
strokeStyle: 'transparent',
visible: false,
majorGridLines: { visible: false },
lineWidth: 0,
location: 'bottom',
majorTickMarks: { visible: false },
labels: {
visible : false
}
},
{
strokeStyle: 'black',
visible: false,
majorGridLines: { visible: false },
lineWidth: 0,
location: 'left',
majorTickMarks: { visible: false },
labels: {
visible : true,
fillStyle: '#85b1de',
font: '16px sans-serif'
}
}
],
animation: { duration: 0.5 },
series: [
{
pointWidth: 0.5,
type: 'bar',
fillStyles: color,
data: [
[label[0], data['a']],
[label[1], data['b']],
[label[2], data['c']],
[label[3], data['d']]
],
labels: {
stringFormat: ' %s %%',
valueType: 'dataValue',
font: '14px sans-serif',
fillStyle: 'white'
}
}
]
});
it seems like there is some CSS defining things (and not included in your code) :)
I would check it for:
- display:inline (and remove it, or change it to block),
- width of parent container can be set to "too low",...
Can we see the whole thing (html+css+js) / fiddle / ...