morningsun
Posts: 1
Joined: Mon May 09, 2022 11:12 am

Highchart Select and Highlight Column

Highcharts in use :
https://github.com/highcharts/highchart ... g/10.0.0.1
I would like to have a chart where a data point, indicated by two columns, can be selected together in one touch, and programmatically.
Also, there should be a possibility to know which data point is selected.

For example,
Screen Shot 2022-05-09 at 2.53.20 PM.png
Screen Shot 2022-05-09 at 2.53.20 PM.png (98.39 KiB) Viewed 845 times
- i would like to select current month by default (programmatically), e.g. selection Jun
- User can select any other month in one touch
- When selected I should receive a callback.

So far I have got till here, may be a tooltip selection event will help me resolve it.

Code: Select all

HIOptions options = new HIOptions();

        HIChart chart = new HIChart();
        chart.setType("column");
        options.setChart(chart);
        chart.setEvents(new HIEvents());
        chart.getEvents().setClick(new HIFunction(new HIConsumer<HIChartContext>() {
            @Override
            public void accept(HIChartContext hiChartContext) {
                Log.d("**", "");
            }
        }, new String[]{"x", "category"}));

        HITitle title = new HITitle();
        title.setText("Monthly Average Rainfall");
        options.setTitle(title);

        HISubtitle subtitle = new HISubtitle();
        subtitle.setText("Source: WorldClimate.com");
        options.setSubtitle(subtitle);

        HIXAxis xAxis = new HIXAxis();
        String[] categoriesList = new String[] {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
        xAxis.setCategories(new ArrayList<>(Arrays.asList(categoriesList)));
        xAxis.setCrosshair(new HICrosshair());
        options.setXAxis(new ArrayList<HIXAxis>(){{add(xAxis);}});

        HIYAxis yAxis = new HIYAxis();
        yAxis.setMin(0);
        yAxis.setTitle(new HITitle());
        yAxis.getTitle().setText("Rainfall (mm)");
        options.setYAxis(new ArrayList<HIYAxis>(){{add(yAxis);}});

        HITooltip tooltip = new HITooltip();
        tooltip.setHeaderFormat("");
        tooltip.setPointFormat("");
        tooltip.setFooterFormat("");
        tooltip.setBorderColor(HIColor.initWithRGBA(0,0,0,0));
        tooltip.setBorderWidth(0);
        tooltip.setUseHTML(true);
        tooltip.setShadow(false);
        tooltip.setBackgroundColor(HIColor.initWithRGBA(0,0,0,0));
        tooltip.setShared(true);

        options.setTooltip(tooltip);

        HIPlotOptions plotOptions = new HIPlotOptions();
        plotOptions.setColumn(new HIColumn());
        plotOptions.getColumn().setPointPadding(0.2);
        plotOptions.getColumn().setBorderWidth(0);
        options.setPlotOptions(plotOptions);

        HIColumn series1 = new HIColumn();
        series1.setName("Tokyo");
        Number[] series1_data = new Number[] {49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4};
        series1.setData(new ArrayList<>(Arrays.asList(series1_data)));
        HIColumn series2 = new HIColumn();
        series2.setName("New York");
        Number[] series2_data = new Number[] {83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3};
        series2.setData(new ArrayList<>(Arrays.asList(series2_data)));
        options.setSeries(new ArrayList<>(Arrays.asList(series1, series2)));

        chartView.setOptions(options);
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highchart Select and Highlight Column

Hello morningsun,
Welcome to our forum and thanks for contacting us with your question!

I have forwarded your question to our android developer and I will be back with an answer asap.

Best regards!
Hubert Kozik
Highcharts Developer
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highchart Select and Highlight Column

Hi morningsun!
Here is the code of the demo with the features you requested. To select the current month by default you can do it in events.load property. To select another month by click/touch you can use a events.click property and make a plotLine behind clicked category, here you can also do additional operations.

Code: Select all

        HIChartView chartView = findViewById(R.id.chartview1);

        HIOptions options = new HIOptions();

        HIChart chart = new HIChart();
        chart.setType("column");
        HIEvents events =  new HIEvents();
        HIFunction load = new HIFunction(" function() { const chart = this, axis = chart.xAxis[0], point = chart.series[0].points[5], width = (axis.toPixels(point.x + 0.5) - axis.toPixels(point.x - 0.5)); chart.selectedCategory = axis.addPlotLine({ value: point.x, color: 'rgba(0, 0, 255, 0.5)', width: width, id: 'first' }); }");
        events.setLoad(load);
        HIFunction click = new HIFunction("function(e) { const chart = this, closestPoint = this.hoverPoint, axis = chart.xAxis[0]; if (chart.selectedCategory) chart.selectedCategory.destroy(); const width = (axis.toPixels(closestPoint.x + 0.5) - axis.toPixels(closestPoint.x - 0.5)); chart.selectedCategory = axis.addPlotLine({ value: closestPoint.x, color: 'rgba(0, 0, 255, 0.5)', width: width, id: 'first' }); console.log('Do something on click'); }");
        events.setClick(click);
        chart.setEvents(events);
        options.setChart(chart);

        HIXAxis xAxis = new HIXAxis();
        String[] categoriesList = new String[] {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
        xAxis.setCategories(new ArrayList<>(Arrays.asList(categoriesList)));
        xAxis.setCrosshair(new HICrosshair());
        options.setXAxis(new ArrayList<HIXAxis>(){{add(xAxis);}});

        HITooltip tooltip = new HITooltip();
        tooltip.setHeaderFormat("");
        tooltip.setPointFormat("");
        tooltip.setFooterFormat("");
        tooltip.setBorderColor(HIColor.initWithRGBA(0,0,0, 0));
        tooltip.setBackgroundColor(HIColor.initWithRGBA(0,0,0, 0));
        tooltip.setShared(true);
        tooltip.setUseHTML(true);
        options.setTooltip(tooltip);

        HIPlotOptions plotOptions = new HIPlotOptions();
        plotOptions.setColumn(new HIColumn());
        plotOptions.getColumn().setPointPadding(0.2);
        plotOptions.getColumn().setBorderWidth(0);
        options.setPlotOptions(plotOptions);

        HIColumn series1 = new HIColumn();
        series1.setName("Tokyo");
        Number[] series1_data = new Number[] {49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4};
        series1.setData(new ArrayList<>(Arrays.asList(series1_data)));
        HIColumn series2 = new HIColumn();
        series2.setName("New York");
        Number[] series2_data = new Number[] {83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3};
        series2.setData(new ArrayList<>(Arrays.asList(series2_data)));
        options.setSeries(new ArrayList<>(Arrays.asList(series1, series2)));

        chartView.setOptions(options);
API Reference: https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/c ... ents.click

Feel free to ask any further questions!
Best regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”