I want to remove the highlighted text from my graph, how can i do this in Echarts.enter image description here
Set the option.radiusAxis.axisLine to null, here is an example:
option = {
angleAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
radiusAxis: {
axisLine: null
},
polar: {},
series: [
{
type: 'bar',
data: [1, 2, 3, 4, 3, 5, 1],
coordinateSystem: 'polar',
name: 'A',
stack: 'a',
showSymbol: false,
emphasis: {
focus: 'series'
}
},
{
type: 'bar',
data: [2, 4, 6, 1, 3, 2, 1],
coordinateSystem: 'polar',
name: 'B',
stack: 'a',
showSymbol: false,
emphasis: {
focus: 'series'
}
},
{
type: 'bar',
data: [1, 2, 3, 4, 1, 2, 5],
coordinateSystem: 'polar',
name: 'C',
stack: 'a',
showSymbol: false,
emphasis: {
focus: 'series'
}
}
],
legend: {
show: true,
data: ['A', 'B', 'C']
}
};
Related
I'd like to show bar chart with categories on x-axis (say months), multiple series and each bar element containing multiple data points (value shown on y-axis, the rest in tooltip).
It's relatively easy to do it using series.data:
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Series A',
type: 'bar',
label: {
show: true
},
data: [
['Jul', 320, 2],
['June', 119, 4]],
encode: {
tooltip: [0,1,2]
}
}
,
{
name: 'Series B',
type: 'bar',
label: {
show: true
},
data: [
['Jul', 420, 3],
['June', 123, 5]],
encode: {
tooltip: [0,1,2]
}
}
]
};
I'm wondering how it can be refactored best to use dataset? I have two ideas, I wonder what are pros & cons.. Maybe there is other, cleaner way to express it.
Ideally instead of one big array I'd prefer to have array of objects so dimensions are named.
Solution: One dataset, shifting indices
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category'
//, data: ['Jul', 'June']
},
yAxis: {
type: 'value'
},
dataset: {
source: [
['Jul', 320, 2, 420, 3],
['June', 119, 4, 123, 5]]
},
series: [
{
name: 'Series A',
type: 'bar',
label: {
show: true
},
encode: {
y: 1,
tooltip: [0,1,2]
}
}
,
{
name: 'Series B',
type: 'bar',
label: {
show: true
},
encode: {
y: 3,
tooltip: [0,3,4]
}
}
]
};
With named dimensions it would look like:
dataset: {
source: [
[month:'Jul', SeriesA_dim1: 320, SeriesA_dim2: 2, SeriesB_dim1: 420, SeriesB_dim2: 3],
[month:'Jun', SeriesA_dim1: 119, SeriesA_dim2: 4, SeriesB_dim1: 123 SeriesB_dim2: 5],
},
....
encode: {
y: 'SeriesB_dim1',
tooltip: ['month','SeriesB_dim1','SeriesB_dim2']
}
Solution 2: Multiple datasets
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {},
xAxis: {
type: 'category'
},
yAxis: {
type: 'value'
},
dataset: [{
source: [
['Jul', 320, 2],
['June', 119, 4]]
},
{
source: [
['Jul', 420, 3],
['June', 123, 5]]
}],
series: [
{
name: 'Series A',
type: 'bar',
label: {
show: true
},
// data: [
// ['Jul', 320, 2],
// ['June', 119, 4]],
encode: {
tooltip: [0,1,2]
}
}
,
{
name: 'Series B',
type: 'bar',
label: {
show: true
},
// data: [
// ['Jul', 420, 3],
// ['June', 123, 5]],
datasetIndex: 1,
encode: {
tooltip: [0,1,2]
}
}
]
};
With named dimensions it would look like:
dataset: [{
source: [
[month:'Jul', dim1: 320, dim2: 2],
[month:'June', dim1: 119, dim2: 4]]
},
{
source: [
[month:'Jul', dim1: 420, dim2: 3],
[month:'June', dim1: 123, dim2: 5]]
}],
....
encode: {
y: 'dim1', // the default would be likely working as well
tooltip: ['month','dim1','dim2']
}
I am trying to add a visual map according to the y axis in echarts.
Taking one of their example:
https://echarts.apache.org/examples/en/editor.html?c=area-pieces
The results looks as follow:
what I'm trying to achieve is:
Obviously here, I have just rotated the picture by 90 degree.
How can this be achieve in echarts directly (so not by saving the picture first)?
The simplest solution would be inverting the axis, data index, and visual map axis. See chart options below:
option = {
backgroundColor: '#fff',
xAxis: {
type: 'value',
boundaryGap: [0, '30%'],
position: 'top'
},
yAxis: {
type: 'category',
boundaryGap: false
},
visualMap: {
type: 'piecewise',
show: false,
dimension: 1,
seriesIndex: 0,
pieces: [{
gt: 1,
lt: 3,
color: 'rgba(0, 180, 0, 0.5)'
}, {
gt: 5,
lt: 7,
color: 'rgba(0, 180, 0, 0.5)'
}]
},
series: [
{
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: 'green',
width: 5
},
markLine: {
symbol: ['none', 'none'],
label: {show: false},
data: [
{yAxis: 1},
{yAxis: 3},
{yAxis: 5},
{yAxis: 7}
]
},
areaStyle: {},
data: [
[200, '2019-10-10'],
[400, '2019-10-11'],
[650, '2019-10-12'],
[500, '2019-10-13'],
[250, '2019-10-14'],
[300, '2019-10-15'],
[450, '2019-10-16'],
[300, '2019-10-17'],
[100, '2019-10-18']
]
}
]
};
Result:
See on Imgur
I have read some other answers here and accordingly added the role property but it did not work.
<Chart
width={'500px'}
height={'300px'}
chartType="Timeline"
loader={<div>Loading Chart</div>}
data={[
[
{ type: 'string', id: 'President' },
{ type: 'date', id: 'Start' },
{ type: 'date', id: 'End' },
{type: 'string', role: 'style'}
],
['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4), 'gold'],
['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4), 'color: #ccc'],
['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4), 'gold'],
]}
options={{
showRowNumber: true,
}}
rootProps={{ 'data-testid': '1' }}
/>
refer: https://react-google-charts.com/timeline-chart
on the timeline chart, the style role will only work when used as the third column.
so you will also need to add the second column for bar label.
but you can use null values for that column, if needed...
<Chart
width={'500px'}
height={'300px'}
chartType="Timeline"
loader={<div>Loading Chart</div>}
data={[
[
{ type: 'string', id: 'President' },
{ type: 'string', id: 'Bar' }, // <-- add bar label here...
{ type: 'string', role: 'style' }, // <-- add style role here...
{ type: 'date', id: 'Start' },
{ type: 'date', id: 'End' }
],
['Washington', null, 'gold', new Date(1789, 3, 30), new Date(1797, 2, 4)],
['Adams', null, '#ccc', new Date(1797, 2, 4), new Date(1801, 2, 4)],
['Jefferson', null, 'gold', new Date(1801, 2, 4), new Date(1809, 2, 4)],
]}
options={{
showRowNumber: true,
}}
rootProps={{ 'data-testid': '1' }}
/>
I got it! I sorted the bars according the role attribute.
I used the role property in data structure.
const data = [ [ { type: "string", id: "Phases" },{ type: "string", id: "Name" }, { type: 'string', role: 'style' }, { type: "date", id: "Start" }, { type: "date", id: "End" } ]];
<Chart chartType="Timeline" data={[...data, ...firstArray, ...secondArray]} width="100%" height={setChartHeight((firstArray.length+secondArray))} options={{ timeline: { } }} />
enter image description here
This is my second answer on Stackoverflow. I still don't understand how to indent the code in the answer.
I have a bar chart with a title on top. How can I go about changing the legend’s position to right of the chart. I searched on other forums but couldn’t find anything. Here is my code:
let ctx = document.getElementById('canvas');
let chart = new Chart(ctx, {
type: 'bar',
data: {
labels: [1, 2, 3, 4, 5],
datasets: [{
label: 'Votes',
data: [1, 2, 3, 4, 5],
backgroundColor: 'rgba(255, 0, 0, 0.2)'
}, {
label: 'Score',
data: [1, 2, 3, 4, 5],
backgroundColor: 'rgba(0, 255, 0, 0.2)'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
You could set legend's position property to right in your chart options, to place the legend at the right side of the chart ...
options: {
legend: {
position: 'right'
},
...
}
ᴅᴇᴍᴏ
let ctx = document.getElementById('canvas').getContext('2d');
let chart = new Chart(ctx, {
type: 'bar',
data: {
labels: [1, 2, 3, 4, 5],
datasets: [{
label: 'Votes',
data: [1, 2, 3, 4, 5],
backgroundColor: 'rgba(255, 0, 0, 0.2)'
}, {
label: 'Score',
data: [1, 2, 3, 4, 5],
backgroundColor: 'rgba(0, 255, 0, 0.2)'
}]
},
options: {
legend: {
position: 'right'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>
I am using Highcharts for generating a two column bar graph. Means for each day I am showing the number of downloads and number of signups. Now I need to have a drilldown, which shows up the hourly data. The Highcharts docs is showing an example for Signle column by specifying the y value. But as I am showing stached bar, I have two y values for the same date. The code I am using is as follows :
series: [{
name : 'Signups,
color : '#0066FF',
data : <?=$series_1?>, //data in JSON format from PHP
drilldown: true
}, {
name : 'Downloads',
color : '#E81531',
data : <?=$series_2?>, //data in JSON format from PHP
drilldown: true
}],
Example for you for drilldown with two series, with stacking: 'normal': http://jsfiddle.net/6zYmJ/10/
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}, {
name: 'Things2',
colorByPoint: true,
data: [{
name: 'Animals2',
y: 5,
drilldown: 'animals2'
}, {
name: 'Fruits2',
y: 2,
drilldown: 'fruits2'
}, {
name: 'Cars2',
y: 4,
drilldown: 'cars2'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
},{
id: 'animals2',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits2',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars2',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
})
Adding to Pawel Response-
Just replace in plotOptions with this value
column: {
pointPadding: 0.2,
borderWidth: 0
}
,