I attached the below photo describe the challenge that I have
hide black color value change the black color to red and decrease the black color value from the total
here is the code URL
https://jsfiddle.net/Anasddrx/gtyhrvp3/33/
enter image description here
To set the red color for the Stop series and hide dataLabels use this config:
{
name: 'Stop',
data: [5000, 3000, 4000, 7000, 2000],
color: 'red',
dataLabels: {
enabled: false
},
},
To subtract Stop value from the stacking sum try this approach:
formatter: function() {
const stopSeries = this.axis.series.find(s => s.name === 'Stop');
return this.total - stopSeries.processedYData[this.x] + " Pcs";
},
Demo: https://jsfiddle.net/BlackLabel/pq7tdufk/
API: https://api.highcharts.com/highcharts/yAxis.stackLabels.formatter
API: https://api.highcharts.com/highcharts/series.column.color
API: https://api.highcharts.com/highcharts/series.column.dataLabels
Related
Area chart looks flat due to the fact that Y axis always starts from 0 in compare to a line chart which in the same data uses some sort of auto-fit.
Plunkr
I would like to have similar auto-fit on the area chart that works on line chart as default.
(Using yAxis[0].setExtremes is not an option really).
Is there any configuration to do so?
You can achieve it by setting xAxis.min property like that:
yAxis: {
min: 10000,
labels: {
formatter: function() {
return this.value / 1000 + 'k';
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/Layfnuz4/
API reference:
https://api.highcharts.com/highcharts/xAxis.min
The second approach is to set plotOptions.area.threshold
plotOptions: {
area: {
threshold: 10000,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/r7qc1jpk/
API reference:
https://api.highcharts.com/highcharts/series.area.threshold
EDIT
Automatic approach: set series.area.softThreshold = true as line series has.
series: [{
softThreshold: true,
name: 'Data',
data: data
}]
Demo:
https://jsfiddle.net/BlackLabel/8uj3kz4a/
API reference:
https://api.highcharts.com/highcharts/series.area.softThreshold
Looking to work with the below chart, but cannot get to change the title color to white and the axis and axis numbers to grey (or white). This should go above a dark background. Does anybody knows how to change the title color with echarts ?
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'Total memebers of the club',
fontColor: 'white',
display: true,
position: 'bottom'
},
tooltip: {},
legend: {
data: ['Total member']
},
xAxis: {
data: ["11/2018", "12/2018", "01/2019", "02/2019", "03/2019", "04/2019"]
},
yAxis: {},
series: [{
itemStyle: {normal: {color: 'white'}},
name: 'Total',
type: 'bar',
data: [5, 384, 612, 2344, 4670, 9372]
}]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
Give this a try. Add it under 'text:' like:
text: 'Total memebers of the club',
textStyle: {
color: '#ed2d2e'
}
I'm using Highcharts to generate a heatmap grid with around 10k grid cells. The heatmap renders in under a second without dataLabels. However if I enable dataLabels, which are necessary for my project, the same heatmap takes 10 seconds to render. I tried setting useHTML to true, and that renders in 30+ seconds. I'm not doing any work within the dataLabel rendering. Is there any way to speed this up?
The example with 10k cells in the heatmap with enabled data labels is here.
Highcharts.chart('container', {
chart: {
type: 'heatmap'
},
xAxis: {
min: 0,
max: 99
},
series: [{
data: data,
dataLabels: {
enabled: true
}
}]
});
No-opt rendering time: 33.5 s
From the profiler I can say thet there are two good candidates for optimization.
Rendering with overlapping labels: 10.4 s
dataLabels: {
enabled: true,
allowOverlap: true
}
No textOutline: 8.56 s
dataLabels: {
enabled: true,
allowOverlap: true,
shadow: false,
style: {
textOutline: null,
color: 'black'
}
},
The other candidate is about setting zIndex for the data labels, I cannot see how to optimize it without changing internal Highcharts method responsible for drawing data labels. You can wrap drawDataLabels method and remove the part for setting label's zIndex.
Without zIndex: 1.62 s
attr = {
//align: align,
fill: options.backgroundColor,
stroke: options.borderColor,
'stroke-width': options.borderWidth,
r: options.borderRadius || 0,
rotation: rotation,
padding: options.padding
// zIndex: 1 /* commenting this part gives a few good seconds */
};
full example: http://jsfiddle.net/dddqrb9f/1/
I commented only one line in the function but you can remove additional features if you don't need them - e.g. if you don't need labels, you can render text only.
if (!dataLabel) {
dataLabel = point.dataLabel = renderer['text']
Text instead of labels: 0.864 s
example: http://jsfiddle.net/dddqrb9f/2/
Thanks for your help. I have having a heck of a time trying to get something to work which is throwing me for a loop..
As seen in this jsfiddle (code copied below) i have a bar chart with a really long label which is wrapping.
What i am hoping to do i max out the label portion of the chart so that the label doesn't wrap while reducing the size of the actual data chart.
As an example; in the jsfiddle the label is maybe 30% of the total width and the bar data is 70%. Knowing my data, the labels would take up 80% of the width and the data would be in the last 20%.
Thoughts? Thanks, Steven.
$(function () {
$('#container').highcharts({
chart: { type: 'bar' },
xAxis: {
labels: {
style: {
"textOverflow": "none",
}
} ,
categories: ['Jan is the first month of the year and if you have a problem with that', 'Feb is the second']
},
series: [{ data: [29.9, 71.5] }]
});
});
Okay, looks like I got what i was looking for. Hope this helps someone else.
The key for me was setting the maringLeft attribute on the chart:
chart: {
type: 'bar',
marginLeft: 460
},
That, along with modifying the width, 'min-width' and useHTML on the label and lable style for the xAxis (Bar chart)
xAxis: {
categories: ['Short Name', 'Much Longer Location Name and if it is true then cool and if you want'],
labels: {
style: {
width: '400px',
'min-width': '350px'
},
useHTML : true
}
},
Thanks, Steven.
I have have a column chart which has a number of categories, each with a single data point (e.g. like this one). Is it possible to change the colour of the bar for each category? i.e. so each bar would have its own unique colour rather than all being blue?
You can also set the color individually for each point/bar if you change the data array to be configuration objects instead of numbers.
data: [
{y: 34.4, color: 'red'}, // this point is red
21.8, // default blue
{y: 20.1, color: '#aaff99'}, // this will be greenish
20] // default blue
Example on jsfiddle
Also you can set option:
{plotOptions: {column: {colorByPoint: true}}}
for more information read docs
Add which colors you want to colors and then set colorByPoint to true.
colors: [
'#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'
],
plotOptions: {
column: {
colorByPoint: true
}
}
demo
Reference:
http://api.highcharts.com/highstock#colors
http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint
Yes, here is an example in jsfiddle: http://jsfiddle.net/bfQeJ/
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
The example is a pie chart but you can just fill the series with all the colors to your heart's content =)
You can add colors array in high chart graph for changing the color of graph. You can re-arrange these colors and you can also specify your own colors.
$('#container').highcharts({
colors: ['#2f7ed8','#910000','#8bbc21','#1aadce'],
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
Like mentioned by antonversal, reading the colors and using the colors option when creating the chart object works.
var chart3 = new Highcharts.Chart({colors: ['#458006', '#B0D18C']});
just put chart
$('#container').highcharts({
colors: ['#31BFA2'], // change color here
chart: {
type: 'column'
}, .... Continue chart
Just add this...or you can change the colors as per your demand.
Highcharts.setOptions({
colors: ['#811010', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
plotOptions: {
column: {
colorByPoint: true
}
}
});
add properties:
colors: ['Red', 'Bule', 'Yellow']
This worked for me. Its tedious to set all the colour options for a series, especially if it's dynamic
plotOptions: {
column: {
colorByPoint: true
}
}
{plotOptions: {bar: {colorByPoint: true}}}