I have created a treemap using Highcharts, but the top and left borders are missing. I've been reading through the docs but can't find anything which will help.
I have created a Codepen here. You can see that against the black background the borders along the top and left sides of the series aren't visible. I think they're there, but maybe the chart is offset on the X/Y by a pixel or something.
Highcharts.setOptions({
colors: ['#263542', '#3d4d5d', '#41474d', '#515961', '#292e33', '#24445e'],
lang: {
thousandsSep: ','
}
});
Highcharts.chart('treemap', {
chart: {
backgroundColor: 'rgba(255,255,255,0)',
borderColor: 'rgb(255,255,255)'
},
credits: {
enabled: false
},
plotOptions: {
series: {
colorByPoint: true,
borderColor: 'rgb(71, 116, 135)',
borderWidth: 1,
dataLabels: {
enabled: true,
style: {
textOutline: 'none',
fontFamily: 'Roboto',
fontWeight: '300',
fontSize: '1rem'
}
}
}
},
tooltip: {
valuePrefix: '£'
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'Indices',
value: 230000,
}, {
name: 'Forex',
value: 120000,
}, {
name: 'Shares',
value: 55000,
}, {
name: 'Pension',
value: 55000,
}, {
name: 'ISA',
value: 20000,
}]
}],
title: {
text: ''
},
legend: {
enabled: false
}
});
body {
background: #000;
}
#treemap {
width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap"></div>
I cannot comment yet, so this is not really and answer. But I found that if you change your borderWidth to 2, then the border becomes visible. To me this indicates that the margin or padding of your element is covering up the border in the top left section of the element for some reason. Hope this can point you in some sort of direction.
It looks like, even though axes (xAxis/yAxis) are not visible in treemap chart, they have impact on it, by covering left and top part of the border. Setting the offset property in both axes with small value (e.g. 1) will move them away from plot area, uncovering missing border parts.
API Reference:
http://api.highcharts.com/highcharts/yAxis.offset
http://api.highcharts.com/highcharts/xAxis.opposite
Example:
http://jsfiddle.net/20oh9c3d/
Related
I wanna know if it's possible to change the color of the chart axis using ChartJS.
Thanks
I know this question was asked over 2 years ago and the OP has already marked a correct answer, but I have a solution to the problem that the OP mentioned in the comments of the marked answer and I'd like to solve it to save other people some time.
But this changes the color of the axis and all the gridLines, what if
I just want to change the axis color? For example, I want the axis
line solid black and the grid lines grey.
If you're trying to achieve this, then the marked answer won't do it for you but the following should:
yAxes: [{
gridLines: {
zeroLineColor: '#ffcc33'
}
}]
you can change the color by scales configuration under chart options:
type: '...',
data: {...},
options: {
scales: {
xAxes: [{gridLines: { color: "#131c2b" }}],
yAxes: [{gridLines: { color: "#131c2b" }}]
}
}
Good question and good answer from #A Friend
His answer works perfectly well with ....... chart.js v2.xx
Here now for version 3.xx for those interested:
(as v3.xx is not backwards compatible with v2.xx)
Using borderColor instead of zeroLineColor to change the color of the chart axis using Chart.js v3.xx:
scales: {
x: { // <-- axis is not array anymore, unlike before in v2.x: '[{'
grid: {
color: 'rgba(255,0,0,0.1)',
borderColor: 'red' // <-- this line is answer to initial question
}
},
y: { // <-- axis is not array anymore, unlike before in v2.x: '[{'
grid: {
color: 'rgba(0,255,0,0.1)',
borderColor: 'green' // <-- this line is answer to initial question
}
}
}
Following a working snippet with complete code:
const labels=["2021-08-01","2021-08-02","2021-08-03","2021-08-04","2021-08-05"];
const data_1=[39,41,42,43,43];
const data_2=[37,38,40,41,39];
const ctx=document.querySelector('canvas').getContext('2d');
const data = {
labels: labels,
datasets: [{
label: 'Data 1',
borderColor: 'grey',
data: data_1
}, {
label: 'Data 2',
borderColor: 'grey',
data: data_2
}]
};
const options = {
scales: {
x: {
grid: {
color: 'rgba(255,0,0,0.1)',
borderColor: 'red'
}
},
y: {
grid: {
color: 'rgba(0,255,0,0.1)',
borderColor: 'green'
}
}
}
};
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- gets you the latest version of Chart.js, now at v3.5.0 -->
<canvas width="320" height="240"></canvas>
In the Charjs.JS to style the scale label and ticks we can use below settings.
options: {
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'X axe name',
fontColor:'#000000',
fontSize:10
},
ticks: {
fontColor: "black",
fontSize: 14
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Y axe name',
fontColor: '#000000',
fontSize:10
},
ticks: {
fontColor: "black",
fontSize: 14
}
}]
}
}
Please refer the link for all the properties. Study all the property before implementation.
Happy coding !
For ChartJs 3 updated in 2022
You can pass the options object when initializing the context. In the sample code I was use x to change the line color on X Axis, you can try y as well.
options: {
scales: {
x: {
grid: {
color: '#777777'
}
}
},
Hello I have a column Chart which displays servers. The X-axis shows how much they are used and the Y-axis counts them. Now I have for every group (with group I mean all Server on acolumn like "0-5%") an array of the server names. I would like to display this array in the right corner when I hover them like here with the value: Link
This is the code I already have the obj are Arrays which count the servers:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Server Disk root used in %'
},
subtitle: {
text: 'All Linux Servers'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Anzahl Server'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
pointFormat: 'Anzahl Server: <b>{point.y}</b>'
},
series: [{
name: 'Server',
data: [
['0-5%', obj2],
['5-10%', obj5],
['10-15%', obj8],
['15-20%', obj11],
['20-25%', obj14],
['25-30%', obj17],
['30-35%', obj20],
['35-40%', obj23],
['40-45%', obj26],
['45-50%', obj29],
['50-55%', obj32],
['55-60%', obj35],
['60-65%', obj38],
['65-70%', obj41],
['70-100%',obj44]
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y}', // one decimal
y: 5,// 5 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
Here is a picture of my Chart:
The Arrays which I want to dsiplay when hover look like that
obj1 = ["server11", "server1125", "server1127"]
For every column there is an array like that this one is the array for the 0-5% column.
You need to use tooltip positioner function and define x,y coordinates where you want to show it.
positioner: function () {
return { x: 500, y: 30 };
}
See the fiddle here
The link you provided itself answers it. Not sure where you are getting stuck? Could you elaborate?
You need to use mouseOver and mouseOut event functions inside plotOptions to define what needs to be show when hovering over the data points.
I am implementing the area chart as shown in the mock up, but have strict at some portion and not able to get option s that are available in http://api.highcharts.com/highcharts for configuring the chart to look as is.
Here is the mock up look.
What I have achieved so far is :
Fiddle Demo
So I could not able to achieve the
1.background color
backgroundColor: {
linearGradient: false,
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
},
2 . Only outer border line. (As shown in the mock up)
3 . On Hover Show All 3 labels. (As shown in the mock up)
4 . Legend like "CPM IMPS SPEND BY TIME" with colors I mean I want to acheive same as in mock up.
Last Point to implement :
Well..
1.background color:
chart: {
backgroundColor: 'black', //for whole plot
name: 'IMPS',
data: [
...
], color: 'rgb(213, 156, 72)' //for one area
2 . Only outer border line. (As shown in the mock up)
yAxis: [{
lineWidth: 1,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
},
gridLineWidth: 0,
minorGridLineWidth: 0
}, {
lineWidth: 1,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
},
gridLineWidth: 0,
minorGridLineWidth: 0,
linkedTo: 0,
opposite: true
}],
3 . On Hover Show All 3 labels. (As shown in the mock up)
tooltip: {
pointFormat: '{series.name} <b>${point.y:,.0f}</b> <br/>', //like in mock up
shared: true, //all series
crosshairs: true //vertical line
},
4 . Legend like "CPM IMPS SPEND BY TIME" with colors I mean I want to acheive same as in mock up.
so I already answered how do it in this question
Last Point to implement :
js:
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
style: {
padding: 0
},
and now you can customize your tooltip like you want:
.highcharts-tooltip>span p {
margin: 0;
}
.highcharts-tooltip>span span{
display: none;
}
#pCPM{background: rgb(87, 188, 0);}
#pIMPS{background: rgb(213, 156, 72);}
#pSPEND{background: rgb(12, 170, 226);}
Highchart's API don't allows you to set current values on axis, but you can disable default labels and put handmade labels with position absolute like I already doing with legend.
Summary FIDDLE
Trying to Style up the Bullet Graph to be exactly as Marketing desires. The desired Graph looks like:
How do you add the labels at the top of the bars?
I've tried to set the labels property from the Kendo Documentation:
labels:
{
visible: true,
format: "{0}",
font: "14px Arial",
},
Here is my script that isn't working:
$barChart = $("#bar-chart").empty();
$barChart.kendoChart({
theme: global.app.chartsTheme,
renderAs: "svg",
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column"
},
series: [
{
type: "verticalBullet",
currentField: "score",
targetField: "average",
target: {
color: "#444",
dashType: "dot",
line: {
width: 1,
}
},
labels:
{
visible: true,
format: "{0}",
font: "14px Arial",
},
data: [
{
score: 93.7,
average: 65.2,
}, {
score: 80.2,
average: 22.2,
}, {
score: 60.8,
average: 35.2,
}, {
score: 82.1,
average: 45.2,
}, {
score: 74.2,
average: 55.2,
}
]
}
],
categoryAxis: {
labels: { rotation: -45 },
categories: ["Sales & Contracting", "Implementation & Training", "Functionality & Upgrades", "Service & Support", "General"],
line: {
visible: false
},
color: "#444",
axisCrossingValue: [0, 0, 100, 100]
},
tooltip: {
visible: false
}
}).data("kendoChart");
Any help would be greatly appreciated.
Because this is not a supported feature, any attempt to do this is by it's nature a hack. I had a look at kendo demo and noticed that there is a tooltip element with class k-tooltip that contains the total for a bar on mouseover. You should take a look into that mouseover to display the totals.
What you're attempting to do is possible. I've created an example on our Try Kendo UI site here: http://trykendoui.telerik.com/#jbristowe/aDIf/7
To recap, bullet charts don't support that type of label you need, and bar charts don't support the visual you need (the special line on the chart).
You could switch back to bar charts and write a custom visual. However, an easier way is to use a plotband on the value axis: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/valueaxis.plotbands
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
If you make a very narrow band, it will work pretty. It won't be dotted as in your reference image, and it will be behind the bar, which might be a problem... To go deeper, you would need a custom visual, and it's going to be involved: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.visual
When I create a stacking bar chart, the rightmost 'box' doesn't have the border drawn on the right hand side.
Is there an option or something that I can set in Highcharts to force the white border line to be drawn around the 75% box in the image seen below?
Here is a link to the jsfiddle I used for testing:
http://jsfiddle.net/zKgsF/
Please note: Setting the borderWidth property to higher than 1 works in displaying, but the rightmost border is much thinner than the others. See the image below.
Here is the javascript for the chart:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: 'rgba(0,0,0,.3)',
margin: [15,6,15,15],
},
xAxis: {
categories: ['']
},
credits: {
enabled: false
},
yAxis: {
gridLineColor: "#FF0000",
labels:
{
align: 'right',
formatter: function()
{
return this.value + "%";
}
},
},
tooltip: {
formatter: function()
{
return "<b>" + this.series.name + '</b>: ' + this.y + ' (' + Math.round(this.percentage,1) + "%)";
}
},
plotOptions: {
bar: {
animation: false,
stacking: 'percent',
borderWidth: '1',
dataLabels: {
enabled: true,
color: 'white',
formatter: function() {
if (this.percentage < 10)
{
return ""
}
else
{
return Math.round(this.percentage,1) + "%";
}
},
style: {
fontSize: '18px'
}
}
}
},
series: [{
data: [30]
},{
data: [10]
}]
});
});
EDIT:
Looks like it's not related to the bar chart being "stackable". It might just be related to the fact that the chart goes to the max 'y' value axis... as seen here in another example: http://jsfiddle.net/zKgsF/1/
As suggested by Cubbuk, you can tweak it with by adding the max value of yAxis.
In addition, you can specify a endOnTick property too.
max: 100.1,
endOnTick: false
For API navigate here and for here is an example.