I am using echarts with Vuejs. Behavior of chart is hover line. Line will be highlight and all point will be show like this.
default
when mouse hover
I try to use option emphasis of series of type line. But it make only highlight line. not work for item style. like this
I want to default the all point not show. and all point will be show when emphasis active. But document of echarts not mention of this issue. Here is my config:
itemStyle: {
color: '#fff',
borderColor: color,
borderWidth: 3,
opacity: 0,
},
lineStyle: {
width: 2,
color,
},
emphasis: {
focus: 'series',
lineStyle: {
width: 3,
},
itemStyle: {
shadowBlur: 9,
shadowColor: color,
opacity: 1,
},
},
With any idea, please give me advice. Thanks so much
Related
I have a combined BarLineChart. Is there a possibility to add a label near the line (in this case how much the sales increased from 2015 to 2016) ?
I hope there is some way
This is what i have so far
I want this
Thanks
The easiest way to do this is to use the chartjs-plugin-annotation plugin provided by the same team that provides chart.js.
You can use the plugin to draw arbitrary lines or boxes on your chart that can also contain a label. Unfortunately, the plugin does not yet support point annotations, so you have to use a little hack to enable the label to display but not the line or box.
Here is an example chart that uses the plugin to draw a horizontal white line at a specific Y value (white is used so that it blends in with the chart background and becomes invisible). The line is configured to also have a label. The end result is a text annotation on the chart with no visible line.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan 21st', 'Feb 21st'],
datasets: [{
type: 'line',
label: 'B',
data: [10, 25],
fill: false,
borderWidth: 3,
borderColor: chartColors.orange,
lineTension: 0,
}, {
type: 'bar',
label: 'A',
backgroundColor: chartColors.blue,
data: [10, 25],
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
min: 'Jan 21st',
max: 'Apr 21st',
}
}],
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 18,
borderColor: 'white',
borderWidth: 0,
label: {
xAdjust: -50,
fontSize: 16,
fontColor: 'black',
backgroundColor: 'white',
content: "+20%",
enabled: true
}
}],
drawTime: 'beforeDatasetsDraw'
}
}
});
You can see it in action at this codepen.
One final note, if you include the plugin in your app and you also use charts that don't use scales (e.g. pie/doughnut) then you will get an error. This is a known issue and has been logged here.
The workaround is to add this to your pie/doughnut chart config (or it might be easier to add it to the pie/doughnut global default config).
scales:{
yAxes: [],
xAxes: []
},
I am trying to achieve something like shown in the picture.
my code is below, in that for "90", and "130", and "110" i want to give separate colors,is there any way (fixed)
The Visual of the expected output
series: [{
name: 'Historic <br/> $850,000' ,
title: 'Historic',
data: [90, 130,110],
pointWidth: 60,
color: '#0066FF'
}]
thanks in advance!
You can initialize each point as an object instead of just a value, and then supply a color attribute. For example (JSFiddle):
series: [{
data: [{ y: 7.0, color: 'orange' }, { y: 6.9, color: 'green' }, { y: 9.5, color: 'blue' }]
}]
Or you can set the series to colorByPoint and use the colors array, for example (JSFiddle):
colors: ['orange', 'green', 'blue'],
series: [{
colorByPoint: true,
data: [7.0, 6.9, 9.5]
}]
AS shown in image, i want to change Fill color by point (referring project state in my case so),
visual for my chart
code i have used so far to achieve this is below,
$(function () {
$('#ao-projectssummry-chart').highcharts({
type: "spline",
title: null,
borderRadius : null,
xAxis: {
categories: ['May2016', 'June2016', 'July2016', 'August2016', 'september2016', 'November2016'],
opposite: true
//type: 'datetime',
//min: Date.UTC(2011, 4, 31),
//max: Date.UTC(2012, 11, 6)
},
yAxis: {
min: 0,
max: 5,
title : null
},
plotOptions: {
series: {
lineWidth: 20,
borderRadius: null,
radius: 0
},
marker: {
radius : 0
}
},
credits : {
enabled : false
},
legend: {
enabled : false
},
series: [{
name: "Project 1",
data: [1, 1, {
y: 1,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
overlapping: true
}
}, {
y: 1,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}, {
y: 1,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}
]
},
{
name: "Project 2",
data: [2, {
y: 2,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
overlapping : true
}
}, 2, 2, 2, {
y:2,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
overlapping: true
}
},
]
}]
});
});
so, how can i change the plotoption color by point? also how can i achieve background lines shown in the picture?
Any help would be appreciated! thanks in advance.
Ok, so it seems the question is different than what I read it as the first time. Rather than changing the color of the point markers, you want to change the color of the segments between markers.
Here is an approach that achieves what you are asking for, using the columnrange series type instead of a line. This allows more flexibility and control.
The idea:
First, set the type, and invert the chart (columnrange is a vertical series type; to make it horizontal, invert the chart - the x axis is now the vertical axis, and the y axis is now the horizontal axis):
chart: {
type: "columnrange",
inverted: true
}
Update the axis settings accordingly (swap x for y).
Set your data with an x value, a low value (starting point), and a high value (end point).
Set the color to whatever you want:
data: [{
x: 1,
low: Date.UTC(2016,3,15),
high: Date.UTC(2016,4,21),
color: 'rgb(0,156,255)'
},{
x: 3,
low: Date.UTC(2016,2,7),
high: Date.UTC(2016,6,15),
color: "rgb(204,0,0)"
}]
To place the markers, add a separate series, either line or scatter (I use line, with a lineWidth: 0, because scatter series use a different tooltip model, and are not as easy to integrate with other series, if the tooltip is important to you. But otherwise, both work the same).
Marker series:
{
name: 'Markers',
type: 'line',
data: [
{
x: 1,
y: Date.UTC(2016,2,15),
marker: {
fillColor:"#9CCB00"
}
}
Example:
https://jsfiddle.net/jlbriggs/x7c3t81n/
Output:
You need to specify that in the data array directly:
Example code:
data: [5,4,3,2,5,6,7,9, {y:6, marker: { enabled: true, radius: 10, fillColor: 'red'}},3,2,5,6,7]
Anything that you can specify in the plotOptions that affects the data point, you can specify in this way for a specific data point.
Any point for which you don't specify anything, follows the default options, or the options specified in the plotOptions.
Fiddle:
http://jsfiddle.net/jlbriggs/3d3fuhbb/126/
Output:
I'm trying to create a black chart with Google Charts, but I can't seem to change the text color of the axis. I tried some code pieces I found on the web, like:
hAxis: {
color: '#FFF'
}
But it just doesn't work. I've managed to change the title and legend color, but not the axis text. I'm trying to set the axis text color to white, to contrast with the backgroud:
google.load("visualization", "1", { packages: ["corechart"] });
setTimeout(function() {
var options = {
title: 'Test Chart',
backgroundColor: '#000',
legendTextStyle: { color: '#FFF' },
titleTextStyle: { color: '#FFF' },
hAxis: {
color: '#FFF',
}
};
var chart = new google.visualization.LineChart(document.querySelector(".chart"));
chart.draw(google.visualization.arrayToDataTable(
[
["Year", "T1", "T2", "T3"],
[0, 10, 20, 30],
[1, 10, 20, 30],
[2, 10, 20, 30],
[3, 10, 20, 30],
[4, 10, 20, 30]
]
), options);
}, 100);
.chart {
width: 100%;
height: 200px;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div class="chart"></div>
Correct usage for hAxis is using the textStyle options, in which you want the color:
hAxis: {
textStyle:{color: '#FFF'}
}
I would also recommend using google.setOnLoadCallback(drawChart); function for rendering the chart instead of timeout, at least for me 100 milliseconds was not enough
I manage to change all the chart texts with one CSS.
I think this way is more confortable than configure every chart text type (title, legend, vAxis, hAxis, others).
Maybe it will be usefull for someone.
Some code (Remember to change "#chart_div" for your chart id):
#chart_div text {
fill: red !important;
}
I'm looking to make this line graph more readable by making one series annotation on top and the other series on the bottom. currently if they are close they are on the same line you can't hover over the other and can't read it. Does anybody know a way to do this?
would post image but site will not allow it so only posting whats important
var options = {
title:'Availibility comparison '+labela+' and '+labelb,
width: 1150,
height: 600,
backgroundColor:'white',
annotation: {style: 'line'},
vAxis: {
minValue: 99.94,
gridlines: {count: 20}
},
series: {
0: {
color: 'blue',
pointSize: 2
},
1: {
color: 'purple',
pointSize: 2
}
},
chartArea: {
width: 950
},
annotation: {
1: {
style: 'none'
}
}
};