Colorize each data point in a series when using connectors

[redherring917]

How does one specify a color for each data point in a series when using data connectors? I've seen examples of how to do it when defining the chart as a "series" but not when using a connector to pull the data.

Thanks!

[pawelys]

Hello redherring917, Could you share a basic demo where you want the points colored? This would help us craft a suitable solution for your needs.

[redherring917]

Hi there, and thanks for your reply. Apologies but I feel that I misspoke in describing what I was looking for.

What I'm interested in is specifying a unique color for each column in a column chart, or each bar in a bar chart, or each line in a line chart, etc. So just something like this: https://jsfiddle.net/DwW3m/ (except that I might want each column to be a different color instead of using a "rotation" of just 3 colors).

As I mentioned in my original post, I've seen examples like the one above when data for the chart is defined in a "series" but I think my issue is that I'm using a connector to pull the data and my attempts at colorizing columns etc. have as of yet been unsuccessful. Please note that I am just learning the workings of Highcharts and I may very well be missing some fundamental understanding of things here. I do find myself somewhat confused by chart data definition options... defining series vs. using a connector. What I'm using right now to pull data is a connector like the code in the attachment (I originally copy / pasted it in here, but Cloudfare was blocking my post).

This is the way that I understand that I need to pull data for my charts dynamically via queries from our database, but if there is a better way then I'm wide open to it. If a connector is the way to go then I just need to figure out how to incorporate colorization into this data pull.

Thanks!

[pawelys]

We have a couple of straightforward solutions utilizing column assignment:

1. The first one has to do with using color directly as data and switching off the styled mode.
   Demo: https://jsfiddle.net/BlackLabel/j82becLx/
2. A second approach could involve using a class name as data while keeping the styled mode activated.
   Demo: https://jsfiddle.net/BlackLabel/yk5mjn8c/

See the Highcharts Components documentation article, where you can learn more about assigning data to points, utilizing the columnAssignment option. It's not limited to x and y values only, but also includes almost everything that can be set by options (it uses the series.keys option under the hood).

Do not hesitate to contact us in the future
Best regards

[redherring917]

Thanks for your reply.

As a follow-up to this, I’ve since been able to successfully apply a different color to each bar in my bar chart by moving away from using a connector to pull the data and putting that query that pulls the data directly in the chart’s series object instead (see screenshot attached). But despite looking over a number of examples, I’ve still been unable to actually spec the colors of the bar vs. have them simply adopt the defaults, so I’d appreciate help with that (as you can see, I tried simply passing color as part of a “name”, ”y”, “color” array of objects but that didn’t seem to work… each bar was simply colored per the default palette).

This process has also led me to a bit of a place of confusion / uncertainly as to when / if I should be using data connectors vs. putting those data queries directly in my charts’ series definitions. I’ve seen examples that use connectors to load data and ones that don’t, so it seems like sort of maybe a “two different ways to skin a cat” (apologies to all cats) situation? Should I be using connectors, or are there certain instances where I must use connectors (perhaps DataGrids for example, as I seem to have trouble getting them to work any other way)? I must admit that I sort of like the idea of using connectors, just to keep the data pull and component config / styling separate, but in using connectors I found that I was sometimes having trouble configuring my charts as desired.

Thanks.

[pawelys]

Hi redherring917,
1. Could it be possible that your styledMode is still activated?
2. As for utilizing connectors, a broadly accepted guideline suggests that if you are employing the same dataset across multiple components and utilizing default synchronization between them like hover or extremes, defining and using a connector would be recommended. If this is not the case, you might find it more straightforward to pass the data directly to the component.

Don't hesitate to reach out if there are additional queries you need assistance with.
kind regards,

[redherring917]

Hi Pawel. Thanks for your reply and your note on connectors.

As for colorizing those bars in my chart, I've included my entire component code to avoid confusion - would you be able to show me where / how to deactivate styledMode? From reading documentation, I more or less understand the concept, but I tried adding a specification of "styledMode: false" at the upper level, chartOptions level and series level but none of those attempts did what I expected them to (note that I am not showing those attempts in the attached code). If styledMode was successfully deactivated for this chart, I would expect that by simply passing color as part of a “name”, ”y”, “color” array of objects as I've done here that each bar would be colored as specified (in this test case all bars would be #ff0000, but in production I'd pull color from the database query), but each bar continues to be colored per the default palette.

Thanks again.

[redherring917]

Apologies. Things have already changed since my previous post. I realized that i HAVE to use connectors because I'm allowing user to save their dashboards via getOptions BUT I don't want them saving data, rather, I always want current data to be pulled to populated selected components. (So if I use connectors I can strip the dataPool object out of my saved JSON and reload it every time.)

So I'm sort of back to the start on colorizing individual columns, bars, lines etc. when using connectors. What I really want to do is to specifically color each column / bar / line as part of the dataset and ignore default styling (again, when using connectors).

I've attached snippets of the relevant connector, component definition, and my current dashboard output. What I would "expect" to see per this code is that all bars are colored #ff0000 (in production I'll pull the appropriate color in the query, but for now I'm just testing). But clearly the chart is using the default color set. Perhaps it's as "easy" at this point as deactivating styledMode as you suggested, but I've tried to do that everywhere that seemed appropriate and it didn't seem to work. (Plus there may very well be other things wrong with the way that I'm trying to accomplish this, which I hope you'll be able to verify.)

Thanks SO MUCH in advance for your thoughts on this. I promise that I've searched documentation and examples and while I'm sure the answer is out there I can't seem to find / understand it.

[redherring917]

Hi there. Still hoping to hear back on this. I'm assuming that the solution I'm missing here is likely simple, but for some reason it escapes me.

Thanks.

[dawid.d]

Hi,

I'm sorry for the late reply.

So, to disable styled mode you can use this option: https://api.highcharts.com/highcharts/chart.styledMode

At the same time, make sure that you are not importing highcharts.css styles, which, despite disabling styled mode, overwrite inline styles.

Docs: https://www.highcharts.com/docs/chart-d ... yle-by-css

Best regards