I'm using Echarts to create treemap.
I want to change the color of the tree to image.
Like this.
itemStyle: {
color: {
image: require("./french.png"),
},
},
I tried to use itemStyle, but it doesn't work! Is there a better way?
You can always use the graphic component. It let's you add any graphic object to your chart with given coordinates.
Just check the documentation of this component to know how to use it. https://echarts.apache.org/en/option.html#graphic
I managed to add a unique image to each label within series data like this:
{
"value": 23,
"name": "Arizona",
"path": "US/Arizona",
label: {
show: true,
formatter: '{b}',
color: 'rgba(0,0,0,0)',
backgroundColor: {
image: 'image1.jpg',
},
},
},
You can have a look at one of their examples which uses images:
https://echarts.apache.org/examples/en/editor.html?c=wind-barb
{
type: 'image',
style: {
image: api.value(dims.weatherIcon),
x: -weatherIconSize / 2,
y: -weatherIconSize / 2,
width: weatherIconSize,
height: weatherIconSize
},
position: [point[0], 110]
},
Related
I want to create a linechart with HighCharts that has a plotband along every point of the line. Like so: https://imgur.com/a/WVj7uJb
(They are using HighCharts as well, so it must be possible).
However, I can't seem to manage getting it for every point specific. Whenever I add plotbands, it just draws a band using the highest and lowest point like so: https://imgur.com/a/PZdKIBz
How I currently render the chart (note the plotbands part):
Highcharts.chart('chart', {
chart: {
type: 'line',
},
title: {
text: `${this.variable}`,
},
credits: {
enabled: false,
},
xAxis: {
type: 'category',
title: {
text: "Date"
},
},
yAxis: {
title: {
text: this.unit
},
plotBands: [
{
color: "orange",
from: 12,
to: 14
},
{
color: "orange",
from: 10,
to: 13
} // and so on.
]
},
tooltip: {
headerFormat: `<div>Date: {point.key}</div>`,
pointFormat: `<div>${this.unit}: {point.y}</div>`,
useHTML: true,
},
series: seriesList,
} as any);
So exact example would render a plotband from 10 to 14 along the whole linechart, instead of to different points: one from 12 to 14, and one from 10 to 13.
Any ideas as to how I can accomplish this? I have seen something with 'path', but I can't find anything about it.
Thanks in advance.
In that case, you should use arearange series instead of plotBand.
Demo:
https://www.highcharts.com/demo/arearange-line
API Reference:
https://api.highcharts.com/highcharts/series.arearange
I was looking at this codebase https://jsfiddle.net/mushigh/zvq46kg8/ which gave me insight on how to develop a scrollbar. When attemptng to do it myself though it doesnt work correctly.
The fiddle shows the following set up for the chart:
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
},
plotOptions: {
column: {
stacking: 'normal'
},
},
xAxis: {
type: 'category',
min: 0,
max: 5
},
scrollbar: {
enabled: true
},
series: [{
type: 'pie',
name: 'Total consumption',
zIndex: 9,
data: [{
name: 'Jane',
y: 13,
color: Highcharts.getOptions().colors[0] // Jane's color
}, {
name: 'John',
y: 23,
color: Highcharts.getOptions().colors[1] // John's color
}, {
name: 'Joe',
y: 19,
color: Highcharts.getOptions().colors[2] // Joe's color
}],
center: [300, 10],
size: 50,
showInLegend: false,
dataLabels: {
enabled: false
}
}, {
name: "A",
data: test(20)
}, {
name: "B",
data: test(20)
},
{
name: "C",
data: test(20)
},
{
name: "D",
data: test(20)
}
]
});
I was trying to implement this with angular-highcharts through and while it looks like everything works, the horizontal bars are not hidden when outside of the view port.
It looks like this though:
You can see there are some bars which show when they should not. (This is in comparison to the above jsfiddle).
I created a repo in order to create reproducibility. You should just need to npm intall and then ng serve. The repo is located at: https://github.com/fallenreaper/highchart-angular-scrolling.git
Everything should be in place and you should be able to serve the app, go to localhost and see the issue. I didnt update it YET but i can revert the dataset to the one given in the jsfiddle as well.
Is this a glitch with Angular HighCharts, or is here something else going on?
Here is my reproduction of the demo which you have shared in the Angular environment.
Demo: https://codesandbox.io/s/angular-ldxch
Please notice that this example uses the Highstock, not Highcharts - scrollbar is not implemented in Highcharts.
Highcharts use the scrollablePlotArea instead: https://api.highcharts.com/highcharts/chart.scrollablePlotArea
I have a chart which has part line and part area stacked. In the first part (area) I want to add an inline legend as it is shown in this example (ie where it says Asia)
https://www.highcharts.com/demo/area-stacked-percent
These are the example options but I do not see how to specify that or if this is the default way to show legends in this plot
In my example, I cannot put the legends inside the area part. Tried to add title in yAxis. I also tried to add an annotation but it did not work:
https://jsfiddle.net/hkpna40r/1/
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 4
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: Date.UTC(2019, 11, 2),
y: 3
},
zIndex:100,
text: 'Arbois'
}],
}],
You can achieve what you want by attaching a module called series-label and set plotOptions.area.label like that:
plotOptions: {
area: {
label: {
enabled: true,
onArea: false
}
},
line: {
label: {
enabled: false
}
}
}
Note, annotations also work but you have to attach annotations module separately.
Demo:
https://jsfiddle.net/BlackLabel/5utLhenb/
API reference:
https://api.highcharts.com/highcharts/plotOptions.area.label
https://www.highcharts.com/docs/advanced-chart-features/annotations-module
I have been using HighCharts extensively for one of my project. Recently I started using Annotation.js along with it.
ALthough, the library works well but I can't configure its usage at all. The link here provides options but they are not working for me
My issues:
I have multiple charts on a page. As soon as I use annotation.js , each of them shows annotation. how do I show them on desired charts. I tried
annotations :[{ enabledButtons : false}]
and
annotationOptions :{ enabledButtons : false}
Both of them had no affect.
2.I want to display the pallette (containing icons like square, circle etc..) at top-right.
I used xValue, yValue attribute,
I used x, y attribute,
I used 'anchorX and anchorY` attribute.
None of the above works for me.
I want just to show the text icon. How can I hide other icons (line, square and circle). Didn't get any way to try for this one.
Am I missing something here. Kindly suggest. My basic way of using chart config is as below:
chart: {
type: chartData.Type.toLowerCase()
//annotations: [],
},
annotationsOptions: {
xValue: 234,
yValue:12
},
title: {
text: chartData.xTitle ? chartData.xTitle : ""
},
xAxis: {
categories: chartData.Categories
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: chartData.yTitle ? chartData.yTitle : ""
},
plotLines: [{
value: 0,
width: 1,
color: "#808080"
}]
},
annotations: [{
xValue: 40,
yValue: 15
}],
plotOptions: {
line: {
marker: {
enabled: true
}
}
},
series: chartData['Series'][opt] ? chartData['Series'][opt] : chartData['Series'][opt.replace(/-|\s/g, "")],
}
I have tried annotations inside charts object as well.
You should be able to hide annotations buttons using:
annotationsOptions: {
enabledButtons: false
},
You can use annotationsOptions.buttons for changing the buttons you would like to display. Here you can see the code that will show only text butotn:
annotationsOptions: {
buttons: [{
annotationEvents: {
step: function() {}, // to be called during mouse drag for new annotation
stop: function(e) {
var ann = this,
chart = ann.chart,
index = chart.annotationInputIndex = chart.annotationInputIndex ? chart.annotationInputIndex : 1,
input = document.createElement('span'),
button;
input.innerHTML = '<input type="text" class="annotation-' + index + '" placeholder="Add text"><button class=""> Done </button>';
input.style.position = 'absolute';
input.style.left = e.pageX + 'px';
input.style.top = e.pageY + 'px';
document.body.appendChild(input);
input.querySelectorAll('input')[0].focus();
button = input.querySelectorAll('button')[0];
button.onclick = function() {
var parent = this.parentNode;
ann.update({
title: {
text: parent.querySelectorAll('input')[0].value
}
});
parent.parentNode.removeChild(parent);
};
chart.annotationInputIndex++;
} // to be called after mouse up / release
},
annotation: { // standard annotation options, used for new annotation
anchorX: 'left',
anchorY: 'top',
xAxis: 0,
yAxis: 0,
shape: {
// type: 'text'
}
},
symbol: { // button symbol options
shape: 'text', // shape, taken from Highcharts.symbols
size: 12,
style: {
'stroke-width': 2,
'stroke': 'black',
fill: 'red',
zIndex: 121
}
},
style: { // buton style itself
fill: 'black',
stroke: 'blue',
strokeWidth: 2,
},
size: 12, // buton size
states: { // states for button
selected: {
fill: '#9BD'
},
hover: {
fill: '#9BD'
}
}
}]
}
Here you can find an example how it may work: http://jsfiddle.net/7m3Mr/261/
You can move your buttons using:
annotationsOptions: {
buttonsOffsets: [0, -50],
},
Here you can find demo showing how it may work:
http://jsfiddle.net/7m3Mr/263/
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