this is what I'm trying to do...
I have a chart with a line series with markers in it. In the X axis I have dates and in the Y axis a number. So lets say I have in x dates from yesterday to next week. And each day has a corresponding Y axis value.
What I want to do is change the color of the marker that belongs to the actual date.
In other words, to make it clearer, I want to change the color of a single marker in a ExtJS line series. I know of markerConfig but that doesn't seem to help since it applies to all markers.
I haven't found anything like this around so I stopped here to see if you guys could help me.
Thanks in advance!
I think the easiest way to do this is to highlight a single datapoint in a series.
First, define your highlight style.
Ext.create('Ext.chart.Chart', {
...
series: [{
type: 'line',
highlight: {
size: 10,
radius: 10,
fill: 'red'
},
...
});
Then, select the appropriate datapoint in your series and call the highlightItem() method. Here's an example showing how to use the method.
var series = myChart.series.get(0);
series.highlightItem(series.items[2]); // highlight the 3rd data point in the series
The result would look something like this.
Related
In Google Sheets, sparkline charts is known to have an option to change the last column color.
=sparkline((A1:A5),{"charttype","column";"lastcolor","green"})
What if I want to change last two column colors? Any option like this, or any workaround?
=sparkline((A1:A5),{"charttype","column";"lasttwocolor","green"})
alternative with SPARKLINE and some column width magic:
=INDEX({SPARKLINE(A1:INDEX(A:A, MAX(ROW(A:A)*(A:A<>""))-1),
{"charttype", "column"; "lastcolor", "green"; "ymax", LOOKUP(9^9, A:A)}),
SPARKLINE(OFFSET(A:A, MAX(ROW(A:A)*(A:A<>""))-1, ),
{"charttype", "column"; "color", "green"})})
end result visual:
update fix:
=INDEX(LAMBDA(a, {SPARKLINE(A1:INDEX(a, MAX(ROW(a)*(a<>""))-1),
{"charttype", "column"; "lastcolor", "green"; "ymax", MAX(a)}),
SPARKLINE(OFFSET(a, MAX(ROW(a)*(a<>""))-1,),
{"charttype", "column"; "color", "green";
"ymax", MAX(a); "ymin", MIN(a)})})(A:A))
You can't achieve this within one single sparkline, however if you can tolerate an additional column to the right what you could do is to to join two sparklines together horizontally using an array literal with first sparkline containing all data points up to the penultimate one and the second containing just the last data point. Then colour the second sparkline the same as the last data point of the first and resize the column width so the bar width matches the other data points.
Obviously this won't be possible in every context.
while this is possible to get, it is not doable with one single SPARKLINE. but you can use a column chart:
after some customization it could look like your desired output:
then double-click the last two columns and set them as alt color:
Its just basic it the figure that I want. All graphs have a same x axis but different y axis.
I found some type of this in subplots of plotly but they were not exactly as I wanted.
I found another question with answer:
Plotly: How to plot multiple lines with shared x-axis?
But I need it in react.
Thanks!
Use library. One of a powerful library for plotting charts is echarts. Have following link for reviewing examples:
https://echarts.apache.org/examples/en/
I think this Library has the feature you are looking. But please see license before using :-)
https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/Overview/jQuery/Light/
I found a simple react library called Rechart.
The graphs is called Synchronized Line chart. You can meddle around with the UI to get your desired result.
http://recharts.org/en-US/examples/SynchronizedLineChart
This is a good question - it's not readily obvious how to do this with Plotly in React. Although Plotly's docs explain the syntax well for vanillaJS it does require some adapting. I was able to get this working, and following along with this video on YouTube was helpful.
In short, since the <Plot /> component for React accepts a property called 'data' which expects an array, you need to call a function here that returns an array of Plotly Trace objects. The component might look something like this, depending on your options etc:
<Plot
data={createLines()}
layout={{ width: 960, height: 600 //...etc }}
/>
Note: My data formatting may be a bit different than others...I have a multiple lines to plot on the Y axis, with the x-axis all sharing an array of timesteps? Either way, you'll want to pass in the same array of data for your x axis to each line chart trace. I'm handing my component a prop called 'lineData' which looks like this, where each key is the variable name the user has selected, and the value is the array of data points to use on the y Axis:
//props.lineData would log like below, where each key becomes the name of a line
[
{"lineOne": [1, 3, 14, 37 ...]},
{"lineTwo": [14, 87, 12, 9 ...]}
]
Here is my createLines function below...note that I'm using props.timeData on the x axis for each trace:
const createLines = () => {
let traces = [];
props.lineData.map(line => {
Object.entries(line).forEach(([key, value])=>{
traces.push({
name: key,
x: props.timeData,
y: value,
type: 'scatter',
mode: 'lines'
})
})
})
return traces
}
I have got an X axis and it has the months displaying. However for the month of august it is displaying twice...I am not to sure why that is. I would like to remove the duplicated Aug-2020 on the x Axis.
Here is a coding sandbox I created to show what I mean.
I don't know what you're trying to achieve but in your app.js file change maxTicksLimit: 5, to maxTicksLimit: 2, and it will change to single value for Aug.
You have to calculate the chart before plotting.
I'm new to D3, NVD3 and Angular-NVD3. I need to create a chart that looks similar to this, using Angular-NVD3:
SO question: NVD3 Stacked Bar Chart Plus Line Overlapped
(there's a JS Fiddle on the SO question).
Angular-NVD3 has two charts which each accomplish most of what I need, but not all of it:
Those would be the MultiBar and the MultiChart. (http://krispo.github.io/angular-nvd3/#/quickstart)
Examples:
That is, I need a stacked bar chart with a line (or lines) overlaid on top of the bar chart. I believe that to do this, one must use a "multiChart" instead of "multiBar" chart. (Please correct me if I'm wrong).
The SO example above modifies the NVD3 library, which I would like to avoid. After researching, I can see why they chose this approach.
nv.d3.js (version 1.8.2), for the multiChart object, Lines 9068-9069 :
bars1 = nv.models.multiBar().stacked(false).yScale(yScale1),
bars2 = nv.models.multiBar().stacked(false).yScale(yScale2),
If you change these lines to .stacked(true), it does stack the bars.
How can I use Angular-NVD3 and accomplish what I need without changing the library?
Ideally the solution would be pure configuration. The next most ideal situation would be to set the "stacked" value at runtime from inside my enclosing component, but I can't seem to get access to the object.
I would like to avoid a highly intricate solution if possible because the whole point of these abstractions is to avoid such complexities. However, all solutions are welcome.
I found the answer:
you can change the stacked value in the callback() event handler, specified in your config:
chart: {
type: 'multiChart',
...
callback: function (chart) {
chart.bars1.stacked(true);
chart.bars2.stacked(true);
chart.update();
},
...
}
};
Use multiChart. To get the bars side by side set yAxis: 1 on both bar data sets.
https://github.com/novus/nvd3/blob/master/examples/multiChart.html
(the repo examples cover more then the website)
I've got a stacked bar graph that shows two categories of information. Now I have a requirement to show the total of the bars at the end of the bar. I've attached a mock-up showing what I'm trying to do -- the numbers in red are what I'm trying to add.
(source: michaelandlisa.us)
I couldn't find anything in the documentation on how to add totals, or on how to add annotations (which would also work).
Basically, ShieldUI jQuery chart plugin renders the series without text, as shown here.
To alter this behavior, you need to first enable the text.
Then, you can use a format function to either show some cumulative text, or return an empty string. More information on this approach is available here.
This can be coupled with a global counter to determine each Xth iteration.
I managed to get this to work by adding a Scatter chart of total values on top of the existing bar chart.
http://michaelandlisa.us/Images/Forums/stacked_with_totals_scatter.png
I also set the color on the series to "transparent" so the point wouldn't show up, and then I bumped the X and Y by 15 and 12 respectively. I also set the style to Bold, and set the format to "{point.y:n0}". Here's the relevant MVC code (where totals is a List of object):
.DataSeries(series => series.Scatter()
.Data(totals)
.CollectionAlias("Total")
.Color("transparent")
.AddToLegend(false).DataPointText(dtp =>
{
dtp.Enabled(true);
dtp.Format("{point.y:n0}");
dtp.Style(s => s.FontWeight(FontWeight.Bold));
dtp.Color("red");
dtp.X(15);
dtp.Y(12);
}))