well i have a application when this use a dynamic tooltip, this have to change the design depending of the values on the graph, but add inner html into the content of the tooltip is being very hard to refactor because i have a lot of design for the tooltip into many conditions and variables
i tried importing a component but the content function expect only a string with the html
so i wondering if is possible to add jsx syntax or add a react component to render the html of tooltip into the content of c3
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area',
data2: 'area-spline'
}
},
axis: {
y: {
padding: {bottom: 0},
min: 0
},
x: {
padding: {left: 0},
min: 0,
show: false
}
},
tooltip: {
contents: function () {
// call a function that return a react component
}
}
You can use ReactDomServer.renderToString to render this https://www.npmjs.com/package/react-dom#react-domserver
However i am not sure if this a good solution, it was not designed for this purpose. (if you check console, you can see there still is an error).
Here is working fiddle of using React component in c3js tooltip.
http://jsfiddle.net/uqh2679x/
But still you can achieve same thing using template literal:
Working fiddle: http://jsfiddle.net/z7evqpnL/
tooltip: {
contents: (data) => `
<div class="tooltip">
<div class="title">${customText}</div>
<div>Data1: ${data[0].value}</div>
<div>Data2: ${data[1].value}</div>
</div>`
}
}
When you use `` you can put variables inside the string like above ${variable}. Also you can break this string into multiple lines so it is more readable (it will also preserve all line breaks if you i.e. log it)
Related
Is it possible to make echarts line chart with 1 line painted in different colors? For example if value <= 0 the color is red, if > 0 the color is green?
Echarts has an option called visualMap that does exactly what you are looking for.
visualMap doc
visualMap code example (I selected the example that fits best, but there are others)
In your case you'll have something like that :
visualMap: {
show: false, // Wether to show the legend or not (default: true)
pieces: [
{
min: -9999, // Normally not needed but doesn't work without that (1)
max: 0,
color: '#F35E07' // Red
},
{
min: 0,
color: '#93CE07' // Green
},
],
outOfRange: {
color: '#F35E07'
}
},
It'll split your line in 2 pieces :
below 0 (written max: 0) : red
above 0 (written min: 0) : green
In addition, the visualMap option has more to offer : you can have more than 2 pieces (like in this example), have a smooth gradient instead of pieces (using type: 'continuous' like in this example), and many other things that are explained in its doc.
(1) Note about the bug: Normally if you don't specify min or max,
it's set to -Infinity or Infinity. But here you have to specify
min AND max in one of the two pieces (I don't know why).
If you consider plotting two charts and ignoring some of its points with '-', you can achieve the same visual result of a multicolored line chart.
Although the documentation does not provide an immediate example of how to color specific segments of a line chart, it actually instructs about how you can use empty data,
While there are empty elements, the lines chart will ignore that point without passing through it----empty elements will not be connected by the points next. In ECharts, we use '-' to represent null data, It is applicable for data in other series.
With that in mind, by overlaying two equal charts and emptying some points, you can actually construct the logic of a multicolored chart. Notice that it is better if you can do it programmatically so that you can vary the number of line segments to be colored.
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {},
yAxis: {},
series: [
{
data: [
[-20, -20],
[-10, 30],
[0, 40],
['-', '-'],
['-', '-']
],
type: 'line',
lineStyle: {
color: "red"
}
},
{
data: [
['-', '-'],
['-', '-'],
[0, 40],
[10, 100],
[20, 60]
],
type: 'line',
lineStyle: {
color: "green"
}
}
]
};
option && myChart.setOption(option);
.as-console-wrapper { max-heght: 100% !important }
<script src="https://cdn.jsdelivr.net/npm/echarts#5.3.2/dist/echarts.js"></script>
<body>
<div id="main" style="width: 225px;height:225px;"></div>
</body>
I'm getting some troubles to set icons on my series over,infront,top,bot (anywhere) it.
I'm using an API (agromonitoring.com) to get the Data with XHTML request parsing it to JSON then showing using Highcharts, the main problem is that most of the examples to add Icons or Images are using xAxis Categorized, but in my case I'm using an xAxis "date-time" which is always changing that's why I can't use this example (https://www.highcharts.com/demo/spline-symbols) of course I tried,but it doesn't work.
So Here it's the Example of Highcharts
https://codepen.io/pen/?editors=0010
and this is my example(both sites same)
https://playcode.io/447786 (love PlayCode couse integrates console)
https://jsfiddle.net/Miguel5tuxD/afgrzLv7/
I'm trying to useiconUrl getting from that Switch to then parse around 40 icons to the Highchart
Expecting something like the example but with all points an Icon
The problem is that you don't set icons URL for point markers anywhere. So the solution is to pass points array like that (spline series):
[{
x: x,
y: y,
marker: {
symbol: url
}
}, ...]
In your example:
{
name: 'Temperatura',
type: 'spline',
data: datos3.map((item, index) => {
return {
x: item[0],
y: item[1],
marker: {
symbol: datos[index],
width: 20,
height: 20
}
}
}),
tooltip: {
valueSuffix: ' °C',
valueDecimals: 2,
},
marker: {
enabled: true
},
color: Highcharts.getOptions().colors[2],
}
Demo:
https://jsfiddle.net/BlackLabel/c81qz5vr/
I'm trying to create a chart that looks like this using ChartJS, D3.js, NVD3 or c3.js but I'm having trouble. Is this even possible with any of these libraries?
You can use C3.js bar charts and hide some of the x-axis but that may require extra JS to do so unless you make the x axis label ' '. If you want all the bars the same colour you'll need to use CSS (unless you declare a pattern). It will not be generated to look identical to that in C3.js without extra manipulation of the code.
You can edit data around on https://c3js.org/samples/chart_bar.html to see how your data would look if you would like to.
You can add
color: {
pattern: ['#0e9999','#06754b','#eb7a02','#9734b0']
},
To your generation of the chart with whatever pattern of colours you would like (you can have as many or as few colours as you would like. I just happened to need 4 for my code)
In your case you can do
color: {
pattern: ['#FFA500']
},
In data you can declare an 'x' to have your supplied x labels
data: {
x: 'x',
columns: [your data goes here including x labels],
type: 'bar'
}
I'm not sure about the other libraries but C3.js is essentially a wrapper for D3.js so anything that can be done in one is most likely theoretically possible in both. C3.js is just easier to understand the code for. (see: https://c3js.org/)
Update:
If this wasn't clear enough you can do:
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '1',' .','3','. ','. ','6'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
},
axis: {
x: {
type: 'category',
}},
color: {
pattern: ['#FFA500']
},
bar: {
space: 0.05, //sets the gap between the bars
width: {ratio:1}
},
grid: { //the lines (remove if you didn't want grid lines)
y: {
show: true
},
x: {
show: true
}
},
legend: { //hides the legends
show: false
}
});
To do something similar to what you have (you'll need to edit the data to be the exact data you want but that'll be a simple edit on your part)
If you don't want dashed grid lines add:
.c3 .c3-grid line {
stroke-dasharray: 0!important;
stroke: #808080 !important;
}
to your CSS file
I use recharts with React. I think it's the best charting library out there.
I am creating a bar chart using dojocharts and version is 1.9 .Here i add a Indicator to a bar chart. I want the add text with html tag(like break tag) and also tooltip on the Indicator. I have added a labelFunc to return the HTML I want, but it only shows as plain text. here html tag and tooltip for that indicators not working.Any one suggest me is it possible for add tooltip and html tag on indicator of dojocharts.
Below is my code
Chart.addPlot("indicator", { type: "Indicator",
vertical:false,
values:30,
offset: { y: -2, x: -50 },
lineStroke: { color: "green",style: "line" },
labels: true,
htmlLabels: true,
// start:true,
// labelStyle:"inside",
//maxBarSize: 35,
fontColor:"red",
// precision: 1,
labelFunc: max,
stroke: {color:"rgb(204, 204, 204)",height:40,width: 25},
outline: "purple",
fill: "#666"
});
Use the Tooltip plugin.
For an example see this tutorial https://dojotoolkit.org/documentation/tutorials/1.7/charting/
The plugin is called dojox.charting.action2d.Tooltip and it is described here https://dojotoolkit.org/api/?qs=1.7/dojox/charting/action2d/Tooltip
I have tested the HighCharts heatmap (heatmap.js) charts. They work fine for me, but there is one situation where I would like to set the cell colors myself, individually - i.e. NOT using the colorAxis settings.
Is there an easy way to do that without messing with the colorAxis stops ? E.G. by setting the color directly in the data series ?
Arguably this defeats the idea of a real "heatmap" but would be the shortest route for me to address a specific requirement (instead of building a HTML table with colored cells).
"
Note finally this is not the same question as "how do you change the color of cells in highcharts heatmap?"
Yes, you can always set color directly in the point config, see: http://jsfiddle.net/c2WgP/
$('#container').highcharts({
chart: {
type: 'heatmap',
inverted: true
},
colorAxis: {
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a']
],
min: -5
},
series: [{
data: [
[0, 0, -0.3],
[0, 1, 0.6],
[0, 2, 1.8], {
x: 0,
y: 3,
z: 0.5,
color: 'green'
}]
}]
});
Just an FYI, the above code works, but the linked fiddle is broken because of something in that linked version of Highcharts. If you make the small tweak of using the latest Highcharts.js, it worked for me:
Simply replace:
<script src="http://code.highcharts.com/3.0.10/highcharts.js"></script>
with
<script src="http://code.highcharts.com/highcharts.js"></script>
Seen here: http://jsfiddle.net/joelhnatow/bnL77dr8/